• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
node.js for front-end developers
 

node.js for front-end developers

on

  • 18,438 views

Do you write JavaScript? Congratulations, you're probably awesome at Node.js! While thinking about things from a server-side perspective might feel off-putting and unnatural, things like callbacks, ...

Do you write JavaScript? Congratulations, you're probably awesome at Node.js! While thinking about things from a server-side perspective might feel off-putting and unnatural, things like callbacks, storing data in JSON, and implementing actual websites probably do not. We'll go beyond getting Node installed and talk about how to quickly build a working web application, and demonstrate that Node can offer frontend developers more than just a new prototyping tool or way of creating endless chat servers.

Statistics

Views

Total Views
18,438
Views on SlideShare
17,780
Embed Views
658

Actions

Likes
20
Downloads
415
Comments
0

14 Embeds 658

http://www.scoop.it 134
http://lanyrd.com 118
http://lanyrd.com 118
http://paper.li 102
http://paper.li 102
http://juliacat97.wordpress.com 28
http://www.linkedin.com 22
http://a0.twimg.com 11
https://www.linkedin.com 6
http://localhost 5
http://localhost 5
http://integraid.org 4
http://newsroom.ucoz.ru 2
http://127.0.0.1:1234 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    node.js for front-end developers node.js for front-end developers Presentation Transcript

    • node.js for front-end developers Garann Means // garann.comSaturday, October 1, 2011
    • Saturday, October 1, 2011
    • case you missed it ⬢ about two years old ⬢ web server ⬢ V8 as a backend platform ⬢ all evented everything ⬢ write in JavaScriptSaturday, October 1, 2011
    • hello world http://nodejs.orgSaturday, October 1, 2011
    • great, but..Saturday, October 1, 2011
    • things node is good at ⬢ chat apps ⬢ games ⬢ prototypingSaturday, October 1, 2011
    • also: websites.Saturday, October 1, 2011
    • fat clients ⬢ client managing state ⬢ client-side copy of data ⬢ server just provides persistenceSaturday, October 1, 2011
    • connecting to APIs ⬢ minimal persistence needs on your own server ⬢ easily avoid cross-domain issues ⬢ callbacks on the server instead of JSONPSaturday, October 1, 2011
    • real-time ⬢ great for collaborative apps ⬢ everything’s evented ⬢ pushing and polling feel more natural ⬢ excellent tools and abstractionsSaturday, 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 backendSaturday, October 1, 2011
    • hello $$$ http://www.braintreepayments.com/docs/nodeSaturday, October 1, 2011
    • the question you should be asking is, “why not?”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 eventsSaturday, October 1, 2011
    • require(‘other stuff’);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 modulesSaturday, 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 maintainedSaturday, October 1, 2011
    • writing less and doing more* * for the back-endSaturday, October 1, 2011
    • express http://expressjs.comSaturday, October 1, 2011
    • express ⬢ application framework ⬢ simple default file structure ⬢ setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessionsSaturday, October 1, 2011
    • 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
    • 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
    • easy routing app.get(/user/:name, function(req, res) { res.render(user, { username: req.params.name }); });Saturday, October 1, 2011
    • easy sessions var 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 sessions app.post(/login,function(req, res) { req.session.uid = req.body.username; res.redirect(/); });Saturday, October 1, 2011
    • socket.io http://socket.ioSaturday, 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/ 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
    • (or not) http://socket.io/#howtouseSaturday, 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 events socket.on(“login”, function (name) {    socket.set(“uid”, name, function () {       socket.emit(“loggedIn”,name); }); });Saturday, October 1, 2011
    • subscribe to events socket.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
    • oh yay. more code to write.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 friendsSaturday, 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.htmlSaturday, 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 interactionSaturday, 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 jQuerySaturday, 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, anythingSaturday, October 1, 2011
    • ok, but when will it be ready?Saturday, October 1, 2011
    • totes ready!Saturday, October 1, 2011
    • ok, no, really.Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • Saturday, October 1, 2011
    • (your pet project)Saturday, October 1, 2011
    • we’ve seen this before 2011 2007 2004 2000 server-side client-side 1996 alert() hotscripts libraries app frameworks modern JSSaturday, 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 / garann@gmail.comSaturday, October 1, 2011