The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,247 views

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 ...

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

Statistics

Views

Total Views
1,247
Slideshare-icon Views on SlideShare
1,231
Embed Views
16

Actions

Likes
2
Downloads
17
Comments
1

2 Embeds 16

http://paper.li 13
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Video: http://www.youtube.com/watch?v=SiCD3Nbf810

    Fuller explanation of the first example http://blog.shinetech.com/2011/08/05/building-a-shared-calendar-with-backbone-js-and-fullcalendar-a-step-by-step-tutorial/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • My background\n
  • \n
  • 1 billion PCs world-wide\nGoogle/Apple/Twitter/Facebook know this\nSince 2001, has oscillated between 10th and 8th position (ruby 8th and 27th, python 4th and 13th, perl 5th and 10th, PHP 4th and 10th, VB 4th and 7th)\n
  • \n
  • - Don’t confuse the DOM with JavaScript\n- It’s actually a pretty nifty functional language\n\n
  • jQuery is not enough\n\n\n
  • MVC Scales\nMVC is well known\nKnockout.js/JavaScriptMVC/Sproutcore/Cappucino\nCreated by Jeremy Ashkenas\nUI Agnostic\nLightweight\nGot momentum\n
  • \n
  • Models and Collections:\n- Back-end synchronization\n- Event generation\n- Client-side validation\n
  • Views:\n- Intermediate DOM and models\n- Subscribe to events from both\n- Convention-based\n\n
  • \n
  • - Permalinks\n- Back-buttons\n- Gracefull fallback\n
  • \n
  • Some people say JavaScript on the server, but that’s not necessarily the case\nJavaScript on the server is not new - there was LiveWire\nWhen you add IO, JavaScript becomes a fully-featured scripting language\n10K Connection Problem\n\n
  • IO: Network/Filesystem\nProcess Management\nModule system\nExtensibility\nCrypto\nHttp\n\nV8: \n1. Netscape invented JavaScript\n2. Microsoft let JavaScript stagnate\n3. Rise of Firefox (SpiderMonkey) and now Chrome (V8) has reinvigorated JS engine performance\n
  • npm:\n4300\nsupport for:\nunderscore\nmysql\ncouchdb\n\nexpress:\n- routing & request processing\n- view rendering\n- session support\n- middleware support via connect\n
  • \n
  • \n
  • Compiled to JavaScript, \nOptionally interpreted with Node\nInvented by Jeremy Ashkenas\nExcellent Rails support\nCompiler is written in CoffeeScript\n
  • \n
  • Significant Whitespace\nClasses - including easy superclass calls, etc\nAbbreviated hashes\nNo confusion about variable scoping var events = new Events();\n
  • Function notation\nAbbreviate ‘this’\nContext-setting\n20% less code!\n
  • Everything is an expression\nCan be added with libraries\nMap-like functionality built into the language\nThe value of a loop is an array of a loops iteration values\n
  • \n
  • \n
  • \n
  • \n
  • \n

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

  • The Return of JavaScriptThree Projects Driving JavaScripts Renaissance
  • What’s this about?
  • 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:
  • What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
  • What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
  • What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
  • JavaScript Me
  • Why JavaScript?
  • Single Page Apps
  • jQuery is not enough
  • Models and Collections var Booking = Backbone.Model.extend(); var Bookings = Backbone.Collection.extend({ model: Booking, url: /bookings });
  • Viewsvar 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 togethervar bookings = new Bookings();new BookingsView({el: $("#calendar"), collection: bookings}).render();bookings.fetch();
  • What is Node?JavaScript outside the browserIO-focussedEvent-based
  • Node.js Architecture
  • 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);
  • What Node is NotEasy as synchronous programmingFull-stack web frameworkA stable API
  • Why use CoffeeScript?ClassesScope and BindingEverything evaluates to something
  • JavaScript CoffeeScriptvar 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 CoffeeScriptvar 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])
  • Stockholm Syndrome
  • 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
  • Questions?
  • Applause