1. The Javascript Update
Ramesh Nair
ram@hiddentao.com
http://twitter.com/hiddentao
Where Javascript is at - May 2013

2. What this talk will cover
● Javascript history
● Language overview
● Browser goodies
● Front-end ecosystem
● Back-end: Node.js
● Variations and alternatives, e.g. CoffeeScript
● The cutting edge – future stuff
● How to stay up-to-date

3. Evolution
● Created in 1995 at Netscape
● Mocha → LiveScript → JavaScript
● Accepted by ECMA by 1997
– ECMAScript is official standard name
– Javascript = JScript (Internet Explorer)
● v3 (JS 1.5) set the standard
● ECMA TC39 working on ES.next, Harmony

4. Language overview
● Built-in types: Boolean, Number, String, null, undefined
– Strings are UTF-16
● Dynamically typed
● Objects work as hash tables
– Arrays are also Objects
● Functions are Objects
– Anonymous/lambda functions
– Inner functions, i.e. closures!
● Global object: this, window (browsers)
– All built-in functions can be overridden
● Classes are defined as function
– Members and methods
– Inheritance via prototype
http://www.yuiblog.com/crockford/

5. Browser programming model
● Single thread per window
– No rendering while executing code
– Can have “Web workers” (more on this later)
● Event queue
– Asynchronous event handling
– Most DOM event callbacks
● Useful: setTimeout/setInterval
– (For animations use requestAnimationFrame)

6. Browser APIs
● window, document, location, navigator
● AJAX
– Google Maps put this on the map (no pun intended!)
● HTML5
– tons of stuff
● Non-standard / extensions
– Mozilla: OpenWebApps, Audio
– Others?

7. AJAX
● XMLHttpRequest
● JSON, XML, plain text, etc.
● Same-origin policy
– JSONP work-around
● 2-6 simultaneous connections to a host
● Comet
– Server “pushes” data to browser
– e.g. Long-polling

8. HTML5
Media
<audio>
<video>
Drag and Drop
History
Canvas2D + WebGL
<canvas>
Web Workers
Server-sent events
Web Storage
Web Sockets
File System
Indexed DB
Web RTC
Fullscreen + Page Visibility
Battery + Sensors
User media (camera)

9. Really exciting
● HTML5 Audio + Video
● Canvas2D + WebGL
– Hardware-accelerated 3D games
● Web RTC
– Peer-to-peer bi-directional communication
● Device sensors + user media
– Firefox OS exposes even more
● Web Workers
– Better than setTimeout/setInterval

10. Utility libraries
● JQuery (~32 KB)
– Simplify cross-browser HTML scripting
– CDN: jQuery, Google, MS
– Alternatives: Prototype, Ext.js, Dojo, MooTools, Script.aculo.us
● Lodash/Underscore (~8 KB)
– Utility belt, e.g. Array.reduce()
● Async (~3 KB)
– Simplify asynchronous programming
● Many others...

11. MVC
● Object-Oriented design pattern
– Ruby-on-Rails, Django, CodeIgniter, etc.
● Essential for single-page web apps
● Backbone (~6 KB)
– Uses events extensively
– Models connect to HTML5 storage or server
– Controller/View objects handle DOM events
– Router handles URLs and History changes
● Tons of other frameworks
– Angular, Ember, Knockout, Dojo, YUI, many others...
http://todomvc.com/

12. UI frameworks
● JQuery UI
– JQuery Mobile
● Kendo UI (non-free)
– Uses jQuery
– Kendo Mobile
● Wijmo (non-free)
– Built on jQuery + jQuery UI
● Sencha Ext JS (non-free)
– Sencha Touch
Also built on jQuery...
● Easy UI
● Zino UI
● Ignite UI
● jQWidgets

13. Modules and dependencies
● Modules are good
– Avoid global namespace pollution
– Explicitly specify code dependencies
● No concept of modules in JS
– Coming in future versions
● Current work-arounds:
– AMD
– CommonJS

14. define(['jquery'], function( $ ){
return {
hideIt: function() {
$('#myDiv').hide();
}
};
});
var $ = require('jquery');
module.exports = {
hideIt: function() {
$('#myDiv').hide();
}
}
● Load-on-demand, with remote loading
● RequireJS (~6 KB)
● Optimizer which concatenates all into
one file
AMD CommonJS
● More natural way of writing a module
● Load everything at the start, locally only

15. Ideally, use both!
(function(){
// in browser this should be the 'window' object
var global = this;
var myClass = {
...
}
// AMD
if (typeof define !== "undefined" && define !== null && define.amd) {
define(function() {
return myClass;
});
}
// CommonJS
else if (typeof module !== "undefined" && module !== null) {
module.exports = myClass;
}
// Browser
else {
global.myClass = myClass;
}
}());

16. Building your project...
● SCRIPTs loaded one at a time, unlike CSS
● How to speed it up?
– Minify all scripts
● Uglify, Google Closure, YUI Compressor
– Concatenate all scripts into one file
● RequireJS (AMD), Hem (CommonJS)
● Grunt – a make for Javascript
● Bower – like apt-get for your Javascript packages
● Yeoman = Yo + Grunt + Bower

17. Back-end scripting
● Mozilla Rhino
● Ringo JS
– Based on Rhino
● Node.js
– This one has the momentum!

18. Node.js
● Event-driven asynchronous I/O
– One thread for app, one for handling I/O
● V8 Engine from Chrome
● Windows, OS X, Linux
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
http://nodejs.org/
Used by:
● Wall Street Journal
● Microsoft
● eBay
● many more...

19. Node.js community
● Node Package Manager (like apt-get)
– ~30,000 packages
– Almost all on Github, so easy to contribute
● Notable packages:
– Express JS – MVC framework
– Socket.IO – Bi-directional client-server comms.
– Mongoose – MongoDB client library
– Jade – template language
– Grunt – build tool (remember?)
http://npmjs.org/

20. Variations + alternatives
● Javascript has many flaws and annoyances
● Next version will fix a lot of things
– But will still take time to become available across
all browsers and devices
● What can we do today?
– CoffeeScript, ClojureScript, TypeScript, Opal
– Dart
– many others...
http://altjs.org/

21. CoffeeScript
● Released in 2009
● Looks like Ruby and Python
● Great features and shortcuts
– Classical inheritance
– Loops and comprehensions
● Translates 1-on-1 to Javascript
● Hard to debug
– Unless your IDE can use its source maps
● Very popular NPM module
http://coffeescript.org/

22. Account = (customer, cart) ->
@customer = customer
@cart = cart
$('.shopping_cart').bind 'click', (event) =>
@customer.purchase @cart
var Account;
Account = function(customer, cart) {
var _this = this;
this.customer = customer;
this.cart = cart;
return $('.shopping_cart').bind('click',
function(event) {
return
_this.customer.purchase(_this.cart);
});
};
CoffeeScript Javascript
More runnable examples on http://coffeescript.org/

23. Dart
● Google released it in 2011
– They hope this will replace Javascript in future
● Class-based OOP language
● Full-stack
– Virtual Machine for running on server
– Compiles to Javascript for browser
● Chromium comes bundled with Dart VM
● IDE and SDK available
● Still not that popular
– Other browser vendors not keen

24. Dart example
library hi;
import 'dart:html';
main() {
query('#status').text = 'Hi, Dart';
}
<html>
<head>
<title>Hi Dart</title>
</head>
<body>
<h2 id="status">Waiting for Dart to start</h2>
<script type="application/dart" src="hi.dart"></script>
<script
src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/pkg/browser/lib/dart.js
"></script>
</body>
</html>

25. The cutting edge
●
ES.Next (ECMAScript 6?)
– Modules, Classes
– Object.observe(), Proxies
– Maps, Sets
– Usable today with Harmonzir
●
Emscripten (Mozilla)
– Compile LLVM byte-code to Javascript
●
C/C++, anyone?
●
asm.js (Mozilla)
– Highly-optimizable ow-level subset
– Opt-in: use asm
●
Unreal Engine demo: http://www.unrealengine.com/html5/
– Emscripten + asm.js
– Only 2x slower than C++ version
●
Comparable to Java, C#

26. Staying up-to-date
● DailyJS
– http://dailyjs.com/
● Badass JS
– http://badassjs.com/
● Planet Node
– http://planetnodejs.com/
● Node Up
– http://nodeup.com/