node.js for front-end                                developers                               Garann Means // garann.comSa...
Saturday, October 1, 2011
case you missed it                     ⬢      about two years old                     ⬢      web server                   ...
hello world                                          http://nodejs.orgSaturday, October 1, 2011
great, but..Saturday, October 1, 2011
things node is good at                     ⬢      chat apps                     ⬢      games                     ⬢      pr...
also: websites.Saturday, October 1, 2011
fat clients                     ⬢      client managing state                     ⬢      client-side copy of data          ...
connecting to APIs                     ⬢      minimal persistence needs on your own                            server     ...
real-time                     ⬢      great for collaborative apps                     ⬢      everything’s evented         ...
things servers do                     ⬢      15 years of JavaScript                            ⬢   anything you’d ever wan...
hello $$$                                http://www.braintreepayments.com/docs/nodeSaturday, October 1, 2011
the question you                            should be asking is,                                 “why not?”Saturday, Octob...
node out of the box                     ⬢      http, https, URL and querystring tools                     ⬢      file syste...
require(‘other stuff’);Saturday, October 1, 2011
node modules                // myModule.js                var myModule = exports;                myModule.add = function(n...
node modules                // server.js                var addition = require(“myModule”);                console.log(add...
node modulesSaturday, October 1, 2011
node modules                     ⬢      http://search.npmjs.org                     ⬢      github                     ⬢   ...
writing less and                             doing more*                               * for the back-endSaturday, October...
express                                      http://expressjs.comSaturday, October 1, 2011
express                     ⬢      application framework                     ⬢      simple default file structure          ...
rendering a page                var app = require(express).createServer();                app.configure(function(){        ...
rendering a page                app.get(/,function(req, res) {                	                  if (req.session && req.se...
easy routing                app.get(/user/:name, function(req, res) {                       res.render(user, {            ...
easy sessions                var express = require( express ),                 app = express.createServer(),              ...
easy sessions                app.post(/login,function(req, res) {                	                  req.session.uid = req....
socket.io                                        http://socket.ioSaturday, October 1, 2011
socket.io                     ⬢      easy-as-pie async communication                     ⬢      functions similar to Event...
plays nice w/ express                var express = require( express ),                 app = express.createServer(),      ...
(or not)                                       http://socket.io/#howtouseSaturday, October 1, 2011
easy client setup                <script src="/socket.io/socket.io.js"></script>                <script>                 v...
publish events                <input type=”text” id=”username” />                <input type=”button” id=”btn” value=”log ...
publish events                socket.on(“login”, function (name) {                   socket.set(“uid”, name, function () {...
subscribe to events                socket.on(“bookmark”, function(data) {                    socket.get(“uid”, function(er...
subscribe to events                <script>                 ...                 socket.on(“bmarkSaved”, function(data) {  ...
oh yay.                            more code to write.Saturday, October 1, 2011
sharing code                     ⬢      possibly the best part?                     ⬢      template reuse                 ...
templates                     ⬢      does it require the DOM?                     ⬢      does it require compilation?     ...
objects                             http://www.2ality.com/2011/08/universal-modules.htmlSaturday, October 1, 2011
callbacks                     ⬢      user events                     ⬢      messages to the server                     ⬢  ...
jQuery in node                     ⬢      installs as easily as any other npm module                     ⬢      gets its o...
jQuery in node                     ⬢      if you have complex existing code that                            depends on jQu...
underscore in node                     ⬢      works awesome with jQuery                     ⬢      works awesome with node...
frameworks                     ⬢      backbone                            ⬢   http://andyet.net/blog/2011/feb/15/re-using-...
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                                        ...
totes ready                     ⬢      basic HTTP stuff is solid                     ⬢      excellent tools already exist ...
thanks!                            @garannm / garann@gmail.comSaturday, October 1, 2011
Upcoming SlideShare
Loading in...5
×

node.js for front-end developers

20,006

Published on

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.

Published in: Technology, Design
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,006
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
450
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

node.js for front-end developers

  1. 1. node.js for front-end developers Garann Means // garann.comSaturday, October 1, 2011
  2. 2. Saturday, October 1, 2011
  3. 3. case you missed it ⬢ about two years old ⬢ web server ⬢ V8 as a backend platform ⬢ all evented everything ⬢ write in JavaScriptSaturday, October 1, 2011
  4. 4. hello world http://nodejs.orgSaturday, October 1, 2011
  5. 5. great, but..Saturday, October 1, 2011
  6. 6. things node is good at ⬢ chat apps ⬢ games ⬢ prototypingSaturday, October 1, 2011
  7. 7. also: websites.Saturday, October 1, 2011
  8. 8. fat clients ⬢ client managing state ⬢ client-side copy of data ⬢ server just provides persistenceSaturday, October 1, 2011
  9. 9. 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
  10. 10. real-time ⬢ great for collaborative apps ⬢ everything’s evented ⬢ pushing and polling feel more natural ⬢ excellent tools and abstractionsSaturday, October 1, 2011
  11. 11. 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
  12. 12. hello $$$ http://www.braintreepayments.com/docs/nodeSaturday, October 1, 2011
  13. 13. the question you should be asking is, “why not?”Saturday, October 1, 2011
  14. 14. 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
  15. 15. require(‘other stuff’);Saturday, October 1, 2011
  16. 16. node modules // myModule.js var myModule = exports; myModule.add = function(num1, num2) { return num1 + num2; }Saturday, October 1, 2011
  17. 17. node modules // server.js var addition = require(“myModule”); console.log(addition.add(4,5)); // “9”Saturday, October 1, 2011
  18. 18. node modulesSaturday, October 1, 2011
  19. 19. 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
  20. 20. writing less and doing more* * for the back-endSaturday, October 1, 2011
  21. 21. express http://expressjs.comSaturday, October 1, 2011
  22. 22. express ⬢ application framework ⬢ simple default file structure ⬢ setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessionsSaturday, October 1, 2011
  23. 23. 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
  24. 24. 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
  25. 25. easy routing app.get(/user/:name, function(req, res) { res.render(user, { username: req.params.name }); });Saturday, October 1, 2011
  26. 26. 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
  27. 27. easy sessions app.post(/login,function(req, res) { req.session.uid = req.body.username; res.redirect(/); });Saturday, October 1, 2011
  28. 28. socket.io http://socket.ioSaturday, October 1, 2011
  29. 29. 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
  30. 30. 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
  31. 31. (or not) http://socket.io/#howtouseSaturday, October 1, 2011
  32. 32. easy client setup <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect(http://localhost:1337); </script>Saturday, October 1, 2011
  33. 33. 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
  34. 34. publish events socket.on(“login”, function (name) {    socket.set(“uid”, name, function () {       socket.emit(“loggedIn”,name); }); });Saturday, October 1, 2011
  35. 35. 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
  36. 36. subscribe to events <script> ... socket.on(“bmarkSaved”, function(data) { var bmark = new Bmark(data.page, data.name); bmark.render(); }); </script>Saturday, October 1, 2011
  37. 37. oh yay. more code to write.Saturday, October 1, 2011
  38. 38. 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
  39. 39. 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
  40. 40. objects http://www.2ality.com/2011/08/universal-modules.htmlSaturday, October 1, 2011
  41. 41. callbacks ⬢ user events ⬢ messages to the server ⬢ responses to the client ⬢ database operations ⬢ calls to APIs ⬢ everything!Saturday, October 1, 2011
  42. 42. jQuery in node ⬢ installs as easily as any other npm module ⬢ gets its own dependencies (jsdom) ⬢ DOM manipulation ⬢ wait, what?Saturday, October 1, 2011
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. ok, but when will it be ready?Saturday, October 1, 2011
  47. 47. totes ready!Saturday, October 1, 2011
  48. 48. ok, no, really.Saturday, October 1, 2011
  49. 49. Saturday, October 1, 2011
  50. 50. Saturday, October 1, 2011
  51. 51. Saturday, October 1, 2011
  52. 52. Saturday, October 1, 2011
  53. 53. Saturday, October 1, 2011
  54. 54. Saturday, October 1, 2011
  55. 55. (your pet project)Saturday, October 1, 2011
  56. 56. we’ve seen this before 2011 2007 2004 2000 server-side client-side 1996 alert() hotscripts libraries app frameworks modern JSSaturday, October 1, 2011
  57. 57. 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
  58. 58. thanks! @garannm / garann@gmail.comSaturday, October 1, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×