Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Update May 2013

A quick look at where Javascript is at in May 2013.

  • Login to see the comments

Javascript Update May 2013

  1. 1. The Javascript UpdateRamesh Nairram@hiddentao.com Javascript is at - May 2013
  2. 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. 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, Harmony
  4. 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
  5. 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. 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. 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. 8. HTML5Media<audio><video>Drag and DropHistoryCanvas2D + WebGL<canvas>Web WorkersServer-sent eventsWeb StorageWeb SocketsFile SystemIndexed DBWeb RTCFullscreen + Page VisibilityBattery + SensorsUser media (camera)
  9. 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. 10. Utility libraries● JQuery (~32 KB)– Simplify cross-browser HTML scripting– CDN: jQuery, Google, MS– Alternatives: Prototype, Ext.js, Dojo, MooTools,● Lodash/Underscore (~8 KB)– Utility belt, e.g. Array.reduce()● Async (~3 KB)– Simplify asynchronous programming● Many others...
  11. 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...
  12. 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 TouchAlso built on jQuery...● Easy UI● Zino UI● Ignite UI● jQWidgets
  13. 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. 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 intoone fileAMD CommonJS● More natural way of writing a module● Load everything at the start, locally only
  15. 15. Ideally, use both!(function(){// in browser this should be the window objectvar global = this;var myClass = {...}// AMDif (typeof define !== "undefined" && define !== null && define.amd) {define(function() {return myClass;});}// CommonJSelse if (typeof module !== "undefined" && module !== null) {module.exports = myClass;}// Browserelse {global.myClass = myClass;}}());
  16. 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. 17. Back-end scripting● Mozilla Rhino● Ringo JS– Based on Rhino● Node.js– This one has the momentum!
  18. 18. Node.js● Event-driven asynchronous I/O– One thread for app, one for handling I/O● V8 Engine from Chrome● Windows, OS X, Linuxvar http = require(http);http.createServer(function (req, res) {res.writeHead(200, {Content-Type: text/plain});res.end(Hello Worldn);}).listen(1337,;console.log(Server running at; by:● Wall Street Journal● Microsoft● eBay● many more...
  19. 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?)
  20. 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 acrossall browsers and devices● What can we do today?– CoffeeScript, ClojureScript, TypeScript, Opal– Dart– many others...
  21. 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
  22. 22. Account = (customer, cart) ->@customer = customer@cart = cart$(.shopping_cart).bind click, (event) =>@customer.purchase @cartvar 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 JavascriptMore runnable examples on
  23. 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. 24. Dart examplelibrary 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><scriptsrc=""></script></body></html>
  25. 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:– Emscripten + asm.js– Only 2x slower than C++ version●Comparable to Java, C#
  26. 26. Staying up-to-date● DailyJS–● Badass JS–● Planet Node–● Node Up–