Your SlideShare is downloading. ×
  • Like
node.js for front-end developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

node.js for front-end developers

  • 18,875 views
Published

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.

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
18,875
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
428
Comments
0
Likes
23

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. node.js for front-end developers Garann Means // garann.comSaturday, October 1, 2011
  • 2. Saturday, October 1, 2011
  • 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. hello world http://nodejs.orgSaturday, October 1, 2011
  • 5. great, but..Saturday, October 1, 2011
  • 6. things node is good at ⬢ chat apps ⬢ games ⬢ prototypingSaturday, October 1, 2011
  • 7. also: websites.Saturday, October 1, 2011
  • 8. fat clients ⬢ client managing state ⬢ client-side copy of data ⬢ server just provides persistenceSaturday, October 1, 2011
  • 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. real-time ⬢ great for collaborative apps ⬢ everything’s evented ⬢ pushing and polling feel more natural ⬢ excellent tools and abstractionsSaturday, October 1, 2011
  • 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. hello $$$ http://www.braintreepayments.com/docs/nodeSaturday, October 1, 2011
  • 13. the question you should be asking is, “why not?”Saturday, October 1, 2011
  • 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. require(‘other stuff’);Saturday, October 1, 2011
  • 16. node modules // myModule.js var myModule = exports; myModule.add = function(num1, num2) { return num1 + num2; }Saturday, October 1, 2011
  • 17. node modules // server.js var addition = require(“myModule”); console.log(addition.add(4,5)); // “9”Saturday, October 1, 2011
  • 18. node modulesSaturday, October 1, 2011
  • 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. writing less and doing more* * for the back-endSaturday, October 1, 2011
  • 21. express http://expressjs.comSaturday, October 1, 2011
  • 22. express ⬢ application framework ⬢ simple default file structure ⬢ setup as easy as “express” ⬢ routing ⬢ template rendering ⬢ sessionsSaturday, October 1, 2011
  • 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. 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. easy routing app.get(/user/:name, function(req, res) { res.render(user, { username: req.params.name }); });Saturday, October 1, 2011
  • 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. easy sessions app.post(/login,function(req, res) { req.session.uid = req.body.username; res.redirect(/); });Saturday, October 1, 2011
  • 28. socket.io http://socket.ioSaturday, October 1, 2011
  • 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. 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. (or not) http://socket.io/#howtouseSaturday, October 1, 2011
  • 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. 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. publish events socket.on(“login”, function (name) {    socket.set(“uid”, name, function () {       socket.emit(“loggedIn”,name); }); });Saturday, October 1, 2011
  • 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. 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. oh yay. more code to write.Saturday, October 1, 2011
  • 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. 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. objects http://www.2ality.com/2011/08/universal-modules.htmlSaturday, October 1, 2011
  • 41. callbacks ⬢ user events ⬢ messages to the server ⬢ responses to the client ⬢ database operations ⬢ calls to APIs ⬢ everything!Saturday, October 1, 2011
  • 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. 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. 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. 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. ok, but when will it be ready?Saturday, October 1, 2011
  • 47. totes ready!Saturday, October 1, 2011
  • 48. ok, no, really.Saturday, October 1, 2011
  • 49. Saturday, October 1, 2011
  • 50. Saturday, October 1, 2011
  • 51. Saturday, October 1, 2011
  • 52. Saturday, October 1, 2011
  • 53. Saturday, October 1, 2011
  • 54. Saturday, October 1, 2011
  • 55. (your pet project)Saturday, October 1, 2011
  • 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. 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. thanks! @garannm / garann@gmail.comSaturday, October 1, 2011