The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance

The Return of JavaScript
Three Projects Driving JavaScript's Renaissance

What’s this about?

Why you should care about JavaScript

What’s this about?

Why you should care about JavaScript
3 Open-Source JavaScript Projects:

Models and Collections

var Booking = Backbone.Model.extend();

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

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) {
...
}
});

Putting it all together

var bookings = new Bookings();

new BookingsView({el: $("#calendar"), collection: bookings}).render();

bookings.fetch();

What is Node?

JavaScript outside the browser
IO-focussed
Event-based

What Node is Not

Easy as synchronous programming
Full-stack web framework
A stable API

Why use CoffeeScript?

Classes
Scope and Binding
Everything evaluates to something

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

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) =>
... ...
}
});

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])

Let’s wrap this up

Users demanding responsive apps
JavaScript isn’t going anywhere
New generation of tools
Give JavaScript a chance :)

For more information...

github.com/bent

The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance

More Related Content

What's hot (20)

Similar to The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance (20)

Recently uploaded (20)

The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance

Editor's Notes