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.

1. / John Dalziel / @crashposition / Worthing Digital / 7th November 02013
FAST
SLIM
CORRECT
/ The Story Of How
THE “GLUE OF THE INTERNET”
BECAME THE WORLD’S MOST
POPULAR PROGRAMMING
LANGUAGE
image: http://imgur.com/7pOwI

2. / FAST SLIM CORRECT
[SPOILER]
JAVASCRIPT
is the Glue Of The Internet

3. / FAST SLIM CORRECT
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/
THE RACE FOR SPEED

4. / FAST SLIM CORRECT
What is JavaScript?
some History bits
some Science bits
some Examples

5. / FAST SLIM CORRECT
JAVASCRIPT RECIPES
A WEB BROWSER
A JAVASCRIPT ENGINE
JAVASCRIPT CODE
HTML CODE
RECIPE:
+
+
+ HTML

6. / FAST SLIM CORRECT
WHAT IS JAVASCRIPT?
a native programming language for the web

7. / FAST SLIM CORRECT
ANATOMY OF A MODERN WEB PAGE
CSS
JavaScript

8. / FAST SLIM CORRECT
ANATOMY OF A MODERN WEB PAGE
DEMO

9. / FAST SLIM CORRECT
JAVASCRIPT IS USEFUL
KEYBOARD,
MOUSE & TOUCH
MONITOR & SPEAKERS
WEB LANGUAGE
WEB SERVERS & APIs

10. / FAST SLIM CORRECT
JAVASCRIPT IS EVERYWHERE
• 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...

11. / FAST SLIM CORRECT
JAVASCRIPT IS POPULAR
http://redmonk.com/sogrady/2013/02/28/language-rankings-1-13/

12. / FAST SLIM CORRECT
“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 EICH
MOZILLA, 2013

13. / FAST SLIM CORRECT
HELLO WORLD
the History Bit: Part 1

14. / FAST SLIM CORRECT
1995

15. 1995
/ FAST SLIM CORRECT
THE WEB in 1995

16. 1995
/ FAST SLIM CORRECT
THE WEB in 1995

17. 1995
/ FAST SLIM CORRECT
THE WEB in 1995

18. 1995
/ FAST SLIM CORRECT
THE WEB in 1995

19. 1995
/ FAST SLIM CORRECT
ANATOMY of a WEB PAGE
HTML

20. 1995
/ FAST SLIM CORRECT
INTERNET EXPLORER vs NETSCAPE

21. 1995
/ FAST SLIM CORRECT
NETSCAPE’S VISION FOR JAVASCRIPT
“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.”

22. 1995
/ FAST SLIM CORRECT
BRENDAN EICH DESIGNS JMOCHARIPT
AIVASC RIP
L VE
T
...IN 10 DAYS
Joins NETSCAPE in April 1995.

23. 1995
/ FAST SLIM CORRECT
“IT COULD HAVE BEEN WORSE”
SCHEME
SELF
JAVA
}
closures
prototypes
first class functions
array = []
obj = {}
eval()
global objects
with(){}

24. / FAST SLIM CORRECT
BECOMING USEFUL
the History Bit: Part 2

25. / FAST SLIM CORRECT
“It may be slow.
But it’s hard to use.”
ANDREW S TANENBAUM
regarding the IBM PC
http://www.gdargaud.net/Humor/QuotesHardwareSoftware.html

26. 1995 - 2000
/ FAST SLIM CORRECT
DHTML
DYNAMIC HTML
FORM VALIDATION
+
+
+ HTML
TICKERS & POP UPS
DEMO
RECIPE:
ROLLOVERS
DEMO

27. 2000
/ FAST SLIM CORRECT
XHR
XMLHttpRequest
2000
2004
2005
OUTLOOK WEB
GOOGLE MAIL
GOOGLE MAPS
RECIPE:
+
+
+ HTML + XHR

28. 2005
/ FAST SLIM CORRECT
AJAX
ASYNCHRONOUS JAVASCRIPT and XML
JESSE JAMES GARRETT
RECIPE:
+
+
+ HTML + XHR + XML

29. / FAST SLIM CORRECT
THINGS inside THINGS
the Science Bit: Part 1
The difference between:
a Web Browser
a JavaScript Engine
a JavaScript Compiler

30. / FAST SLIM CORRECT
a WEB BROWSER
WEB BROWSER

31. / FAST SLIM CORRECT
inside a WEB BROWSER
USER INTERFACE
DATA
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JS ENGINE DISPLAY
WEB BROWSER

32. / FAST SLIM CORRECT
inside a WEB BROWSER
USER INTERFACE
DATA
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JS ENGINE DISPLAY
WEB BROWSER

