node.js for front-end developers

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

Saturday, October 1, 2011

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

hello world http://nodejs.orgSaturday, October 1, 2011

great, but..Saturday, October 1, 2011

things node is good at ⬢ chat apps ⬢ games ⬢ prototypingSaturday, October 1, 2011

also: websites.Saturday, October 1, 2011

fat clients ⬢ client managing state ⬢ client-side copy of data ⬢ server just provides persistenceSaturday, October 1, 2011

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

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

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 backendSaturday, October 1, 2011

hello $$$ http://www.braintreepayments.com/docs/nodeSaturday, October 1, 2011

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

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

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

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

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

node modulesSaturday, October 1, 2011

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 maintainedSaturday, October 1, 2011

writing less and doing more* * for the back-endSaturday, October 1, 2011

express http://expressjs.comSaturday, October 1, 2011

express ⬢ application framework ⬢ simple default ﬁle structure ⬢ setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessionsSaturday, October 1, 2011

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

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

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

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

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

socket.io http://socket.ioSaturday, October 1, 2011

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

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

(or not) http://socket.io/#howtouseSaturday, October 1, 2011

easy client setup <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect(http://localhost:1337); </script>Saturday, October 1, 2011

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

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

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

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

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

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

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

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

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

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

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 interactionSaturday, October 1, 2011

underscore in node ⬢ works awesome with jQuery ⬢ works awesome with node! ⬢ same utilities on both sides, same code ⬢ if you don’t have a speciﬁc use case for jQuerySaturday, October 1, 2011

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, anythingSaturday, October 1, 2011

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

totes ready!Saturday, October 1, 2011

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

Saturday, October 1, 2011

(your pet project)Saturday, October 1, 2011

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

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

thanks! @garannm / garann@gmail.comSaturday, October 1, 2011

http://paper.li	102
http://paper.li	102
http://lanyrd.com	92
http://lanyrd.com	92
http://www.scoop.it	37
http://juliacat97.wordpress.com	27
http://a0.twimg.com	11
http://localhost	5
http://localhost	5
http://integraid.org	4
http://newsroom.ucoz.ru	2
http://127.0.0.1:1234	1

node.js for front-end developers

by Garann Means on Oct 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 480

Statistics

node.js for front-end developers — Presentation Transcript