Fast Slim Correct: The History and Evolution of JavaScript.

4,341 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,341
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
74
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • A modern web page without JS or CSS.
  • JavaScript glues technologies together.
  • JavaScript is built into every browser.
  • JavaScript is the most popular programming language in the world
  • The browser wars
  • ex Silicon Graphics (7 years) Joined Netscape in April 1995
    prototyped language (Mocha > LiveScript > JS) and SpiderMonkey compiler in 10 days in May 1995.
  • ex Silicon Graphics (7 years) Joined Netscape in April 1995
    prototyped language (Mocha > LiveScript > JS) and SpiderMonkey compiler in 10 days in May 1995.
  • 2000: XHR arrived In IE5 to support Outlook Web access
  • A very efficient data format
  • - JS is web native, other langs can become js, js can emulate other langs
    - JS engine runs in the browser and out of it.
  • Fast Slim Correct: The History and Evolution of JavaScript.

    1. 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. 2. / FAST SLIM CORRECT [SPOILER] JAVASCRIPT is the Glue Of The Internet
    3. 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. 4. / FAST SLIM CORRECT What is JavaScript? some History bits some Science bits some Examples
    5. 5. / FAST SLIM CORRECT JAVASCRIPT RECIPES A WEB BROWSER A JAVASCRIPT ENGINE JAVASCRIPT CODE HTML CODE RECIPE: + + + HTML
    6. 6. / FAST SLIM CORRECT WHAT IS JAVASCRIPT? a native programming language for the web
    7. 7. / FAST SLIM CORRECT ANATOMY OF A MODERN WEB PAGE CSS JavaScript
    8. 8. / FAST SLIM CORRECT ANATOMY OF A MODERN WEB PAGE DEMO
    9. 9. / FAST SLIM CORRECT JAVASCRIPT IS USEFUL KEYBOARD, MOUSE & TOUCH MONITOR & SPEAKERS WEB LANGUAGE WEB SERVERS & APIs
    10. 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. 11. / FAST SLIM CORRECT JAVASCRIPT IS POPULAR http://redmonk.com/sogrady/2013/02/28/language-rankings-1-13/
    12. 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. 13. / FAST SLIM CORRECT HELLO WORLD the History Bit: Part 1
    14. 14. / FAST SLIM CORRECT 1995
    15. 15. 1995 / FAST SLIM CORRECT THE WEB in 1995
    16. 16. 1995 / FAST SLIM CORRECT THE WEB in 1995
    17. 17. 1995 / FAST SLIM CORRECT THE WEB in 1995
    18. 18. 1995 / FAST SLIM CORRECT THE WEB in 1995
    19. 19. 1995 / FAST SLIM CORRECT ANATOMY of a WEB PAGE HTML
    20. 20. 1995 / FAST SLIM CORRECT INTERNET EXPLORER vs NETSCAPE
    21. 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. 22. 1995 / FAST SLIM CORRECT BRENDAN EICH DESIGNS JMOCHARIPT AIVASC RIP L VE T ...IN 10 DAYS Joins NETSCAPE in April 1995.
    23. 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. 24. / FAST SLIM CORRECT BECOMING USEFUL the History Bit: Part 2
    25. 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. 26. 1995 - 2000 / FAST SLIM CORRECT DHTML DYNAMIC HTML FORM VALIDATION + + + HTML TICKERS & POP UPS DEMO RECIPE: ROLLOVERS DEMO
    27. 27. 2000 / FAST SLIM CORRECT XHR XMLHttpRequest 2000 2004 2005 OUTLOOK WEB GOOGLE MAIL GOOGLE MAPS RECIPE: + + + HTML + XHR
    28. 28. 2005 / FAST SLIM CORRECT AJAX ASYNCHRONOUS JAVASCRIPT and XML JESSE JAMES GARRETT RECIPE: + + + HTML + XHR + XML
    29. 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. 30. / FAST SLIM CORRECT a WEB BROWSER WEB BROWSER
    31. 31. / FAST SLIM CORRECT inside a WEB BROWSER USER INTERFACE DATA BROWSER ENGINE RENDERING ENGINE NETWORKING JS ENGINE DISPLAY WEB BROWSER
    32. 32. / FAST SLIM CORRECT inside a WEB BROWSER USER INTERFACE DATA BROWSER ENGINE RENDERING ENGINE NETWORKING JS ENGINE DISPLAY WEB BROWSER
    33. 33. / FAST SLIM CORRECT a JAVASCRIPT ENGINE JAVASCRIPT ENGINE WEB BROWSER
    34. 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. 35. / FAST SLIM CORRECT a JAVASCRIPT COMPILER COMPILER TOKENS COMPILER AST NATIVE CODE COMPILER BYTE CODE COMPILER JAVASCRIPT ENGINE WEB BROWSER
    36. 36. / FAST SLIM CORRECT BROWSER / ENGINE / COMPILER COMPILER COMPILER COMPILER COMPILER JAVASCRIPT ENGINE WEB BROWSER
    37. 37. / FAST SLIM CORRECT FAST, SLIM, CORRECT the History Bit: Part 3
    38. 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. 39. / FAST SLIM CORRECT “Fast, Slim, Correct. Pick any two, so long as one is correct.” BRENDAN EICH, MOZILLA regarding JavaScript compilers
    40. 40. 1998 / FAST SLIM CORRECT JAVASCRIPT ENGINE FAMILY TREE JAVASCRIPT in 1998 Fast Slim Correct
    41. 41. 1998+ / FAST SLIM CORRECT WEB STANDARDS JAVASCRIPT after 1998 Fast Slim Correct
    42. 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. 43. 2006 / FAST SLIM CORRECT JAVASCRIPT ENGINE FAMILY TREE JAVASCRIPT in 2006 Fast Slim Correct
    44. 44. / FAST SLIM CORRECT MAKING JS FAST the Science Bit: Part 2 How to make JavaScript Fast
    45. 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. 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. 47. / FAST SLIM CORRECT FAST NATIVE CODE magic happens... JAVASCRIPT
    48. 48. 2008+ / FAST SLIM CORRECT JAVASCRIPT ENGINE FAMILY TREE JAVASCRIPT after 2008 Fast Slim Correct
    49. 49. / FAST SLIM CORRECT “any application that can be written in JavaScript, will eventually be written in JavaScript” JEFF ATWOOD STACKOVERFLOW, 2009
    50. 50. / FAST SLIM CORRECT JAVASCRIPT APPLICATIONS Games and Applications
    51. 51. / FAST SLIM CORRECT JAVASCRIPT APPLICATIONS GAMES RECIPE: + + + + WebGL
    52. 52. / FAST SLIM CORRECT JAVASCRIPT APPLICATIONS INTERACTIVE DATA VISUALISATION RECIPE: + + +
    53. 53. / FAST SLIM CORRECT JAVASCRIPT APPLICATIONS COMMUNICATION GOOGLE HANGOUTS RECIPE: + + + + WebRTC FACEBOOK CHAT
    54. 54. / FAST SLIM CORRECT JAVASCRIPT AS EVERYTHING Compilers and Emulators
    55. 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. 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. 57. 2013 / FAST SLIM CORRECT JAVASCRIPT as MONEY BITCOIN WALLET http://vimeo.com/77289033 RECIPE: + + + +
    58. 58. / FAST SLIM CORRECT EVERYTHING AS JAVASCRIPT Cross-Compilers and LLVM
    59. 59. / FAST SLIM CORRECT COMPILE to JAVASCRIPT COFFEESCRIPT, TYPESCRIPT, DART to JAVASCRIPT
    60. 60. / FAST SLIM CORRECT COMPILE to JAVASCRIPT LLVM to JAVASCRIPT
    61. 61. / FAST SLIM CORRECT COMPILE to JAVASCRIPT C to LLVM to JAVASCRIPT C CLANG
    62. 62. / FAST SLIM CORRECT “JavaScript is assembly language for the web.” SCOTT HANSELMAN MICROSOFT, 2011
    63. 63. / FAST SLIM CORRECT COMPILE to JAVASCRIPT UNREAL ENGINE 3 to JAVASCRIPT asm.js CLANG DEMO
    64. 64. / FAST SLIM CORRECT JAVASCRIPT AS DATA JSON
    65. 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. 66. 2006 / FAST SLIM CORRECT JSON NOSQL DATABASES RECIPE: +
    67. 67. 2006 / FAST SLIM CORRECT JSON NEST THERMOSTAT http://www.wiredprairie.us/blog/index.php/archives/1754 RECIPE: +
    68. 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. 69. 2009 JAVASCRIPT ON A SERVER NodeJS / FAST SLIM CORRECT
    70. 70. 2009 / FAST SLIM CORRECT NODEJS JAVASCRIPT ENGINE ON THE SERVER JAVASCRIPT ENGINE
    71. 71. 2009 / FAST SLIM CORRECT NODEJS DESKTOP AUTOMATION GRUNT RECIPE: + + PHOTOSHOP GENERATOR
    72. 72. / FAST SLIM CORRECT JAVASCRIPT ON HARDWARE MicroPCs and MicroControllers
    73. 73. / FAST SLIM CORRECT COMPUTER ON A BOARD RASPBERRY PI
    74. 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. 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. 76. / FAST SLIM CORRECT ROBOTS NODEJS WiFi-EXTENDING ROBOT http://glench.com/make/nodejs-robot/ RECIPE: + + + Arduino + Robot
    77. 77. / FAST SLIM CORRECT ROBOTS PARROT AR DRONE 2.0 https://github.com/felixge/node-ar-drone RECIPE: + + + AR Drone
    78. 78. / FAST SLIM CORRECT WHAT HAVE WE LEARNED? Please Make It Stop Now
    79. 79. / FAST SLIM CORRECT C, JAVA LUA, PASCAL
    80. 80. / FAST SLIM CORRECT THANK YOU For Your Time
    81. 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

    ×