Node.js for frontend developers

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

View Slide


View Slide

case you missed it
⬢ about two years old
⬢ web server
⬢ V8 as a backend platform
⬢ all evented everything
⬢ write in JavaScript

View Slide

hello world
http://nodejs.org

View Slide

great, but..

View Slide

things node is good at
⬢ chat apps
⬢ games
⬢ prototyping

View Slide

also: websites.

View Slide

fat clients
⬢ client managing state
⬢ client-side copy of data
⬢ server just provides persistence

View Slide

connecting to APIs
⬢ minimal persistence needs on your own
server
⬢ easily avoid cross-domain issues
⬢ callbacks on the server instead of JSONP

View Slide

real-time
⬢ great for collaborative apps
⬢ everything’s evented
⬢ pushing and polling feel more natural
⬢ excellent tools and abstractions

View Slide

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

View Slide

hello $$$
http://www.braintreepayments.com/docs/node

View Slide

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

View Slide

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 events

View Slide

require(‘other stuff’);

View Slide

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

View Slide

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

View Slide

node modules

View Slide

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

View Slide

writing less and
doing more*
* for the back-end

View Slide

express
http://expressjs.com

View Slide

express
⬢ application framework
⬢ simple default ﬁle structure
⬢ setup as easy as “express”
⬢ routing
⬢ template rendering
⬢ sessions

View Slide

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

View Slide

rendering a page
app.get('/',function(req, res) {
if (req.session && req.session.uid) {
return res.redirect('/user');
}
res.render('login');
});

View Slide

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

View Slide

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());
});

View Slide

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

View Slide

socket.io
http://socket.io

View Slide

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!

View Slide

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) {
...
});

View Slide

(or not)
http://socket.io/#howtouse

View Slide

easy client setup

 var socket = io.connect('http://localhost:1337'); 

View Slide

publish events

 ... $(“#btn”).click(function() { socket.emit(“login”, $(“#username”).val()); }); 

View Slide

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

View Slide

subscribe to events
socket.on(“bookmark”, function(data) {
socket.get(“uid”, function(err, uid) {
addBookmark(uid, data.page, data.title);
socket.emit(“bmarkSaved”, data);
});
});

View Slide

subscribe to events
 ... socket.on(“bmarkSaved”, function(data) { var bmark = new Bmark(data.page, data.name); bmark.render(); }); 

View Slide

oh yay.
more code to write.

View Slide

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

View Slide

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!

View Slide

objects
http://www.2ality.com/2011/08/universal-modules.html

View Slide

callbacks
⬢ user events
⬢ messages to the server
⬢ responses to the client
⬢ database operations
⬢ calls to APIs
⬢ everything!

View Slide

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

View Slide

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

View Slide

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
jQuery

View Slide

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

View Slide

ok, but when
will it be ready?

View Slide

totes ready!

View Slide

ok, no, really.

View Slide


View Slide

(your pet project)

View Slide

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

View Slide

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.

View Slide

thanks!
@garannm / [email protected]

View Slide

Node.js for frontend developers

Node.js for frontend developers

Garann Means

More Decks by Garann Means

Other Decks in Technology

Featured

Transcript