Taking JavaScript Seriously (feat. Backbone.js)

Transcript

1. JavaScript taking seriously James Cox @th3james UNEP-WCMC

2. Why?

3. Apps > Pages

4. Apps... - Faster, more responsive - Fewer resource requests -

   Better UX =>

5. Apps... :-) Users - Faster, more responsive - Fewer resource

   requests - Better UX =>

6. Websites used to look like this:

7. Then this happened

8. Then this happened ... in 2004

9. It’s 2011

10. It’s 2011 Web Apps are mature

11. It’s 2011 Web Apps are mature And we should be

    building them

12. A Whole Bunch of Awesome HTML5 pushState Canvas CSS3 WebGL

    V8

13. Modernizr.js For when you don’t have the awesome

14. JavaScript Because you don’t have a choice

15. Probably the most common language in the world:

16. Probably the most common language in the world: Worth Learning

17. Most people don’t bother People use JavaScript because they have

    to, and expect it to work like <SOME OTHER LANGUAGE>

18. Most people don’t bother Unfortunately... People use JavaScript because they

    have to, and expect it to work like <SOME OTHER LANGUAGE>

19. JavaScript is not <SOME OTHER LANGUAGE> treating it as such

    is a recipe for pain

20. The Bad Parts JavaScript was written in 10 days Consequentially,

    it has some pretty serious flaws...

21. The Bad Parts Dependency on global variables

22. The Bad Parts Dependency on global variables No block scope

23. The Bad Parts Dependency on global variables No block scope

    Prototypal inheritance is unintuitive to OO programmers

24. The Bad Parts Dependency on global variables No block scope

    Prototypal inheritance is unintuitive to OO programmers Many other small problems which you expect from a language written in 10 days

25. The Good Parts Thankfully, JavaScript also has some seriously good

    parts

26. Great implementation of functions The Good Parts

27. Great implementation of functions Object Literal notation (JSON) The Good

    Parts

28. Great implementation of functions Object Literal notation (JSON) Loosely typed

    The Good Parts

29. Great implementation of functions Object Literal notation (JSON) Loosely typed

    Prototypal inheritance The Good Parts

30. Learn The Good Parts

31. ... It’s shorter than the definitive guide

32. Common Pitfalls

33. Avoiding Globals //Create a global variable var MYAPP = {};

    //Put globals into it MYAPP.map = new Map()

