JavaScript: The Machine Language of the Ambient Computing Era
-
Upload
allen-wirfs-brock -
Category
Technology
-
view
2.712 -
download
0
description
Transcript of JavaScript: The Machine Language of the Ambient Computing Era
![Page 1: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/1.jpg)
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..
![Page 2: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/2.jpg)
The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
![Page 3: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/4.jpg)
The Ambient Computing Age
![Page 5: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/5.jpg)
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
![Page 6: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/6.jpg)
Each Computing Era has had Canonical Programming Languages
•Corporate Computing Era – COBOL/Fortran
•Personal Computing Era – C/C++ family
•Ambient Computing Era – JavaScript ??
![Page 7: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/7.jpg)
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?
![Page 8: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/8.jpg)
The Web Is the Platform
Rendering
Layout
StylingNetwor
kLocal storag
e
User Input
Language Runtime
HTML CSS SVGJavaScript
Frameworks and Libraries
The WebApplicatio
nPlatform
![Page 9: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/9.jpg)
![Page 10: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/11.jpg)
But what about…
Answer: Functionality and Performance
![Page 12: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/12.jpg)
Multitouch
Accelerometer
CamerasSpeake
rMicrophone
Bluetooth
Hardware Keys Light Sensor
NFC
USB Access
Vibration Motor
Proximity Sensor
Gyro
Functionality
![Page 13: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/13.jpg)
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
![Page 14: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/15.jpg)
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;}
![Page 16: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/16.jpg)
• 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
![Page 17: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/18.jpg)
Source: Alon Zakai (@kripken)http://kripken.github.com/mloc_emscripten_talk
![Page 19: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/19.jpg)
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!
![Page 20: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/21.jpg)
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. …
![Page 22: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/22.jpg)
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)
![Page 23: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/23.jpg)
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:
![Page 24: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/24.jpg)
Arrow Functions
var pop = peeps.filter(function(person) { return person.age>age});
var pop = peeps.filter(person => person.age>age);
Becomes:
![Page 25: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/25.jpg)
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);
![Page 26: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/26.jpg)
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 () {…};…
![Page 27: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/27.jpg)
Classes in ES6//ES6 define Employee as subclass of Person
class Employee extends Person { constructor(name,id) { super(name); this.id = id; } hire () {…} fire () {…} …}
![Page 28: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/28.jpg)
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 () {…} …}
![Page 29: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/29.jpg)
The Rise and Fall of Personal Computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
![Page 30: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/30.jpg)
The Rise and Fall of Ambient Computing
2005 2008 2011 2014 2017 2020 2023 2026 2029 2032 2035 2038 2041 2044 2047 2050
![Page 31: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/31.jpg)
We’re all collectively creatinga new era of computing.
Enjoy it!
Own it!
![Page 32: JavaScript: The Machine Language of the Ambient Computing Era](https://reader035.fdocuments.us/reader035/viewer/2022062312/554f5c1fb4c905b9508b5456/html5/thumbnails/32.jpg)
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!