node.js for front-end
developers
Garann Means // garann.com
Saturday, October 1, 2011
Slide 2
Slide 2 text
Saturday, October 1, 2011
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
hello world
http://nodejs.org
Saturday, October 1, 2011
Slide 5
Slide 5 text
great, but..
Saturday, October 1, 2011
Slide 6
Slide 6 text
things node is good at
⬢ chat apps
⬢ games
⬢ prototyping
Saturday, October 1, 2011
Slide 7
Slide 7 text
also: websites.
Saturday, October 1, 2011
Slide 8
Slide 8 text
fat clients
⬢ client managing state
⬢ client-side copy of data
⬢ server just provides persistence
Saturday, October 1, 2011
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
real-time
⬢ great for collaborative apps
⬢ everything’s evented
⬢ pushing and polling feel more natural
⬢ excellent tools and abstractions
Saturday, October 1, 2011
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
hello $$$
http://www.braintreepayments.com/docs/node
Saturday, October 1, 2011
Slide 13
Slide 13 text
the question you
should be asking is,
“why not?”
Saturday, October 1, 2011
Slide 14
Slide 14 text
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
node modules
// server.js
var addition = require(“myModule”);
console.log(addition.add(4,5)); // “9”
Saturday, October 1, 2011
Slide 18
Slide 18 text
node modules
Saturday, October 1, 2011
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
writing less and
doing more*
* for the back-end
Saturday, October 1, 2011
Slide 21
Slide 21 text
express
http://expressjs.com
Saturday, October 1, 2011
Slide 22
Slide 22 text
express
⬢ application framework
⬢ simple default file structure
⬢ setup as easy as “express”
⬢ routing
⬢ template rendering
⬢ sessions
Saturday, October 1, 2011
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
socket.io
http://socket.io
Saturday, October 1, 2011
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
(or not)
http://socket.io/#howtouse
Saturday, October 1, 2011
Slide 32
Slide 32 text
easy client setup
var socket =
io.connect('http://localhost:1337');
Saturday, October 1, 2011
subscribe to events
...
socket.on(“bmarkSaved”, function(data) {
var bmark =
new Bmark(data.page, data.name);
bmark.render();
});
Saturday, October 1, 2011
Slide 37
Slide 37 text
oh yay.
more code to write.
Saturday, October 1, 2011
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
objects
http://www.2ality.com/2011/08/universal-modules.html
Saturday, October 1, 2011
Slide 41
Slide 41 text
callbacks
⬢ user events
⬢ messages to the server
⬢ responses to the client
⬢ database operations
⬢ calls to APIs
⬢ everything!
Saturday, October 1, 2011
Slide 42
Slide 42 text
jQuery in node
⬢ installs as easily as any other npm module
⬢ gets its own dependencies (jsdom)
⬢ DOM manipulation
⬢ wait, what?
Saturday, October 1, 2011
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
ok, but when
will it be ready?
Saturday, October 1, 2011
Slide 47
Slide 47 text
totes ready!
Saturday, October 1, 2011
Slide 48
Slide 48 text
ok, no, really.
Saturday, October 1, 2011
Slide 49
Slide 49 text
Saturday, October 1, 2011
Slide 50
Slide 50 text
Saturday, October 1, 2011
Slide 51
Slide 51 text
Saturday, October 1, 2011
Slide 52
Slide 52 text
Saturday, October 1, 2011
Slide 53
Slide 53 text
Saturday, October 1, 2011
Slide 54
Slide 54 text
Saturday, October 1, 2011
Slide 55
Slide 55 text
(your pet project)
Saturday, October 1, 2011
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
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