34. Function scope, not block scope var hat; // This is

    global function() { for (var i = 0, il = 10; i < il; i++) { // boat is not limited to the block.. var boat = ‘great’; } // i, il and boat are still in scope here... } // ... but only hat remains here

35. Define all vars at beginning of their scope function() {

    // Define ALL your vars here var i, il, boat; for (i = 0, il = 10; i < il; i++) { boat = ‘great’; } }

36. Closure var closureExample = (function() { var mcHammer = "Can't

    touch this"; return { hammerTime: function () { mcHammer = 'Stop! Hammer time'; }, hammerSay: function () { alert(mcHammer); } }; }()); closureExample.mcHammer; //Will throw an error closureExample.hammerSay();// “Can’t touch this” closureExample.hammerTime(); closureExample.hammerSay();// “Stop! Hammer time

37. Prototypal Inheritance Every Object has a prototype from which it

    inherits Default is Object.prototype

38. Objects inherit from other objects: Should be simple! Unfortunately, JavaScript’s

    tries to make this as unintuitive as possible by using a pseudoclassical pattern :-| No Classes

39. Pseudoclassical behaviour using ‘new’ // New vehicle object var Vehicle

    = function (color) { this.color = color; }; // Augment the prototype with a function Vehicle.prototype.getColor = function () { alert(“I’m “ + this.color); }; // Make an instance var vehicle = new Vehicle(‘Red’); vehicle.getColor(); // “I’m Red”

40. var Car = function(color) { this.color = color; this.noise =

    ‘Vroom!’; } Car.prototype = new Vehicle(); Car.prototype.describe = function () { alert(‘The ‘ + this.color + ‘ car goes ’ + this.noise); } var car = new Car(‘purple’); car.describe(); // The purple car goes Vroom! car.getColor(); // I’m purple

41. Don’t do it like this! The new keyword sucks It’s

    clumsy to use and forgetting the ‘new’ prefix when calling a constructor is easy to do and hard to debug Instead...

42. Use functions to create objects with closure Much cleaner that

    the pseudoclassical pattern Closure ensures more robust objects

43. var vehicle = function(spec) { // Define that and private

    instance variables var that, aPrivateVariable; // Initialise that as an object that = {}; // Create privileged methods var getColor = function () { alert("I’m " + spec.color); }; that.getColor = getColor; // Return our created object return that; }; var myVehicle = vehicle({color:'red'});

44. var car = function(spec) { spec.noise = spec.noise || 'Vroom!';

    // initialise 'that' as a vehicle, // thereby inheriting from it var that = vehicle(spec); var describe = function () { alert('The ' + spec.color + ' car goes ' + spec.noise); }; that.describe = describe; return that; } var myCar = car({color:'purple'});

45. CoffeeScript

46. JavaScript without the bad parts CoffeeScript

47. JavaScript without the bad parts Super readable, Ruby-like syntax CoffeeScript

48. JavaScript without the bad parts Super readable, Ruby-like syntax Compiles

    to fast, high quality, human readable JavaScript CoffeeScript

49. There are some skeptics

50. But! Even if you’re not ready to use CoffeeScript in

    your app,

51. But! Even if you’re not ready to use CoffeeScript in

    your app, it’s still a great way to improve your JavaScript

52. Play with the interpreter at http://jashkenas.github.com Prototype your code in

    CoffeeScript, learn best practices from the generated output

53. Backbone.js

54. “The Wilkinson Sword to JavaScript’s bare razor” @tokumin

55. No more spaghetti heaps of jQuery selectors and callback functions

56. MVC* = Organised *kinda

57. Models Reuse your existing application models

58. Models Reuse your existing application models Stores your data and

    the logic to manipulate it

59. Models Reuse your existing application models Stores your data and

    the logic to manipulate it Should be pretty familiar!

60. Song = Backbone.Model.extend({ defaults: {playCount: 0}, initialize: function(){ // Setup

    the model here }, displayName: function (){ // Use .get to get properties this.get(‘artist’) + ‘: ‘ + this.get(‘track’); }, play: function () { //Use .set to set properties this.set({playCount: this.get(‘playCount’) + 1}); } }); song = new Song({artist: ‘The Fall’, track: ‘Barmy’});

61. Collections var Album = Backbone.Collection.extend({ model: Song }); var song1

    = new Song({ name: "One Touch", artist: "LCD Soundsystem" }); var song2 = new Song({ name: "Song 2", artist: "Blur" }); var compilation = new Album([song1, song2]);

62. Speak JSON JSON is what your app should be serving

63. Speak JSON JSON is what your app should be serving

    Super easy to initialise Backbone/Javascript objects: SomeCollection = new Collection({JSON DATA})

64. Speak JSON JSON is what your app should be serving

    Super easy to initialise Backbone/Javascript objects: Much more reusable than pre-rendered HTML SomeCollection = new Collection({JSON DATA})

65. Speak JSON JSON is what your app should be serving

    Super easy to initialise Backbone/Javascript objects: Much more reusable than pre-rendered HTML Build a platform! SomeCollection = new Collection({JSON DATA})

66. Views AlbumView = Backbone.View.extend({ initialize: function(){ // Setup the view

    }, render: function(){ // Visualise something return this; } }); var av = new AlbumView({ collection: Compilation });

67. initialise: function() { // Create the template from the DOM

    element this.template = _.template($('#album_template').html()) }, render: function() { // Render to this.el with a templating language $(this.el).html(this.template(this.collection.toJSON())); } <script type="text/template" id="album_template"> <ul> <% for (var i = 0; i < songs.length; i++){ %> <li><% employeeList[i].get(‘name’); %></li> <% } %> </ul> </script> Templating

68. Events Where the real magic happens

69. Bind DOM events to view methods AlbumView = Backbone.View.extend({ events:

    { // bind events to methods ‘click .addSong’: ‘addSong’ }, addSong: { // Talk to our collections/model song_name = prompt("Song name?") song_model = new Song({ name: song_name }) } })

70. Bind Collection/Model events to view.render methods AlbumView = Backbone.View.extend({ initialize:

    { ... this.collection.bind('reset', this.render) this.collection.bind('add', this.render) this.collection.bind('remove', this.render) ... } }

71. Views automatically update to reflect changes

72. Views automatically update to reflect changes Powerful stuff!

73. Router Connect routes up to app initialisation Provides browser history

    support and linkable, bookmarkable, shareable URLs

74. MyApp = Backbone.Router.extend({ routes: { '/': 'index', '/:id/': 'show' },

    initialize: function() { // Do any app wide stuff }, index: function() { if (typeof(window.MYAPP.currentView) !== 'undefined') // Close any existing view //Create a collection myCollection = new Collection({some JSON}) //Create a view window.MYAPP.currentView = new CollectionView({collection: myCollection}) $('#container').html(window.MYAPP.currentView.render().el); } });

75. // Create the app myApp = new MyApp(); // Fire

    up the history Backbone.history.start({pushState:true}); // Trigger a history event myApp.navigate('/' + model.get(‘id’), true)

76. Backbone.js Recap Organised

77. Backbone.js Recap Organised Speaks JSON

78. Backbone.js Recap Organised Speaks JSON Event driven

79. Backbone.js Recap Organised Speaks JSON Event driven URL and browser

    history aware

80. Next Steps

81. PJAX Load HTML from your server without page reload Great

    for top level tab navigation

82. BDD for JavaScript describe("Jasmine", function() { it("makes testing JavaScript awesome!",

    function() { expect(yourCode).toBeLotsBetter(); }); });

83. Require.js Load JavaScript files as modules, asynchronously

84. Big Recap! Web Apps => Awesome Learn JavaScript => You

    don’t have a choice Backbone.js => Make large JS projects manageable

85. Thanks! James Cox @th3james UNEP-WCMC