Node.js for frontend developers

76f795cabbf80024b1024517c67f0bcf?s=47 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.

76f795cabbf80024b1024517c67f0bcf?s=128

Garann Means

October 05, 2011
Tweet

Transcript

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

    1, 2011
  2. Saturday, October 1, 2011

  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
  4. hello world http://nodejs.org Saturday, October 1, 2011

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

  6. things node is good at ⬢ chat apps ⬢ games

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

  8. fat clients ⬢ client managing state ⬢ client-side copy of

    data ⬢ server just provides persistence Saturday, October 1, 2011
  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
  10. real-time ⬢ great for collaborative apps ⬢ everything’s evented ⬢

    pushing and polling feel more natural ⬢ excellent tools and abstractions Saturday, October 1, 2011
  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
  12. hello $$$ http://www.braintreepayments.com/docs/node Saturday, October 1, 2011

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

    October 1, 2011
  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
  15. require(‘other stuff’); Saturday, October 1, 2011

  16. node modules // myModule.js var myModule = exports; myModule.add =

    function(num1, num2) { return num1 + num2; } Saturday, October 1, 2011
  17. node modules // server.js var addition = require(“myModule”); console.log(addition.add(4,5)); //

    “9” Saturday, October 1, 2011
  18. node modules Saturday, October 1, 2011

  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
  20. writing less and doing more* * for the back-end Saturday,

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

  22. express ⬢ application framework ⬢ simple default file structure ⬢

    setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessions Saturday, October 1, 2011
  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
  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
  25. easy routing app.get('/user/:name', function(req, res) { res.render('user', { username: req.params.name

    }); }); Saturday, October 1, 2011
  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
  27. easy sessions app.post('/login',function(req, res) { req.session.uid = req.body.username; res.redirect('/'); });

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

  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
  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
  31. (or not) http://socket.io/#howtouse Saturday, October 1, 2011

  32. easy client setup <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost:1337');

    </script> Saturday, October 1, 2011
  33. publish events <input type=”text” id=”username” /> <input type=”button” id=”btn” value=”log

    in” /> <script> ... $(“#btn”).click(function() { socket.emit(“login”, $(“#username”).val()); }); </script> Saturday, October 1, 2011
  34. publish events socket.on(“login”, function (name) { socket.set(“uid”, name, function ()

    { socket.emit(“loggedIn”,name); }); }); Saturday, October 1, 2011
  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
  36. subscribe to events <script> ... socket.on(“bmarkSaved”, function(data) { var bmark

    = new Bmark(data.page, data.name); bmark.render(); }); </script> Saturday, October 1, 2011
  37. oh yay. more code to write. Saturday, October 1, 2011

  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
  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
  40. objects http://www.2ality.com/2011/08/universal-modules.html Saturday, October 1, 2011

  41. callbacks ⬢ user events ⬢ messages to the server ⬢

    responses to the client ⬢ database operations ⬢ calls to APIs ⬢ everything! Saturday, October 1, 2011
  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
  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
  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
  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
  46. ok, but when will it be ready? Saturday, October 1,

    2011
  47. totes ready! Saturday, October 1, 2011

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

  49. Saturday, October 1, 2011

  50. Saturday, October 1, 2011

  51. Saturday, October 1, 2011

  52. Saturday, October 1, 2011

  53. Saturday, October 1, 2011

  54. Saturday, October 1, 2011

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

  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
  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
  58. thanks! @garannm / garann@gmail.com Saturday, October 1, 2011