node.js for front-end developers

node.js for front-end developers

Garann Means // garann.com

Saturday, October 1, 2011

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


hello world

http://nodejs.org


http://nodejs.org

http://nodejs.org

great, but..


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


also: websites.


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


connecting to APIs⬢ minimal persistence needs on your own

server⬢ easily avoid cross-domain issues⬢ callbacks on the server instead of JSONP


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


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


hello $$$

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


http://nodejs.org

http://nodejs.org

the question you should be asking is,

“why not?”


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


require(‘other stuff’);


node modules// myModule.js

var myModule = exports;

myModule.add = function(num1, num2) {return num1 + num2;

}


node modules// server.js

var addition = require(“myModule”);

console.log(addition.add(4,5)); // “9”


node modules


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


http://search.npmjs.org

http://search.npmjs.org

writing less and doing more*

* for the back-end


express

http://expressjs.com


http://nodejs.org

http://nodejs.org

express⬢ application framework⬢ simple default file structure

⬢ setup as easy as “express”⬢ routing⬢ template rendering⬢ sessions


rendering a pagevar app = require('express').createServer();

app.configure(function(){ app.set('view engine', 'html');

app.register('.html', require('jqtpl').express);});


rendering a pageapp.get('/',function(req, res) {

if (req.session && req.session.uid) { return res.redirect('/user'); } res.render('login');

});


easy routingapp.get('/user/:name', function(req, res) {

res.render('user', {username: req.params.name

});

});


easy sessionsvar express = require(' express '),

app = express.createServer(),connect = require(' connect ');

app.configure(function(){ app.use(express.bodyParser());

app.use(express.cookieParser());app.use(express.session());

});


easy sessionsapp.post('/login',function(req, res) {

req.session.uid = req.body.username;res.redirect('/');

});


socket.io

http://socket.io


http://nodejs.org

http://nodejs.org

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!


plays nice w/ expressvar express = require(' express '),

app = express.createServer(),connect = require(' connect '),io = require('socket.io').listen(app);

io.sockets.on('connection', function(socket) {...

});


(or not)

http://socket.io/#howtouse


http://nodejs.org

http://nodejs.org

easy client setup<script src="/socket.io/socket.io.js"></script>

<script>var socket =

io.connect('http://localhost:1337');</script>


http://localhost

http://localhost

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>


publish eventssocket.on(“login”, function (name) {

socket.set(“uid”, name, function () { socket.emit(“loggedIn”,name);

});

});


subscribe to eventssocket.on(“bookmark”, function(data) {

socket.get(“uid”, function(err, uid) {addBookmark(uid, data.page, data.title);socket.emit(“bmarkSaved”, data);

});

});


subscribe to events<script>

...socket.on(“bmarkSaved”, function(data) {

var bmark = new Bmark(data.page, data.name);

bmark.render();});

</script>


oh yay. more code to write.


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


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!


objects

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


http://nodejs.org

http://nodejs.org

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


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


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


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


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


http://maccman.github.com/spine.tutorials/node.html

http://maccman.github.com/spine.tutorials/node.html

ok, but when will it be ready?


totes ready!


ok, no, really.


(your pet project)


we’ve seen this before

1996

2000

2004

2007

2011

alert() hotscripts libraries app frameworks modern JS

server-side client-side


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.


thanks!@garannm / [email protected]


mailto:[email protected]

mailto:[email protected]

node.js for front-end developers

Technology

years of node

node modules server

things node

node modules http

bodyparser app

cookieparser app

pagevar app

return res