Taking JavaScript Seriously (feat. Backbone.js)

A talk I gave on 'Taking JavaScript Seriously', talking about why you should be taking JavaScript seriously, how to improve your JavaScript by avoiding some common pitfalls, and using Backbone.js to make larger applications easier to build and maintain.

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