Embed Size (px)
DESCRIPTION
A look back at how JavaScript has evolved over the past 18 years - how it broke out of the browser and can now be found in the most unexpected places. Presented at Worthing Digital, 7th Nov 2013.
Citation preview
FASTSLIMCORRECT
/ John Dalziel / @crashposition / Worthing Digital / 7th November 02013
/ The Story Of HowTHE “GLUE OF THE INTERNET” BECAME THE WORLD’S MOST POPULAR PROGRAMMING LANGUAGE
image: http://imgur.com/7pOwI
[SPOILER] JAVASCRIPTis the Glue Of The Internet
/ FAST SLIM CORRECT
THE RACE FOR SPEEDTHE RACE FOR SPEED
http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/http://creativejs.com/2013/06/the-race-for-speed-part-2-how-javascript-compilers-work/http://creativejs.com/2013/06/the-race-for-speed-part-3-javascript-compiler-strategies/http://creativejs.com/2013/06/the-race-for-speed-part-4-the-future-for-javascript/
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
What is JavaScript?some History bitssome Science bitssome Examples
RECIPE: + + + HTML
/ FAST SLIM CORRECTJAVASCRIPT RECIPES
A WEB BROWSER
A JAVASCRIPT ENGINE
JAVASCRIPT CODE
HTML CODE
WHAT IS JAVASCRIPT?a native programming language for the web
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
CSS
JavaScript
ANATOMY OF A MODERN WEB
PAGE
JAVASCRIPT IS USEFUL
/ FAST SLIM CORRECT
WEB LANGUAGESKEYBOARD, MOUSE & TOUCH
WEB SERVERS & APIsMONITOR & SPEAKERS
JAVASCRIPT IS EVERYWHERE
/ FAST SLIM CORRECT
•JavaScript is built into the BROWSER
•on 6 million TABLETS,
•on over 1 billion SMARTPHONES,
•on over 2 billion COMPUTERS,
•and in plenty of other places to...
JAVASCRIPT IS POPULAR
/ FAST SLIM CORRECT
http://redmonk.com/sogrady/2013/02/28/language-rankings-1-13/
“JavaScript is 18...now it’s not my responsibility;
it can go out, vote, join the Navy,get drunk and gamble in most states.”
BRENDAN EICHMOZILLA, 2013
/ FAST SLIM CORRECT
HELLO WORLDthe History Bit: Part 1
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
1995
/ FAST SLIM CORRECT
THE WEB in 19951995
/ FAST SLIM CORRECT
THE WEB in 19951995
/ FAST SLIM CORRECT
THE WEB in 19951995
/ FAST SLIM CORRECT
THE WEB in 19951995
/ FAST SLIM CORRECT
HTML
ANATOMY of a WEB PAGE
1995
/ FAST SLIM CORRECTINTERNET EXPLORER vs
NETSCAPE
1995
/ FAST SLIM CORRECTNETSCAPE’S VISION FOR JAVASCRIPT
1995
“We aimed to provide a “glue language” for the Web designers and part time programmers who
were building Web content from components such as images, plugins,
and Java applets.”
“We saw Java as the “component language” used by higher-priced
programmers.”
Joins NETSCAPE in April 1995.
/ FAST SLIM CORRECT
BRENDAN EICH1995
DESIGNS MOCHALIVESCRIPTJAVASCRIPT...IN 10
DAYS
/ FAST SLIM CORRECT“IT COULD HAVE BEEN WORSE”
eval()
global objects
with(){}
closures
prototypes
first class functions
array = []
obj = {}
JAVA
SCHEME
SELF}}
1995
BECOMING USEFULthe History Bit: Part 2
/ FAST SLIM CORRECT
“It may be slow. But it’s hard to use.”
ANDREW S TANENBAUMregarding the IBM PC
/ FAST SLIM CORRECT
http://www.gdargaud.net/Humor/QuotesHardwareSoftware.html
RECIPE: + + + HTML
/ FAST SLIM CORRECT
DHTMLFORM VALIDATION
1995 - 2000
TICKERS & POP UPS
DEMO
ROLLOVERS
DEMO
DYNAMIC HTML
/ FAST SLIM CORRECT
XHR2000
RECIPE: + + + HTML + XHR
2005
GOOGLE MAPS
2004
GOOGLE MAIL
2000
OUTLOOK WEB
XMLHttpRequest
/ FAST SLIM CORRECT
AJAX2005
RECIPE: + + + HTML + XHR + XML
JESSE JAMES GARRETT
ASYNCHRONOUS JAVASCRIPT and XML
THINGS inside THINGSthe Science Bit: Part 1
/ FAST SLIM CORRECT
The difference between: a Web Browser a JavaScript Engine a JavaScript Compiler
/ FAST SLIM CORRECT
a WEB BROWSER
WEB BROWSER
/ FAST SLIM CORRECTinside a WEB BROWSER
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
JS ENGINENETWORKING
DA
TA
DISPLAY
WEB BROWSER
/ FAST SLIM CORRECTinside a WEB BROWSER
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
DA
TA
WEB BROWSER
JS ENGINENETWORKING DISPLAY
/ FAST SLIM CORRECTa JAVASCRIPT ENGINE
WEB BROWSER
JAVASCRIPT ENGINE
/ FAST SLIM CORRECTinside a JAVASCRIPT
ENGINE
LEXER PARSER
TRANSLATOR
INTERPRETERNATIVE
CODE
TOKENSAST
BYTE CODE
WEB BROWSER
JAVASCRIPT ENGINE
/ FAST SLIM CORRECTa JAVASCRIPT COMPILER
COMPILER COMPILER
COMPILERCOMPILERNATIVE CODE
TOKENSAST
BYTE CODE
WEB BROWSER
JAVASCRIPT ENGINE
/ FAST SLIM CORRECTBROWSER / ENGINE /
COMPILER
COMPILER COMPILER
COMPILERCOMPILER
WEB BROWSER
JAVASCRIPT ENGINE
FAST, SLIM, CORRECTthe History Bit: Part 3
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTFAST, SLIM, CORRECT
Fast
Slim
Correct
Faster code can accomplish more work in less time.Faster code can tackle more complex tasks.
Slim code downloads faster.Some slim code can compile faster.
Correct code will do what you expected.
“Fast, Slim, Correct. Pick any two, so long as one is correct.”
BRENDAN EICH, MOZILLAregarding JavaScript compilers
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTJAVASCRIPT ENGINE FAMILY
TREE
1998
Fast Slim Correct
JAVASCRIPT in 1998
/ FAST SLIM CORRECT
WEB STANDARDS
Fast Slim Correct
JAVASCRIPT after 1998
1998+
/ FAST SLIM CORRECTLIBRARIES and MINIFIERS
2006+
Fast Slim Correct
JAVASCRIPT in 2006
var dateRE = /^createdOnid/;var dates=[], els=document.getElementsByTagName('*');for (var i=els.length;i--;) {if (dateRE.test(els[i].id]) {
dates.push(els[i])}};
JAVASCRIPT
var dates = $('*[id^="createdOnid"]');
JQUERY
/ FAST SLIM CORRECTJAVASCRIPT ENGINE FAMILY
TREE
2006
Fast Slim Correct
JAVASCRIPT in 2006
MAKING JS FASTthe Science Bit: Part 2
/ FAST SLIM CORRECT
How to make JavaScript Fast
/ FAST SLIM CORRECTinside a JAVASCRIPT
ENGINE
LEXER PARSER
TRANSLATOR
INTERPRETERNATIVE
CODE
TOKENSAST
BYTE CODE
WEB BROWSER
JAVASCRIPT ENGINE
THE RACE FOR SPEEDTHE RACE FOR SPEED
http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/http://creativejs.com/2013/06/the-race-for-speed-part-2-how-javascript-compilers-work/http://creativejs.com/2013/06/the-race-for-speed-part-3-javascript-compiler-strategies/http://creativejs.com/2013/06/the-race-for-speed-part-4-the-future-for-javascript/
/ FAST SLIM CORRECT
magic happens...
magic happens...JAVASCRIPT
FAST NATIVE CODE
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTJAVASCRIPT ENGINE FAMILY
TREE
2008+
Fast Slim Correct
JAVASCRIPT after 2008
“any application that can be written in JavaScript, will eventually be written in JavaScript”
JEFF ATWOODSTACKOVERFLOW, 2009
/ FAST SLIM CORRECT
JAVASCRIPT APPLICATIONSGames and Applications
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTJAVASCRIPT APPLICATIONSGAMES
RECIPE: + + + + WebGL
/ FAST SLIM CORRECTJAVASCRIPT APPLICATIONSINTERACTIVE DATA VISUALISATION
RECIPE: + + +
/ FAST SLIM CORRECTJAVASCRIPT APPLICATIONSCOMMUNICATION
RECIPE: + + + + WebRTC
GOOGLE HANGOUTS
FACEBOOK CHAT
JAVASCRIPT AS EVERYTHINGCompilers and Emulators
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
http://copy.sh/v24/http://bellard.org/jslinux/
http://archive.vg/blog/12-feature/114-a-big-list-of-browser-based-emulators-and-ports-of-classic-games
JAVASCRIPT as EMULATORPC, LINUX, APPLE II, C64, NES, ZX
SPECTRUM, ATARI ST, AMIGA...
http://estyjs.azurewebsites.net/ http://jsspeccy.zxdemo.org/
RECIPE: + + +
/ FAST SLIM CORRECT
http://www.teamten.com/lawrence/projects/turbo_pascal_compiler/demo/
https://github.com/mozilla/narcissus
JAVASCRIPT as COMPILERPASCAL, LUA, SMALLTALK, JAVASCRIPT
RECIPE: + + +
/ FAST SLIM CORRECT2013
RECIPE: + + + +
http://vimeo.com/77289033
JAVASCRIPT as MONEYBITCOIN WALLET
EVERYTHING AS JAVASCRIPTCross-Compilers and LLVM
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTCOMPILE to JAVASCRIPTCOFFEESCRIPT, TYPESCRIPT, DART to
JAVASCRIPT
/ FAST SLIM CORRECTCOMPILE to JAVASCRIPTLLVM to JAVASCRIPT
/ FAST SLIM CORRECT
C CLANG
COMPILE to JAVASCRIPTC to LLVM to JAVASCRIPT
“JavaScript is assembly language for the web.”
SCOTT HANSELMANMICROSOFT, 2011
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
asm.js
DEMO
CLANG
COMPILE to JAVASCRIPTUNREAL ENGINE 3 to JAVASCRIPT
JAVASCRIPT AS DATAJSON
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
JSON2006
RECIPE: +
DOUGLAS CROCKFORD
<Person> <name>Douglas Crockford</name> <discovers>JSON</discovers> <employer>Yahoo</employer></Person>
XML{“name”:”Douglas Crockford”, ”discovers”:”JSON”, employer:”Yahoo”}
JSON
JAVASCRIPT OBJECT NOTATION
/ FAST SLIM CORRECT
JSON2006
RECIPE: +
NOSQL DATABASES
/ FAST SLIM CORRECT
JSON2006
RECIPE: +
http://www.wiredprairie.us/blog/index.php/archives/1754
NEST THERMOSTAT
/ FAST SLIM CORRECT
JSON2006
RECIPE: +
http://www4.mercedes-benz.com/manual-cars/ba/foss/content/en/assets/FOSS_licences.pdf
MERCEDES S CLASS
JAVASCRIPT ON A SERVERNodeJS
/ FAST SLIM CORRECT2009
/ FAST SLIM CORRECT
JAVASCRIPT ENGINE
NODEJSJAVASCRIPT ENGINE ON THE SERVER
2009
/ FAST SLIM CORRECT
NODEJSDESKTOP AUTOMATION
RECIPE: + +
PHOTOSHOP GENERATORGRUNT
2009
JAVASCRIPT ON HARDWAREMicroPCs and MicroControllers
/ FAST SLIM CORRECT
/ FAST SLIM CORRECTCOMPUTER ON A BOARDRASPBERRY PI
/ FAST SLIM CORRECT
http://theoreticalideations.com/2013/09/03/its-alive-my-node-jsrasperry-pi-powered-aquarium-is-up-and-running/
COMPUTER ON A BOARDRASPBERRY PI AQUARIUM
RECIPE: + + + + Aquarium
/ FAST SLIM CORRECTMICROCONTROLLERSARDUINO, BEAGLEBOARD, TESSEL, LEGO MINDSTORMS-NXT
https://nodejsmodules.org/tags/legohttp://tessel.io/http://beagleboard.org/support/bonescript/https://github.com/rwaldron/johnny-five
RECIPE: + +
/ FAST SLIM CORRECT
http://glench.com/make/nodejs-robot/
RECIPE: + + + Arduino + Robot
ROBOTSNODEJS WiFi-EXTENDING ROBOT
/ FAST SLIM CORRECT
https://github.com/felixge/node-ar-drone
ROBOTSPARROT AR DRONE 2.0
RECIPE: + + + AR Drone
WHAT HAVE WE LEARNED?Please Make It Stop Now
/ FAST SLIM CORRECT
/ FAST SLIM CORRECT
C, JAVALUA, PASCAL
THANK YOUFor Your Time
/ FAST SLIM CORRECT
FASTSLIMCORRECT
/ John Dalziel / @crashposition / Worthing Digital / 7th November 02013
/ The Story Of HowTHE “GLUE OF THE INTERNET” BECAME THE WORLD’S MOST POPULAR PROGRAMMING LANGUAGE
image: http://imgur.com/7pOwI
