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

Tools that get you laid

1,827

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,827
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. A particular slide catching your eye?

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

    ×