Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tools that get you laid

2,105 views

Published on

Published in: Technology
  • Be the first to comment

Tools that get you laid

  1. 1. Tools that get you laid webcamplj 2011 @swizec
  2. 2. The issue• want shiny HTML app• RESTful API’s are expected• need speed and clean code• I might want to add features (fast)
  3. 3. Thin server fat client• server is a fancy database• servers are not free• more users? = more computing power!
  4. 4. The tools• express.js• underscore.js• backbone.js• ejs, ejs
  5. 5. Express.js
  6. 6. Idea• lovely routing• request rendering• response rendering• kill callback soup (middleware)
  7. 7. The model• not quite MVC• more like VC
  8. 8. Lovely routing• app.get(‘/a/path’, a_function)• app.post(‘/a/path’, a_function)• app.put( ...• app.delete( ...
  9. 9. Request rendering (old)• it’s just a socket• manually parse query• manually fetch body ...
  10. 10. Request rendering (new)• app.post(‘/path:id’, req, res)• req is easy to use object• req.params is get parameters• req.body is post parameters
  11. 11. Middleware (old)app.get(/user/:id, function(req, res, next){ loadUser(req.params.id, function(err,user){ if (err) return next(err); res.send(Viewing user + user.name); });});
  12. 12. Middleware (new)function loadUser(req, res, next) { var user = users[req.params.id]; if (user) { req.user = user; next(); } else { next(new Error(Failed to load user + req.params.id)); }} app.get(/user/:id, loadUser, function(req, res){ res.send(Viewing user + req.user.name); });
  13. 13. Response rendering• res.send()• res.send({some: ‘json’})• res.render(‘index’, {some: ‘data’})• res.download(‘/a/file.png’, ‘pic.png’)
  14. 14. underscore.js
  15. 15. A toolbelt• convenience functions• just use _.<something>• reverts to native if possible
  16. 16. The important parts• map, reduce, select, any, groupBy etc.• first, last, rest ...• bind, memoize, wrap ...• keys, values, functions, extend ...
  17. 17. backbone.js
  18. 18. MVC!• client-side MVC• javascriptMVC, extJS, knockout.js ...
  19. 19. Idea• kill callback soup• easy event binding• fuck the ‘this’• magically bind data to representation
  20. 20. Result• data stored in objects• change data, view reacts
  21. 21. Where data?• models: var Book = Backbone.Model.extend({urlRoot : /book});• collections: var Notes = Backbone.Collection.extend({url: /notes});
  22. 22. Magical REST• model.save()• model.update()• collection.fetch()• etc.
  23. 23. Events (old)• $(“#fancyselector”).click(function ..• $(“#form”).submit(function ..
  24. 24. Events (new)• events: { ‘click #fancyselector’: “func”• ‘this’ magically bound perfectly
  25. 25. Views• make a render function• this.model.bind(“change”, this.render)• model.set(“foo”, “bar”) --> renders!
  26. 26. ejs, ejs
  27. 27. ejs, ejs?• two tools, same name• node.js• client-side• “embeddable javascript”
  28. 28. Idea• embed some JS in your HTML• <% .. %>• a bunch of convenience functions
  29. 29. Ejs-client• it’s actually more powerful• img_tag, textarea, etc. helpers• many ways to get a template
  30. 30. Questions?Btw, go to http://postme.me

×