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. 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
  2. things node is good at ⬢ chat apps ⬢ games

    ⬢ prototyping Saturday, October 1, 2011
  3. fat clients ⬢ client managing state ⬢ client-side copy of

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

    pushing and polling feel more natural ⬢ excellent tools and abstractions Saturday, October 1, 2011
  6. 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
  7. 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
  8. node modules // myModule.js var myModule = exports; myModule.add =

    function(num1, num2) { return num1 + num2; } Saturday, October 1, 2011
  9. 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
  10. express ⬢ application framework ⬢ simple default file structure ⬢

    setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessions Saturday, October 1, 2011
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. publish events socket.on(“login”, function (name) { socket.set(“uid”, name, function ()

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

    = new Bmark(data.page, data.name); bmark.render(); }); </script> Saturday, October 1, 2011
  20. 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
  21. 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
  22. callbacks ⬢ user events ⬢ messages to the server ⬢

    responses to the client ⬢ database operations ⬢ calls to APIs ⬢ everything! Saturday, October 1, 2011
  23. jQuery in node ⬢ installs as easily as any other

    npm module ⬢ gets its own dependencies (jsdom) ⬢ DOM manipulation ⬢ wait, what? Saturday, October 1, 2011
  24. 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
  25. 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
  26. 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
  27. 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