Tools that get you laid
1 like1,051 views
The document discusses tools for building web applications, including Express.js, Underscore.js, and Backbone.js. Express.js is described as providing routing, request and response rendering, and middleware capabilities. Underscore.js is a utility library that provides functions for tasks like mapping, filtering, and grouping data. Backbone.js implements a client-side MVC pattern and allows binding data to views so that changes to data automatically update views. EJS is mentioned as a templating engine that allows embedding JavaScript in HTML.
![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);
});](https://image.slidesharecdn.com/tools-that-get-you-laid-111022134729-phpapp01/85/Tools-that-get-you-laid-12-320.jpg)
Tools that get you laid
- 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