Web development is experiencing a major change at the moment. Users are demanding increasingly responsive and interactive web applications. The mobile web has taken off. And closed platforms like Flash are yielding to open standards like HTML 5. In this presentation I’ll argue that the language that will underpin this revolution is JavaScript – despite it’s poor reputation. Furthermore, I’ll explain how JavaScript’s resurrection is being driven by a slew of new open-source technologies. For video of this presentation, see http://www.youtube.com/watch?v=SiCD3Nbf810

1. The Return of JavaScript
Three Projects Driving JavaScript's Renaissance

2. What’s this about?

3. What’s this about?
Why you should care about JavaScript

4. What’s this about?
Why you should care about JavaScript
3 Open-Source JavaScript Projects:

5. What’s this about?
Why you should care about JavaScript
3 Open-Source JavaScript Projects:

6. What’s this about?
Why you should care about JavaScript
3 Open-Source JavaScript Projects:

7. What’s this about?
Why you should care about JavaScript
3 Open-Source JavaScript Projects:

8. JavaScript
Me

9. Why JavaScript?

11. Single Page Apps

13. jQuery is not enough

16. Models and Collections
var Booking = Backbone.Model.extend();
var Bookings = Backbone.Collection.extend({
model: Booking,
url: '/bookings'
});

17. Views
var BookingsView = Backbone.View.extend({
initialize: function(){
_.bind(this, 'addAll', 'handleClick');
this.collection.bind('reset', this.addAll);
},
render: function() {
this.el.fullCalendar({
eventClick: this.handleClick
});
},
addAll: function() {
this.el.fullCalendar('addEventSource', this.collection.toJSON());
},
handleClick: function(booking) {
...
}
});

18. Putting it all together
var bookings = new Bookings();
new BookingsView({el: $("#calendar"), collection: bookings}).render();
bookings.fetch();

21. What is Node?
JavaScript outside the browser
IO-focussed
Event-based

22. Node.js Architecture

23. var express = require('express');
var sqlite = require('sqlite');
var db = new sqlite.Database();
...
var app = express.createServer();
app.get('/bookings', function(req, res){
db.execute('SELECT * FROM bookings', function (error, rows) {
if (error) {
res.send(error.message, 500);
} else {
res.send(JSON.stringify(rows));
}
});
});
app.listen(3001);

25. What Node is Not
Easy as synchronous programming
Full-stack web framework
A stable API

27. Why use CoffeeScript?
Classes
Scope and Binding
Everything evaluates to something

28. JavaScript CoffeeScript
var Booking = class Booking extends Backbone.Model
Backbone.Model.extend();
var Bookings = class Bookings extends Backbone.Collection
Backbone.Collection.extend({ model: Booking
model: Booking, url: '/bookings'
url: '/bookings'
});
var bookings = new Bookings(); booking = new Bookings

29. JavaScript CoffeeScript
var BookingsView = class BookingsView extends Backbone.View
Backbone.View.extend({
initialize: function() { initialize: ->
_.bind(this, 'addAll', @collection.bind 'reset', @addAll
'handleClick');
this.collection.bind('reset',
this.addAll);
},
render: function() { render: =>
this.el.fullCalendar({ @el.fullCalendar
eventClick: this.handleClick eventClick: @handleClick
});
},
addAll: function() { addAll: =>
this.el.fullCalendar( @el.fullCalendar 'addEventSource',
'addEventSource', @collection.toJSON()
this.collection.toJSON());
},
handleClick: function(booking) { handleClick: (booking) =>
... ...
}
});

30. List Comprehensions
positiveNumbers = [1, 2, 3, 4];
negativeNumbers = [];
JavaScript for (var i = 0; i < positiveNumbers.length; i++) {
negativeNumbers.push(-positiveNumbers[i]);
}
CoffeeScript negativeNumbers = (-num for num in [1, 2, 3, 4])

31. Stockholm Syndrome

32. Let’s wrap this up
Users demanding responsive apps
JavaScript isn’t going anywhere
New generation of tools
Give JavaScript a chance :)

33. For more information...
github.com/bent

34. Questions?

35. Applause