Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Modern JavaScript Application

The Modern JavaScript Application

A talk at FOWA London

Andy Appleton

October 16, 2012
Tweet

More Decks by Andy Appleton

Other Decks in Technology

Transcript

  1. JS is growing up we are doing more and more

    with it and we need more robust tools
  2. We can do better other languages have rich sets of

    tools and patterns, we can too!
  3. Models var Person = Backbone.Model.extend({ sayName: function(){ return this.get('name'); }

    }); var andy = new Person({ name: 'Andy' }); andy.sayName(); // => 'Andy'
  4. $ node r.js -o config.js Concatenate & minify JS into

    a single file Concatenate & minify CSS via @import
  5. var input = '<h1>{{ name }}</h1>'; var templateFn = Handlebars.compile(input);

    var output = templateFn({ name: 'Andy' }); // => '<h1>Andy</h1>'
  6. var input = ' <article>\ <header>\ <h1>{{title}}</h1>\ by {{author}} on

    {{date}}\ </header>\ {{content}}\ </article>\ ';
  7. 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
  8. 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
  9. 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; });
  10. 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; });
  11. 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; });
  12. describe('Person model', function(){ describe('#sayName', function(){ it('returns `name` attribute', function(){ var

    person = new Person({ name: 'Andy' }); expect(person.sayName()).toEqual('Andy'); }); }); });