Your SlideShare is downloading. ×
0
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: Booki...
Viewsvar BookingsView = Backbone.View.extend({      initialize: function(){          _.bind(this, addAll, handleClick);   ...
Putting it all togethervar bookings = new Bookings();new BookingsView({el: $("#calendar"), collection: bookings}).render()...
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.createServ...
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  Ba...
JavaScript                               CoffeeScriptvar BookingsView =                      class BookingsView extends Ba...
List Comprehensions               positiveNumbers = [1, 2, 3, 4];               negativeNumbers = [];JavaScript     for (v...
Stockholm Syndrome
Let’s wrap this up Users demanding responsive apps JavaScript isn’t going anywhere New generation of tools Give JavaScript...
For more information...github.com/bent
Questions?
Applause
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
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
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
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
Upcoming SlideShare
Loading in...5
×

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

1,142

Published on

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

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • 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/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,142
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript's renaissance"

    1. 1. The Return of JavaScriptThree Projects Driving JavaScripts Renaissance
    2. 2. What’s this about?
    3. 3. What’s this about? Why you should care about JavaScript
    4. 4. What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
    5. 5. What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
    6. 6. What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
    7. 7. What’s this about? Why you should care about JavaScript 3 Open-Source JavaScript Projects:
    8. 8. JavaScript Me
    9. 9. Why JavaScript?
    10. 10. Single Page Apps
    11. 11. jQuery is not enough
    12. 12. Models and Collections var Booking = Backbone.Model.extend(); var Bookings = Backbone.Collection.extend({ model: Booking, url: /bookings });
    13. 13. 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) { ... } });
    14. 14. Putting it all togethervar bookings = new Bookings();new BookingsView({el: $("#calendar"), collection: bookings}).render();bookings.fetch();
    15. 15. What is Node?JavaScript outside the browserIO-focussedEvent-based
    16. 16. Node.js Architecture
    17. 17. 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);
    18. 18. What Node is NotEasy as synchronous programmingFull-stack web frameworkA stable API
    19. 19. Why use CoffeeScript?ClassesScope and BindingEverything evaluates to something
    20. 20. 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
    21. 21. 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) => ... ... } });
    22. 22. 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])
    23. 23. Stockholm Syndrome
    24. 24. Let’s wrap this up Users demanding responsive apps JavaScript isn’t going anywhere New generation of tools Give JavaScript a chance :)
    25. 25. For more information...github.com/bent
    26. 26. Questions?
    27. 27. Applause
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×