The Javascript Update - May 2013

Intro to Javascript and its current status as of May 2013

Transcript

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 World\n'); }).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/