Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fast Slim Correct: The History and Evolution of JavaScript.

5,051 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
  • Be the first to comment

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

×