node.js for front-end developers
TRANSCRIPT
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
fat clients⬢ client managing state⬢ client-side copy of data⬢ server just provides persistence
Saturday, October 1, 2011
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
real-time⬢ great for collaborative apps⬢ everything’s evented⬢ pushing and polling feel more natural⬢ excellent tools and abstractions
Saturday, 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
backend
Saturday, October 1, 2011
hello $$$
http://www.braintreepayments.com/docs/node
Saturday, October 1, 2011
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// 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 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
express⬢ application framework⬢ simple default file structure
⬢ setup as easy as “express”⬢ routing⬢ template rendering⬢ sessions
Saturday, October 1, 2011
rendering a pagevar app = require('express').createServer();
app.configure(function(){ app.set('view engine', 'html');
app.register('.html', require('jqtpl').express);});
Saturday, October 1, 2011
rendering a pageapp.get('/',function(req, res) {
if (req.session && req.session.uid) { return res.redirect('/user'); } res.render('login');
});
Saturday, October 1, 2011
easy routingapp.get('/user/:name', function(req, res) {
res.render('user', {username: req.params.name
});
});
Saturday, October 1, 2011
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());
});
Saturday, October 1, 2011
easy sessionsapp.post('/login',function(req, res) {
req.session.uid = req.body.username;res.redirect('/');
});
Saturday, 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/ expressvar 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
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 eventssocket.on(“login”, function (name) {
socket.set(“uid”, name, function () { socket.emit(“loggedIn”,name);
});
});
Saturday, October 1, 2011
subscribe to eventssocket.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
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
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.html
Saturday, 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 interaction
Saturday, 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 specific use case for
jQuery
Saturday, 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, anything
Saturday, October 1, 2011
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
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 / [email protected]
Saturday, October 1, 2011