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 full-size slide

  2. Saturday, October 1, 2011

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. node modules
    Saturday, October 1, 2011

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  32. easy client setup

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

    View full-size slide

  33. publish events


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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  47. totes ready!
    Saturday, October 1, 2011

    View full-size slide

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

    View full-size slide

  49. Saturday, October 1, 2011

    View full-size slide

  50. Saturday, October 1, 2011

    View full-size slide

  51. Saturday, October 1, 2011

    View full-size slide

  52. Saturday, October 1, 2011

    View full-size slide

  53. Saturday, October 1, 2011

    View full-size slide

  54. Saturday, October 1, 2011

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide