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


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

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


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


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


writing less and
doing more*

* for the back-end


express

http://expressjs.com


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


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

app.conﬁgure(function(){
app.set('view engine', 'html');
app.register('.html', require('jqtpl').express);
});


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

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

});


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

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

});


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


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

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

});


socket.io

http://socket.io

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/ express
var 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


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

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


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 events
socket.on(“login”, function (name) {

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

});


subscribe to events
socket.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


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 speciﬁc 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


ok, but when
will it be ready?


totes ready!


ok, no, really.


(your pet project)


we’ve seen this before
2011

2007

2004

2000
server-side client-side

1996
alert() hotscripts libraries app frameworks modern JS


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 / garann@gmail.com


node.js for front-end developers

More Related Content

Viewers also liked

Similar to node.js for front-end developers

Recently uploaded

node.js for front-end developers