javascript: the machine language of the ambient computing era
DESCRIPTION
Keynote Presentation at Front-Trends 2013 Warsaw, Poland April 5, 2013 We are well into the transition away from PC centric computing. But the new order isn't just about mobile phones and tables. It's about all of us living in a world that is augments by the ambient presence of billions of computing devices. And they're all going to be programming using JavaScript! Well, at least a lot of them will be. In this presentation I'll be discussing how JavaScript is changing the world, and how the world is changing JavaScript..TRANSCRIPT
JavaScript: The Machine Language of the Ambient
Computing EraTalk, by Allen Wirfs-BrockMozilla Research FellowProject Editor, Ecma-262 (The JavaScript Standard) @awbjs
Front-trends 2013, Warsaw 2011, April 25, 2013
We are well into the transition away from PC centric computing. But the new order isn't just about mobile phones and tables. It's about all of us living in a world that is augments by the ambient presence of billions of computing devices. And they're all going to be programming using JavaScript! Well, at least a lot of them will be. In this presentation I'll be discussing how JavaScript is changing the world, and how the world is changing JavaScript..
The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
A New Era of Computing?
1950 1960 2000 2010 2020199019801970
Soci
eta
l Im
pact
Corporate Computing
Personal Computing
Computersempower/enhanceenterprise tasks
Computersempower/enhanceindividuals’ tasks Ambient
Computing
Computersempower/enhanceour environment
The Ambient Computing Age
Every Computing Era Has a Dominant Application
Platforms
•Corporate Computing Era: IBM Mainframes
•Personal Conmputing Era: Microsoft/Intel PC
•Ambient Computing Era: The Web is the Platform?
Created by Market Demand, “Good Enough” Technical Foundation,
and Superior Business Execution
Each Computing Era has had Canonical Programming Languages
•Corporate Computing Era – COBOL/Fortran
•Personal Computing Era – C/C++ family
•Ambient Computing Era – JavaScript ??
Why JavaScript?
The economics of ubiquity. It’s already there
Widest reach
Lowest risk
Write libraries and apps once
Single knowledge and skill sethttp://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx
Because “Worse is Better”
Dick Grabrielhttp://www.dreamsongs.com/WorseIsBetter.html
Is it even possible to replace it?
The Web Is the Platform
Rendering
Layout
StylingNetwor
kLocal storag
e
User Input
Language Runtime
HTML CSS SVGJavaScript
Frameworks and Libraries
The WebApplicatio
nPlatform
Firefox OS on Raspberry Pi
http://www.philipp-wagner.com/ffos-for-rpi/manual/index.html
http://www.philipp-wagner.com/blog/2013/04/firefox-os-for-raspberry-pi-now-available/
http://www.philipp-wagner.com/ffos-for-rpi/download/rpi-b2g-image-raspberrypi-20130411092136.rootfs.rpi-sdimg.bz2
But what about…
Answer: Functionality and Performance
Multitouch
Accelerometer
CamerasSpeake
rMicrophone
Bluetooth
Hardware Keys Light Sensor
NFC
USB Access
Vibration Motor
Proximity Sensor
Gyro
Functionality
Communications APIs
BluetoothMobile Connection
Network ConnectionNetwork Stats
TCO SocketTelephonyWebSMSWiFi Info
Push NotificationNFC
WebRTC
Hardware Access APIsAmbient Light Sensor
Battery StatusCamera
Pointer LockProximity
Screen OrientationVibrationWebFM
GeoLocationUSB
AlarmApp ManagementIdle Permissions
Time/Clock
WebPaymentDevice Storage
ContactsCalandar
App Services APIs
Performance: Parallel JSData parallelism for JavaScript
•Goal: exploit multiple-cores, vector instructions, GPUs
•Design based upon Intel’s “Rivertrail” prototype
•On standardization track
•Experimental implementation now in Firefox Nightly
http://wiki.ecmascript.org/doku.php?id=strawman:data_parallelism
Parallel JS Examplefunction averageSavingsAterAge(peopleData, age) { age = +age; var peeps = new ParallelArray(peopleData);
var pop = peeps.filter(function(person) { return person.age>age});
var totalSavings = pop.reduce(function(subtotal,person) { return subtotal+person.savings});
return totalSavings / pop.size;}
• Subset of JavaScript that approximates a classic Von Neumann computer
• asm.js code executes identically on any Javascript engine
• But a JS engine may recognize asm.js code and optimize for it.
• asmjs.org
• https://wiki.mozilla.org/Javascript:SpiderMonkey:OdinMonkey
asm.js – C level Performance
C++ to JavaScript
C++ source code
Clang: C++ Compiler Front-end
LLVMBitcode
LLVMOptimizer
JavaScript (asm.js)
source code
JavaScript Engine (asm.js aware)
JavaScript
(asm.js) source code
Development TimeApp Run Time
Emscrpten
BetterLLVM
Bitcode
Source: Alon Zakai (@kripken)http://kripken.github.com/mloc_emscripten_talk
Why not a web bytecode engine?
asm.js code is just YAIR(Yet Another Intermediate Representation)
function strlen(ptr) { ptr = ptr|0; var curr = 0; curr = ptr; while (MEM8[curr]|0 != 0) { curr = (curr + 1)|0; } return (curr - ptr)|0; }
func strlen param ptr, int32 local curr, int32, ptr label loop index8 indx, heap, curr read next, indx bne next, exit add curr, curr, 1 goto loop label exit sub tmp, curr, ptr return sub
Worse is better!
What is ECMAScript?• ECMAScript is the name of the
international standard that defines JavaScript
• Developed by Technical Committee 39 (TC-39) of Ecma International
• Issued as a Ecma-262 and ISO/IEC 16262
• Not part of W3C Google Mozilla Microsoft WebkitV8 SpiderMonkeyChakra JSCore
JavaScript Implementations
ECMAScript 6 (and beyond)Goals
http://wiki.ecmascript.org/doku.php?id=harmony:harmony
1. Be a better language for:A. complex applications;B. libraries (including the DOM) shared by
those applications;C. code generators targeting the new
edition.2. …
What Kind of Language Is JavaScript?• Functional?
•Object-oriented?
•Class-based?
•Prototype-based?
•Permissive?
•Secure?
Photo by crazybarefootpoet @ flickr (CC BY-NC-SA 2.0)
ECMAScript 6Functional Programming
• Arrow functions
• Comprehensions
• Generators
• Tail calls
Object-oriented Programming
• Class declarations
• Concise methods syntax
• Super calls
• Subclassable built-ins
ES6
Feature complete draft December 2013Approved Standard December 2014
ES6 Schedule:
Arrow Functions
var pop = peeps.filter(function(person) { return person.age>age});
var pop = peeps.filter(person => person.age>age);
Becomes:
var self = this;var pop = peeps.filter(function(person) { return person.age>self.age});
Arrow Functions
Becomes:
var pop = peeps.filter(person => person.age>this.age);
Classes Today//define Employee as a subclass of Person
function Employee(name,id) { Person.call(name); this.id = id;}Employee.prototype=Object.create(Person.prototype);Object.defineProperty(Employee.prototype, “constructor”, {value:Employee,enumerable:false,configurable: true});Employee.__proto__ = Person;Employee.prototype.hire = function() {…};Employee.prototype.fire = function () {…};…
Classes in ES6//ES6 define Employee as subclass of Person
class Employee extends Person { constructor(name,id) { super(name); this.id = id; } hire () {…} fire () {…} …}
Classes Today vs ES6
//define Employee as subclass of Person
function Employee(name,id) { Person.call(name); this.id = id;}Employee.prototype=Object.create(Person.prototype);Object.defineProperty(Employee.prototype, “constructor”, {value:Employee,enumerable:false,configurable: true});Employee.__proto__ = Person;Employee.prototype.hire = function() {…};Employee.prototype.fire = function () {…};…
//ES6 define Employee as subclass of Person
class Employee extends Person { constructor(name,id) { super(name); this.id = id; } hire () {…} fire () {…} …}
The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
The Rise and Fall of Ambient Computing
2005 2008 2011 2014 2017 2020 2023 2026 2029 2032 2035 2038 2041 2044 2047 2050
We’re all collectively creatinga new era of computing.
Enjoy it!
Own it!
Firefox OS App WorkshopWarsawSaturday, June 1, 2013
Apply to attend
http://bit.ly/FxOSAppWorkshop-apply More info
https://hacks.mozilla.org/2013/03/firefox-os-app-workshops/
• For skilled JavaScript/HTML5 Developers• Turn your site or webapp into a Firefox OS App• Take home a phone!