Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node.js for frontend developers

Garann Means
October 05, 2011

Node.js for frontend developers

Do you write JavaScript? Congratulations, you're probably awesome at Node.js! While thinking about things from a server-side perspective might feel off-putting and unnatural, things like callbacks, storing data in JSON, and implementing actual websites probably do not. We'll go beyond getting Node installed and talk about how to quickly build a working web application, and demonstrate that Node can offer frontend developers more than just a new prototyping tool or way of creating endless chat servers.

Garann Means

October 05, 2011
Tweet

More Decks by Garann Means

Other Decks in Technology

Transcript

  1. node.js for front-end
    developers
    Garann Means // garann.com
    Saturday, October 1, 2011

    View Slide

  2. Saturday, October 1, 2011

    View Slide

  3. case you missed it
    ⬢ about two years old
    ⬢ web server
    ⬢ V8 as a backend platform
    ⬢ all evented everything
    ⬢ write in JavaScript
    Saturday, October 1, 2011

    View Slide

  4. hello world
    http://nodejs.org
    Saturday, October 1, 2011

    View Slide

  5. great, but..
    Saturday, October 1, 2011

    View Slide

  6. things node is good at
    ⬢ chat apps
    ⬢ games
    ⬢ prototyping
    Saturday, October 1, 2011

    View Slide

  7. also: websites.
    Saturday, October 1, 2011

    View Slide

  8. fat clients
    ⬢ client managing state
    ⬢ client-side copy of data
    ⬢ server just provides persistence
    Saturday, October 1, 2011

    View Slide

  9. connecting to APIs
    ⬢ minimal persistence needs on your own
    server
    ⬢ easily avoid cross-domain issues
    ⬢ callbacks on the server instead of JSONP
    Saturday, October 1, 2011

    View Slide

  10. real-time
    ⬢ great for collaborative apps
    ⬢ everything’s evented
    ⬢ pushing and polling feel more natural
    ⬢ excellent tools and abstractions
    Saturday, October 1, 2011

    View Slide

  11. things servers do
    ⬢ 15 years of JavaScript
    ⬢ anything you’d ever want to do in a
    browser
    ⬢ 2 years of node
    ⬢ anything you’d ever want to do on the
    backend
    Saturday, October 1, 2011

    View Slide

  12. hello $$$
    http://www.braintreepayments.com/docs/node
    Saturday, October 1, 2011

    View Slide

  13. the question you
    should be asking is,
    “why not?”
    Saturday, October 1, 2011

    View Slide

  14. node out of the box
    ⬢ http, https, URL and querystring tools
    ⬢ file system tools
    ⬢ basic debugging, console logging, REPL
    ⬢ timers, setInterval, etc.
    ⬢ events and custom events
    Saturday, October 1, 2011

    View Slide

  15. require(‘other stuff’);
    Saturday, October 1, 2011

    View Slide

  16. node modules
    // myModule.js
    var myModule = exports;
    myModule.add = function(num1, num2) {
    return num1 + num2;
    }
    Saturday, October 1, 2011

    View Slide

  17. node modules
    // server.js
    var addition = require(“myModule”);
    console.log(addition.add(4,5)); // “9”
    Saturday, October 1, 2011

    View Slide

  18. node modules
    Saturday, October 1, 2011

    View Slide

  19. node modules
    ⬢ http://search.npmjs.org
    ⬢ github
    ⬢ 99% chance that what you want exists
    ⬢ use caution!
    ⬢ check for multiple use cases
    ⬢ check whether it’s still maintained
    Saturday, October 1, 2011

    View Slide

  20. writing less and
    doing more*
    * for the back-end
    Saturday, October 1, 2011

    View Slide

  21. express
    http://expressjs.com
    Saturday, October 1, 2011

    View Slide

  22. express
    ⬢ application framework
    ⬢ simple default file structure
    ⬢ setup as easy as “express”
    ⬢ routing
    ⬢ template rendering
    ⬢ sessions
    Saturday, October 1, 2011

    View Slide

  23. rendering a page
    var app = require('express').createServer();
    app.configure(function(){
    app.set('view engine', 'html');
    app.register('.html', require('jqtpl').express);
    });
    Saturday, October 1, 2011

    View Slide

  24. rendering a page
    app.get('/',function(req, res) {
    if (req.session && req.session.uid) {
    return res.redirect('/user');
    }
    res.render('login');
    });
    Saturday, October 1, 2011

    View Slide

  25. easy routing
    app.get('/user/:name', function(req, res) {
    res.render('user', {
    username: req.params.name
    });
    });
    Saturday, October 1, 2011

    View Slide

  26. easy sessions
    var express = require(' express '),
    app = express.createServer(),
    connect = require(' connect ');
    app.configure(function(){
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session());
    });
    Saturday, October 1, 2011

    View Slide

  27. easy sessions
    app.post('/login',function(req, res) {
    req.session.uid = req.body.username;
    res.redirect('/');
    });
    Saturday, October 1, 2011

    View Slide

  28. socket.io
    http://socket.io
    Saturday, October 1, 2011

    View Slide

  29. socket.io
    ⬢ easy-as-pie async communication
    ⬢ functions similar to EventEmitter
    ⬢ emit:on :: publish:subscribe
    ⬢ same for client or server
    ⬢ advanced stuff: context, broadcast
    ⬢ works like.. JavaScript!
    Saturday, October 1, 2011

    View Slide

  30. plays nice w/ express
    var express = require(' express '),
    app = express.createServer(),
    connect = require(' connect '),
    io = require('socket.io').listen(app);
    io.sockets.on('connection', function(socket) {
    ...
    });
    Saturday, October 1, 2011

    View Slide

  31. (or not)
    http://socket.io/#howtouse
    Saturday, October 1, 2011

    View Slide

  32. easy client setup

    <br/>var socket =<br/>io.connect('http://localhost:1337');<br/>
    Saturday, October 1, 2011

    View Slide

  33. publish events


    <br/>...<br/>$(“#btn”).click(function() {<br/>socket.emit(“login”, $(“#username”).val());<br/>});<br/>
    Saturday, October 1, 2011

    View Slide

  34. publish events
    socket.on(“login”, function (name) {
    socket.set(“uid”, name, function () {
    socket.emit(“loggedIn”,name);
    });
    });
    Saturday, October 1, 2011

    View Slide

  35. subscribe to events
    socket.on(“bookmark”, function(data) {
    socket.get(“uid”, function(err, uid) {
    addBookmark(uid, data.page, data.title);
    socket.emit(“bmarkSaved”, data);
    });
    });
    Saturday, October 1, 2011

    View Slide

  36. subscribe to events
    <br/>...<br/>socket.on(“bmarkSaved”, function(data) {<br/>var bmark =<br/>new Bmark(data.page, data.name);<br/>bmark.render();<br/>});<br/>
    Saturday, October 1, 2011

    View Slide

  37. oh yay.
    more code to write.
    Saturday, October 1, 2011

    View Slide

  38. sharing code
    ⬢ possibly the best part?
    ⬢ template reuse
    ⬢ object reuse
    ⬢ mostly: convention and tool reuse
    ⬢ pub/sub and callbacks
    ⬢ underscore, even jQuery!
    ⬢ backbone and friends
    Saturday, October 1, 2011

    View Slide

  39. templates
    ⬢ does it require the DOM?
    ⬢ does it require compilation?
    ⬢ no + no == probably works for both client-
    and server-side
    ⬢ jQuery templates
    ⬢ mustache
    ⬢ and many more!
    Saturday, October 1, 2011

    View Slide

  40. objects
    http://www.2ality.com/2011/08/universal-modules.html
    Saturday, October 1, 2011

    View Slide

  41. callbacks
    ⬢ user events
    ⬢ messages to the server
    ⬢ responses to the client
    ⬢ database operations
    ⬢ calls to APIs
    ⬢ everything!
    Saturday, October 1, 2011

    View Slide

  42. jQuery in node
    ⬢ installs as easily as any other npm module
    ⬢ gets its own dependencies (jsdom)
    ⬢ DOM manipulation
    ⬢ wait, what?
    Saturday, October 1, 2011

    View Slide

  43. jQuery in node
    ⬢ if you have complex existing code that
    depends on jQuery
    ⬢ if you need to write a scraper
    ⬢ if you need to dig through some HTML (e.g.
    spidering)
    ⬢ if you want to simulate user interaction
    Saturday, October 1, 2011

    View Slide

  44. underscore in node
    ⬢ works awesome with jQuery
    ⬢ works awesome with node!
    ⬢ same utilities on both sides, same code
    ⬢ if you don’t have a specific use case for
    jQuery
    Saturday, October 1, 2011

    View Slide

  45. frameworks
    ⬢ backbone
    ⬢ http://andyet.net/blog/2011/feb/15/re-using-backbonejs-models-on-the-
    server-with-node/
    ⬢ spine
    ⬢ http://maccman.github.com/spine.tutorials/node.html
    ⬢ in theory, anything
    Saturday, October 1, 2011

    View Slide

  46. ok, but when
    will it be ready?
    Saturday, October 1, 2011

    View Slide

  47. totes ready!
    Saturday, October 1, 2011

    View Slide

  48. ok, no, really.
    Saturday, October 1, 2011

    View Slide

  49. Saturday, October 1, 2011

    View Slide

  50. Saturday, October 1, 2011

    View Slide

  51. Saturday, October 1, 2011

    View Slide

  52. Saturday, October 1, 2011

    View Slide

  53. Saturday, October 1, 2011

    View Slide

  54. Saturday, October 1, 2011

    View Slide

  55. (your pet project)
    Saturday, October 1, 2011

    View Slide

  56. we’ve seen this before
    1996
    2000
    2004
    2007
    2011
    alert() hotscripts libraries app frameworks modern JS
    server-side client-side
    Saturday, October 1, 2011

    View Slide

  57. totes ready
    ⬢ basic HTTP stuff is solid
    ⬢ excellent tools already exist
    ⬢ client-side work can be reused
    ⬢ you know JavaScript
    ⬢ you can make a web application. now.
    Saturday, October 1, 2011

    View Slide

  58. thanks!
    @garannm / [email protected]
    Saturday, October 1, 2011

    View Slide