The Modern JavaScript Application

A talk at FOWA London

Transcript

1. The Modern JavaScript Application Andy Appleton @appltn http://appleton.me
2. JS is growing up we are doing more and more with it and we need more robust tools
3. $(function(){ $('.thing').on('click', function(ev){ ev.preventDefault(); var $link = $(this) $.get($link.attr('href'), function(data) { $link.fadeOut(function(){ $('body').append(data); }); }); }); });
4. We can do better other languages have rich sets of tools and patterns, we can too!
8. Models var Person = Backbone.Model.extend({ sayName: function(){ return this.get('name'); } }); var andy = new Person({ name: 'Andy' }); andy.sayName(); // => 'Andy'
9. Collections var People = Backbone.Collection.extend({ sayNames: function(){ return this.map(function(model){ return model.get('name'); }).join(', '); } });
10. Views var PersonView = Backbone.view.extend({ render: function(){ this.el.innerHTML = this.model.get('name'); } });
11. Tools
14. Modules defined chunks of code which list their own dependencies
15. Our Model From Earlier define(['path/to/dependency'], function(dependency){ return Backbone.Model.extend({ // Adding methods and properties }); });
16. Alternative Syntax define(function(require){ var dependency = require('path/to/dep'); return Backbone.Model.extend({ // Adding methods and properties }); });
17. Structure & Conventions Split each module into a separate file
19. The Requests!
20. The Requests! The Humanity!
21. r.js The RequireJS build tool
22. $ node r.js -o config.js Concatenate & minify JS into a single file Concatenate & minify CSS via @import
24. Templating
26. http://handlebarsjs.com/
27. var input = '<h1>{{ name }}</h1>'; var templateFn = Handlebars.compile(input); var output = templateFn({ name: 'Andy' }); // => '<h1>Andy</h1>'
28. var input = ' <article>\ <header>\ <h1>{{title}}</h1>\ by {{author}} on {{date}}\ </header>\ {{content}}\ </article>\ ';
29. index.html <script type="text/template" id="tpl-name"> <article> <header> <h1>{{title}}</h1> ...etc </script> my-view.js var input = $('#tpl-name').text(); // ...compile etc
30. https://github.com/SlexAxton/require-handlebars-plugin
31. my-view.js define(function(require){ var templateFn = require('hbs!path/to/tpl'); // View now has access to compiled template // function }); post-template.hbs <article> <header> <h1>{{title}}</h1> ...etc
32. my-view.js define(function(require){ var templateFn = require('hbs!path/to/tpl'); // View now has access to compiled template // function }); post-template.hbs <article> <header> <h1>{{title}}</h1> ...etc
33. Handy Patterns
34. Mediator A central object to publish and subscribe to global events
35. var mediator = _.clone(Backbone.Events); mediator.on('eventname', function(args){ console.log(args); }); mediator.trigger('eventname', 'sausages'); // => 'sausages' mediator.off('eventname');
36. Model Caching sharing model instances across views
37. define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create = function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
38. define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create = function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
39. define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create = function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
40. Unit Testing
42. http://pivotal.github.com/jasmine/
43. var Person = Backbone.Model.extend({ sayName: function(){ return this.get('name'); } }); Our Model From Earlier (again)
44. describe('Person model', function(){ describe('#sayName', function(){ it('returns `name` attribute', function(){ var person = new Person({ name: 'Andy' }); expect(person.sayName()).toEqual('Andy'); }); }); });
46. Automation
47. Grunt JS command line build tool http://gruntjs.com/
49. + http://phantomjs.org/
53. https://github.com/mrappleton/jasmine-examples
55. Andy Appleton @appltn http://appleton.me