1. Tools that get you laid
webcamplj 2011
@swizec

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. Thin server fat client
• server is a fancy database
• servers are not free
• more users? = more computing power!

4. The tools
• express.js
• underscore.js
• backbone.js
• ejs, ejs

5. Express.js

6. Idea
• lovely routing
• request rendering
• response rendering
• kill callback soup (middleware)

7. The model
• not quite MVC
• more like VC

8. Lovely routing
• app.get(‘/a/path’, a_function)
• app.post(‘/a/path’, a_function)
• app.put( ...
• app.delete( ...

9. Request rendering (old)
• it’s just a socket
• manually parse query
• manually fetch body ...

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. 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. 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. Response rendering
• res.send()
• res.send({some: ‘json’})
• res.render(‘index’, {some: ‘data’})
• res.download(‘/a/file.png’, ‘pic.png’)

14. underscore.js

15. A toolbelt
• convenience functions
• just use _.<something>
• reverts to native if possible

16. The important parts
• map, reduce, select, any, groupBy etc.
• first, last, rest ...
• bind, memoize, wrap ...
• keys, values, functions, extend ...

17. backbone.js

18. MVC!
• client-side MVC
• javascriptMVC, extJS, knockout.js ...

19. Idea
• kill callback soup
• easy event binding
• fuck the ‘this’
• magically bind data to representation

20. Result
• data stored in objects
• change data, view reacts

21. Where data?
• models: var Book =
Backbone.Model.extend({urlRoot : '/book'});
• collections: var Notes =
Backbone.Collection.extend({url: '/notes'});

22. Magical REST
• model.save()
• model.update()
• collection.fetch()
• etc.

23. Events (old)
• $(“#fancyselector”).click(function ..
• $(“#form”).submit(function ..

24. Events (new)
• events: { ‘click #fancyselector’: “func”
• ‘this’ magically bound perfectly

25. Views
• make a render function
• this.model.bind(“change”,
this.render)
• model.set(“foo”, “bar”) --> renders!

26. ejs, ejs

27. ejs, ejs?
• two tools, same name
• node.js
• client-side
• “embeddable javascript”

28. Idea
• embed some JS in your HTML
• <% .. %>
• a bunch of convenience functions

29. Ejs-client
• it’s actually more powerful
• img_tag, textarea, etc. helpers
• many ways to get a template

30. Questions?
Btw, go to http://postme.me