The Modern JavaScript Application

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