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.

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