33. / FAST SLIM CORRECT
a JAVASCRIPT ENGINE
JAVASCRIPT ENGINE
WEB BROWSER

34. / FAST SLIM CORRECT
inside a JAVASCRIPT ENGINE
LEXER
TOKENS
PARSER
AST
NATIVE
CODE
INTERPRET
TRANSLAT
ER
BYTE CODE
OR
JAVASCRIPT ENGINE
WEB BROWSER

35. / FAST SLIM CORRECT
a JAVASCRIPT COMPILER
COMPILER
TOKENS
COMPILER
AST
NATIVE
CODE
COMPILER
BYTE CODE
COMPILER
JAVASCRIPT ENGINE
WEB BROWSER

36. / FAST SLIM CORRECT
BROWSER / ENGINE / COMPILER
COMPILER
COMPILER
COMPILER
COMPILER
JAVASCRIPT ENGINE
WEB BROWSER

37. / FAST SLIM CORRECT
FAST, SLIM, CORRECT
the History Bit: Part 3

38. / FAST SLIM CORRECT
FAST, SLIM, CORRECT
Fast can accomplish more work in
Faster code
less time.
Faster code can tackle more complex tasks.
Slim
Slim code downloads faster.
Some slim code can compile faster.
Correct
Correct code will do what you expected.

39. / FAST SLIM CORRECT
“Fast, Slim, Correct.
Pick any two, so long as one is correct.”
BRENDAN EICH, MOZILLA
regarding JavaScript compilers

40. 1998
/ FAST SLIM CORRECT
JAVASCRIPT ENGINE FAMILY TREE
JAVASCRIPT in 1998
Fast
Slim
Correct

41. 1998+
/ FAST SLIM CORRECT
WEB STANDARDS
JAVASCRIPT after 1998
Fast
Slim
Correct

42. 2006+
/ FAST SLIM CORRECT
LIBRARIES and MINIFIERS
JAVASCRIPT
var dateRE = /^createdOnid/;var dates=[],
els=document.getElementsByTagName('*');
for (var i=els.length;i--;) {
if (dateRE.test(els[i].id]) {
dates.push(els[i])
}
};
JQUERY
var dates = $('*[id^="createdOnid"]');
JAVASCRIPT in 2006
Fast
Slim
Correct

43. 2006
/ FAST SLIM CORRECT
JAVASCRIPT ENGINE FAMILY TREE
JAVASCRIPT in 2006
Fast
Slim
Correct

44. / FAST SLIM CORRECT
MAKING JS FAST
the Science Bit: Part 2
How to make JavaScript Fast

45. / FAST SLIM CORRECT
inside a JAVASCRIPT ENGINE
LEXER
TOKENS
PARSER
AST
NATIVE
CODE
INTERPRET
TRANSLAT
ER
BYTE CODE
OR
JAVASCRIPT ENGINE
WEB BROWSER

46. / FAST SLIM CORRECT
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/
THE RACE FOR SPEED

47. / FAST SLIM CORRECT
FAST NATIVE CODE
magic happens...
JAVASCRIPT

48. 2008+
/ FAST SLIM CORRECT
JAVASCRIPT ENGINE FAMILY TREE
JAVASCRIPT after 2008
Fast
Slim
Correct

49. / FAST SLIM CORRECT
“any application that can be written in
JavaScript,
will eventually be written in JavaScript”
JEFF ATWOOD
STACKOVERFLOW, 2009

50. / FAST SLIM CORRECT
JAVASCRIPT APPLICATIONS
Games and Applications

51. / FAST SLIM CORRECT
JAVASCRIPT APPLICATIONS
GAMES
RECIPE:
+
+
+
+ WebGL

52. / FAST SLIM CORRECT
JAVASCRIPT APPLICATIONS
INTERACTIVE DATA VISUALISATION
RECIPE:
+
+
+

53. / FAST SLIM CORRECT
JAVASCRIPT APPLICATIONS
COMMUNICATION
GOOGLE HANGOUTS
RECIPE:
+
+
+
+ WebRTC
FACEBOOK CHAT

54. / FAST SLIM CORRECT
JAVASCRIPT AS EVERYTHING
Compilers and Emulators

55. / FAST SLIM CORRECT
JAVASCRIPT as EMULATOR
PC, LINUX, APPLE II, C64, NES, ZX SPECTRUM, ATARI ST, AMIGA...
http://copy.sh/v24/
http://bellard.org/jslinux/
http://estyjs.azurewebsites.net/
http://jsspeccy.zxdemo.org/
http://archive.vg/blog/12-feature/114-a-big-list-of-browser-based-emulators-and-ports-of-classic-games
RECIPE:
+
+
+

