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!