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..

1. JavaScript: The Machine Language of
the Ambient Computing Era
Talk, by Allen Wirfs-Brock
Mozilla Research Fellow
Project 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..

2. The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

3. A New Era of Computing?
1950 1960 2000 2010 2020199019801970
SocietalImpact
Corporate Computing
Personal Computing
Computers
empower/enhance
enterprise tasks
Computers
empower/enhance
individuals’ tasks Ambient
Computing
Computers
empower/enhance

5. 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

6. Each Computing Era has had Canonical
Programming Languages
• Corporate Computing Era – COBOL/Fortran
• Personal Computing Era – C/C++ family
• Ambient Computing Era – JavaScript ??

7. Why JavaScript?
The economics of ubiquity.
 It’s already there
 Widest reach
 Lowest risk
 Write libraries and apps once
 Single knowledge and skill set http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx
Because “Worse is Better”Dick Grabriel
http://www.dreamsongs.com/WorseIsBetter.html
Is it even possible to replace it?

8. The Web Is the Platform
Rendering
Layout
Styling
Network Local
storage
User
Input
Language Runtime
HTML CSS SVGJavaScript
Frameworks and Libraries
The Web
Application
Platform

10. 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

11. But what about…
Answer: Functionality and Performance

12. Multitouch
Accelerometer
Cameras
Speaker
Microphone
Bluetooth
Hardware Keys Light Sensor
NFC
USB Access
Vibration Motor
Proximity Sensor
Gyro
Functionality

13. Communication
s APIs
Bluetooth
Mobile Connection
Network Connection
Network Stats
TCO Socket
Telephony
WebSMS
WiFi Info
Push Notification
NFC
WebRTC
Hardware
Access APIs
Ambient Light Sensor
Battery Status
Camera
Pointer Lock
Proximity
Screen Orientation
Vibration
WebFM
GeoLocation
USB
Alarm
App Management
Idle Permissions
Time/Clock
WebPayment
Device Storage
Contacts
Calandar
App Services APIs

14. Performance: Parallel JS
Data 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

15. Parallel JS Example
function 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;
}

16. • 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:Spide
rMonkey:OdinMonkey
asm.js – C level Performance

17. C++ to JavaScript
C++
source
code
Clang: C++
Compiler
Front-end
LLVM
Bitcode
LLVM
Optimizer
JavaScript
(asm.js)
source
code
JavaScript
Engine (asm.js
aware)
JavaScript
(asm.js)
source
code
Development Time
App Run Time
Emscrpten
Better
LLVM
Bitcode

18. Source: Alon Zakai (@kripken)
http://kripken.github.com/mloc_emscripten_talk

19. 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

20. 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 Webkit
V8 SpiderMonkey Chakra JSCore
JavaScript Implementations

21. 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. …

22. 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)

23. ECMAScript 6
Functional 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 2013
Approved Standard December 2014
ES6 Schedule:

24. Arrow Functions
var pop = peeps.filter(function(person) {
return person.age>age});
var pop = peeps.filter(person => person.age>age);
Becomes:

25. 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);

26. 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 () {…};
…

27. Classes in ES6
//ES6 define Employee as subclass of Person
class Employee extends Person {
constructor(name,id) {
super(name);
this.id = id;
}
hire () {…}
fire () {…}
…
}

28. 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 () {…}
…
}

29. The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

30. The Rise and Fall of Ambient Computing
2005 2008 2011 2014 2017 2020 2023 2026 2029 2032 2035 2038 2041 2044 2047 2050

31. We’re all collectively creating
a new era of computing.
Enjoy it!
Own it!

32. Warsaw
Saturday, 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!