56. / FAST SLIM CORRECT
JAVASCRIPT as COMPILER
PASCAL, LUA, SMALLTALK, JAVASCRIPT
http://www.teamten.com/lawrence/proje
cts/turbo_pascal_compiler/demo/
https://github.com/mozilla/narcissus
RECIPE:
+
+
+

57. 2013
/ FAST SLIM CORRECT
JAVASCRIPT as MONEY
BITCOIN WALLET
http://vimeo.com/77289033
RECIPE:
+
+
+
+

58. / FAST SLIM CORRECT
EVERYTHING AS JAVASCRIPT
Cross-Compilers and LLVM

59. / FAST SLIM CORRECT
COMPILE to JAVASCRIPT
COFFEESCRIPT, TYPESCRIPT, DART to JAVASCRIPT

60. / FAST SLIM CORRECT
COMPILE to JAVASCRIPT
LLVM to JAVASCRIPT

61. / FAST SLIM CORRECT
COMPILE to JAVASCRIPT
C to LLVM to JAVASCRIPT
C
CLANG

62. / FAST SLIM CORRECT
“JavaScript is assembly language for the web.”
SCOTT HANSELMAN
MICROSOFT, 2011

63. / FAST SLIM CORRECT
COMPILE to JAVASCRIPT
UNREAL ENGINE 3 to JAVASCRIPT
asm.js
CLANG
DEMO

64. / FAST SLIM CORRECT
JAVASCRIPT AS DATA
JSON

65. 2006
/ FAST SLIM CORRECT
JSON
JAVASCRIPT OBJECT NOTATION
XML
JSON
<Person>
<name>Douglas Crockford</name>
<discovers>JSON</discovers>
<employer>Yahoo</employer>
</Person>
{“name”:”Douglas Crockford”,
”discovers”:”JSON”, employer:”Yahoo”}
DOUGLAS CROCKFORD
RECIPE:
+

66. 2006
/ FAST SLIM CORRECT
JSON
NOSQL DATABASES
RECIPE:
+

67. 2006
/ FAST SLIM CORRECT
JSON
NEST THERMOSTAT
http://www.wiredprairie.us/blog/index.php/archives/1754
RECIPE:
+

68. 2006
/ FAST SLIM CORRECT
JSON
MERCEDES S CLASS
http://www4.mercedes-benz.com/manual-cars/ba/foss/content/en/assets/FOSS_licences.pdf
RECIPE:
+

69. 2009
JAVASCRIPT ON A SERVER
NodeJS
/ FAST SLIM CORRECT

70. 2009
/ FAST SLIM CORRECT
NODEJS
JAVASCRIPT ENGINE ON THE SERVER
JAVASCRIPT ENGINE

71. 2009
/ FAST SLIM CORRECT
NODEJS
DESKTOP AUTOMATION
GRUNT
RECIPE:
+
+
PHOTOSHOP GENERATOR

72. / FAST SLIM CORRECT
JAVASCRIPT ON HARDWARE
MicroPCs and MicroControllers

73. / FAST SLIM CORRECT
COMPUTER ON A BOARD
RASPBERRY PI

74. / FAST SLIM CORRECT
COMPUTER ON A BOARD
RASPBERRY PI AQUARIUM
http://theoreticalideations.com/2013/09/03/its-alive-my-node-jsrasperry-pi-powered-aquarium-is-up-and-running/
RECIPE:
+
+
+
+ Aquarium

75. / FAST SLIM CORRECT
MICROCONTROLLERS
ARDUINO, BEAGLEBOARD, TESSEL, LEGO MINDSTORMS-NXT
https://github.com/rwaldron/johnny-five
RECIPE:
+
http://beagleboard.org/support/bonescript/
+
http://tessel.io/
https://nodejsmodules.org/tags/lego

76. / FAST SLIM CORRECT
ROBOTS
NODEJS WiFi-EXTENDING ROBOT
http://glench.com/make/nodejs-robot/
RECIPE:
+
+
+ Arduino + Robot

77. / FAST SLIM CORRECT
ROBOTS
PARROT AR DRONE 2.0
https://github.com/felixge/node-ar-drone
RECIPE:
+
+
+ AR Drone

78. / FAST SLIM CORRECT
WHAT HAVE WE LEARNED?
Please Make It Stop Now

79. / FAST SLIM CORRECT
C, JAVA
LUA, PASCAL

80. / FAST SLIM CORRECT
THANK YOU
For Your Time

81. / John Dalziel / @crashposition / Worthing Digital / 7th November 02013
FAST
SLIM
CORRECT
/ The Story Of How
THE “GLUE OF THE INTERNET”
BECAME THE WORLD’S MOST
POPULAR PROGRAMMING
LANGUAGE
image: http://imgur.com/7pOwI