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

19c25948caa92e9d1c629896734cf0d9?s=128

Andy Appleton

October 16, 2012
Tweet

More Decks by Andy Appleton

Other Decks in Technology

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!
  5. None
  6. None
  7. None
  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

  12. None
  13. None
  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

  18. None
  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
  23. None
  24. Templating

  25. None
  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

  41. None
  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'); }); }); });
  45. None
  46. Automation

  47. Grunt JS command line build tool http://gruntjs.com/

  48. None
  49. + http://phantomjs.org/

  50. None
  51. None
  52. None
  53. https://github.com/mrappleton/jasmine-examples

  54. None
  55. Andy Appleton @appltn http://appleton.me