Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I Choo-Choo Choose The Web: A History of the We...

Peter Cooper
June 26, 2012
Technology
1
170

I Choo-Choo Choose The Web: A History of the Web and JavaScript 1945-2012

I gave this as a keynote at the first ScotlandJS. Skip 22 slides in to begin the history walkthrough from 1945, the first group of slides are intro and only work with the talk.

Peter Cooper

June 26, 2012
Tweet

More Decks by Peter Cooper

See All by Peter Cooper
The Future of Code
peterc
0
120
Ruby 2.0 Walkthrough: The Best Bits
peterc
67
10k
Redis Steady Go (Nov 2012)
peterc
18
1.1k
Redis Steady Go
peterc
31
2.2k

Other Decks in Technology

See All in Technology
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.3k
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
120
.NET 9 のパフォーマンス改善
nenonaninu
0
950
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
850
第3回Snowflake女子会_LT登壇資料（合成データ）_Taro_CCCMK
tarotaro0129
0
190
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
160
Amazon Kendra GenAI Index 登場でどう変わる？ 評価から学ぶ最適なRAG構成
naoki_0531
0
110
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
460
C++26 エラー性動作
faithandbrave
2
740
Wantedly での Datadog 活用事例
bgpat
1
470
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Designing for humans not robots
tammielis
250
25k
Mobile First: as difficult as doing things right
swwweet
222
9k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Visualization
eitanlees
146
15k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Making the Leap to Tech Lead
cromwellryan
133
9k

Transcript

  1. None

  2. Things to avoid in a keynote Meta-talk about the keynote

    itself Antagonizing the audience Anything “sexy” Hitler / contentious world history Racing through too many slides & topics Running over time ?

  3. Why me?

  4. None

  5. javascriptweekly.com

  6. 1996

  7. 1996

  8. 1996

  9. 1996

  10. 1996

  11. The Web’s history is JavaScript’s history

  12. The Internet’s history is JavaScript’s history

  13. Commodore VIC-20

  14. BBC Micro

  15. None

  16. My pivotal GCSE “options” choice..

  17. None
  18. None
  19. None
  20. None

  21. So.. the Web.

  22. Vannevar Bush 1945

  23. None
  24. None

  25. 1961 Brendan Eich is invented born CC licensed - Gen

    Kenai - http://www.flickr.com/photos/gen/4774151517/

  26. 1965 “Hypertext” coined by Ted Nelson

  27. 1965 Douglas Engelbart develops and demonstrates NLS - the “oN-Line

    System”
  28. None

  29. 1965 ARPANET

  30. 1975 Two network comms test Stanford - UCL

  31. 1982 Paul Irish is born! CC licensed - Ben Alman-

    http://www.flickr.com/photos/rj3/3919895524/

  32. 1983 ARPANET moves to TCP/IP The “Internet” is born

  33. 1983-1984 DNS is invented and deployed

  34. January 1, 1985 Generic top level domains born com, org,

    net, edu, gov, mil, arpa

  35. March 15, 1985 symbolics.com

  36. 1990 Tim Berners-Lee creates WorldWideWeb at CERN

  37. August 1991 The Web becomes publicly available!

  38. October 1991 First document showing off all HTML tags at

    the time (18!) http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html Including oddities like <PLAINTEXT> <ISINDEX> and <LISTING>

  39. 1992 ViolaWWW browser released

  40. None

  41. 1992 First Web server outside of Europe

  42. March 1993 NCSA releases alpha of Mosaic for X Windows

  43. Marc Andreessen

  44. 1993 CERN agrees to let anyone use Web protocols and

    code royalty-free

  45. June 1993 HTML published as an “Internet Draft” by the

    IETF

  46. October 1994 W3C founded

  47. October 1994 Eolas founded Patented plugins for browsers

  48. "Distributed hypermedia method for automatically invoking external application providing interaction

    and display of embedded objects within a hypermedia document"

  49. October December 1994 Netscape Navigator

  50. December 1994 Netscape NetSite Web Server

  51. 1994 HoTMetaL HTML Editor

  52. May 1995 Netscape licenses Java to run “applets” in the

    browser

  53. May 1995 Brendan Eich gets 10 days to build a

    programming language for Netscape Navigator

  54. Language requirements Must let developers interact with Java Must be

    simple (Visual Basic-like) Can it look like Java, please? Oh, and get it done quick.

  55. What we got Object oriented scripting language Prototypal inheritance (a

    la Self) Java/C family-esque syntax Dynamic, and loosely typed First class functions (hello Scheme!)

  56. http://www.crockford.com/javascript/little.html

  57. Self + Scheme + Java = Mocha

  58. Self + Scheme + Java = LiveScript! (a gross simplification!

    - see Douglas Crockford’s fine videos for more on this story)

  59. June 1995 Netscape and Macromedia partner to run “Director” movies

    direct in the browser

  60. September 1995 Netscape Navigator 2 Now with.. FRAMES! LiveScript! DOM!

  61. None
  62. None
  63. None

  64. November 1995 HTML 2.0 spec published by IETF

  65. Announcement of JavaScript by Netscape and Sun December 1995

  66. NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING

    LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET 28 INDUSTRY-LEADING COMPANIES TO ENDORSE JAVASCRIPT AS A COMPLEMENT TO JAVA FOR EASY ONLINE APPLICATION DEVELOPMENT

  67. 1995 Internet Explorer 1

  68. early 1996 IIS 1.0 Internet Information Services

  69. Microsoft’s first Web server was invented in Scotland! but it

    wasn’t fast enough for MS so IIS was developed instead..

  70. March 1996 Netscape Enterprise Server

  71. "Netscape Enterprise Server is the first Web server to support

    the Java and JavaScript programming languages, enabling the creation, delivery and management of live online applications." from just $995!

  72. <HTML><BODY> <P>Your request came from: <SERVER>write(request.ip);</SERVER></P> </BODY></HTML> Server-side JavaScript (1996

    style)

  73. <HTML><BODY> <P>Your request came from: `write(request.ip)`</P> </BODY></HTML> Server-side JavaScript (1996

    style)

  74. <SERVER>write ("<SCRIPT>var luck = " + client.winnings + "</SCRIPT>")</SERVER> Server-side

    JavaScript (1996 style) <SCRIPT>var luck = 123</SCRIPT>

  75. September 1995 Internet Explorer 3 ActiveX PICS DOM CSS <IFRAME>

    JScript VBScript

  76. Internet Explorer 3 PICS Platform for Internet Content Selection

  77. Internet Explorer 3 DOM document.formName.inputName document.forms[0].elements[0] Client-side form validation “Rollover”

    effects.. “DOM Level 0” or “Legacy DOM”

  78. Internet Explorer 3 CSS http://www.microsoft.com/typography/css/gallery/entrance.htm

  79. Internet Explorer 3 VBScript <HTML> <HEAD><TITLE>Simple Validation</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--

    Sub Submit_OnClick If IsNumeric(Document.myForm.Foo1.Value) Then If Document.myForm.Foo1.Value < 100 Or Document.myForm.Foo1.Value > 1000 MsgBox "Please enter a number between 100 and 1000." Else MsgBox "Your Number Has Been Accepted!" End If Else MsgBox "Please enter a number." End If End Sub --> </SCRIPT></HEAD> <BODY> <FORM name="myForm"> Enter a value between 10 and 1000: <INPUT NAME="Foo1" TYPE="TEXT" SIZE="2"> <INPUT NAME="Submit" TYPE="BUTTON" VALUE="Submit"> </FORM> </BODY></HTML>

  80. September 1995 Netscape Navigator 3

  81. Netscape Navigator 3 <script src=”elsewhere.js”></script> Loading remote JavaScript!

  82. Netscape Navigator 3 <STYLE TYPE=”text/javascript”> JavaScript Style Sheets (JSSS)

  83. Netscape Navigator 3 <STYLE TYPE=”text/javascript”> document.tags.H1.color = “blue” classes.ruddy.all.color =

    “#FF0000” </STYLE> JavaScript Style Sheets (JSSS)

  84. Netscape Navigator 3 with(tags) { H1.color = “blue”; EM.color =

    “red”; } JavaScript Style Sheets (JSSS)

  85. Netscape Navigator 3 <style type=text/javascript> evaluate_style() { if (color ==

    "red"){ color = "blue"; fontStyle = "italic"; } else if (color == "blue"){ color = "green"; fontWeight = "bold"; fontStyle = "normal"; } else if (color == "green") { color = "red"; fontStyle = "medium"; } } tag.UL.color = "green"; tag.UL.apply = evaluate_style(); </style>

  86. Brendan Eich refactors and improves the JS engine - hello

    SpiderMonkey! Autumn/Fall 1996

  87. December 1996 CSS 1 becomes official W3C Recommendation has margins,

    padding, font control, background, alignment, etc.

  88. 1996 Macromedia Flash

  89. None

  90. David Flanagan’s landmark JavaScript book is published by O’Reilly 1996

  91. First moves on standardizing JavaScript with ECMA 1996-1997

  92. ECMAScript ECMA-262 Technical Committee 39 (TC39) ECMAScript.next Harmony Buzzword Bingo!

  93. January 1997 HTML 3.2 spec published by W3C

  94. Works begins on “Javagator” (later known as Rhino), a Java

    based JS engine 1997

  95. 1997 Internet Explorer 4 Channels! Active Desktop! DHTML!

  96. DHTML Dynamic HTML HTML + CSS + JavaScript

  97. Games Animate text and images Tickers / dynamic marquees Custom

    scrolling & UI elements First in browser “editors”
  98. None

  99. Cross browser standards were a problem.. .. until DOM support

    was standardized

  100. 1997 Netscape Navigator 4 <OBJECT> CSS1 support Dynamic fonts

  101. December 1997 HTML 4.0 spec published as a W3C Recommendation

  102. December 1997 Macromedia Dreamweaver

  103. <script language="JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){

    if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> The most widespread JS code ever?

  104. May 1998 CSS 2 published as a W3C Recommendation z-indexing,

    positions (absolute, relative, fixed), media types, text shadows

  105. June 2011! CSS 2.1 (really a cleanup) didn’t become a

    W3C Recommendation till..

  106. 1998 W3C pushes out a DOM standard “DOM Level 1”

  107. 1999 Internet Explorer 5 Limited DOM Level 1 support XMLHTTP

    ActiveX control

  108. Microsoft’s XMLHTTP work would go on to influence XMLHttpRequest in

    other browsers and provide inspiration for the AJAX movement

  109. ECMAScript 3 (ES3) standard released December 1999 try/catch, regexes, new

    control statements - de facto JS base for a decade

  110. 1999 W3C considers HTML done Future is XML and XHTML

    1.0!

  111. January 2000 XHTML 1.0 published as a W3C Recommendation

  112. May 2000 ISO HTML (based on 4.01 Strict) published as

    a standard

  113. Macromedia Flash’s “actions” become ActionScript, a new ECMAScript dialect September

    2000

  114. Initially very much like JS ActionScript 2 and 3 (2003

    & 2006) added: compile time type checking type annotations class based OO syntax packages and namespaces ability to access DirectX and OpenGL

  115. Late 2000 DOM Level 2 published including.. getElementById

  116. November 2000 Netscape Navigator 6 Bloatware A big mistake Included

    an e-mail client and more..

  117. August 2001 Internet Explorer 6

  118. 2002 Mozilla Phoenix Lightweight Fast Only a Web browser

  119. 2002 Mozilla Firebird

  120. 2004 Mozilla Firefox

  121. 2004 Mozilla Firefox 1.0 RSS, better tabs, Firefox logo (since

    0.9), many localizations

  122. 2004 WHATWG founded Web Hypertext Application Technology Working Group

  123. 2004 and starts work on HTML5 W3C being slow.. W3C

    continued to focus on XHTML 2.0

  124. April 2004 DOM Level 3 published .. still the status

    quo

  125. October 2004 O’Reilly’s first “Web 2.0” Summit

  126. None

  127. Feb 2005 “AJAX” coined by Jesse James Garrett of Adaptive

    Path Asynchronous JavaScript And XML
  128. None

  129. February 2005 Prototype JS framework/library released by Sam Stephenson Used

    primarily with Rails (to start with..)

  130. February 2005 ajaxian launches

  131. June 2005 script.aculo.us released

  132. 2005 Adobe Creative Suite 2 adds “ExtendScript” (an ECMAScript dialect)

  133. 2005 Mozilla Developer Center (now Mozilla Developer Network) Launched

  134. January 2006 jQuery Released

  135. Reliable and extensible cross browser abstraction of many client-side JavaScript

    operations, including DOM element selection and manipulation, animations, event handling, and Ajax support.

  136. JavaScript 1.7 comes to Firefox 2 October 2006 included many

    ideas now appearing in ES6 (e.g. let, generators, array comprehensions) .. but very much a Mozilla only dealie.

  137. 2006 First “canvas 3D” experiments by a Mozilla engineer, Vladimir

    Vukicevic

  138. February 2007 Steve Yegge ponders “The Next Big Language” http://steve-yegge.blogspot.co.uk/2007/02/next-big-language.html

  139. C-like syntax Dynamic typing with optional static types Performance Tools

    Kitchen sink Multi-platform

  140. April 2007 Mozilla, Apple and Opera propose the W3C adopt

    WHATWG’s work on HTML5 and use the HTML5 name too

  141. May 2007 The W3C gets behind HTML5

  142. 2008 The W3C publishes a first working draft of an

    HTML5 spec

  143. Improved markup, <video>, <audio>, inline SVG, new form controls, custom

    data attributes.. plus a collection of APIs.. Canvas, Offline Web Applications, History manipulation, Drag and Drop, Microdata, WebStorage, and more..

  144. Canvas

  145. Be aware many “not-officially-HTML5” specs are wrapped up in the

    HTML5 “brand” now: Server Sent Events, WebSocket, WebGL, Web Audio API, Geolocation API, etc.

  146. WebSocket

  147. WebGL

  148. XHTML5 is an XML serialization of HTML5

  149. 2008 PhoneGap Released Build native mobile apps using Web technologies

    a.k.a. Apache Cordova (sort of)

  150. ECMAScript 4 fiasco 2008 Political differences, mostly between Adobe and

    Microsoft

  151. ActionScript 3 inherited quite a lot from ECMAScript 4

  152. “Harmony” comes to JS 2008

  153. May 2008 JavaScript: The Good Parts published

  154. "When Java applets failed, JavaScript became the 'language of the

    Web' by default. JavaScript's popularity is almost completely independent of its qualities as a programming language." Douglas Crockford

  155. "In JavaScript, there is a beautiful, elegant, highly expressive language

    that is buried under a steaming pile of good intentions and blunders." Douglas Crockford

  156. JavaScript: The Good Parts Functions, loose typing, dynamic objects, expressive

    object literal notation (JSON was extracted from this)

  157. JavaScript: The Bad Parts Global variables, scope (function not block),

    automatic semicolon insertion (ASI), reserved words, Unicode support, typeof, parseInt, +, floating point, NaN, arrays..

  158. September 2008 Google Chrome And don’t forget the V8 JavaScript

    engine..

  159. ECMAScript 5 (ES5) standard released 2009 getters, setters, better reflection,

    standardized some quirks, strict mode

  160. Strict mode is a restricted variant of JS with different

    semantics. Some things that didn’t cause errors now do.

  161. “use strict”; Can’t create global variables. Can’t delete non-existing properties.

    Function argument names must be unique. No octal syntax for numbers. No “with” eval of strict mode code doesn’t introduce vars into outer scope And more, naturally..!

  162. 2009

  163. System overlaying Google’s V8 JavaScript engine Server-side JavaScript (again!) Ideal

    for building Internet services Non-blocking, event-driven I/O

  164. var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type':

    'text/plain'}); response.end('Hello World\n'); }).listen(8000); console.log('Server running at http://localhost:8000/');

  165. 2009 First JSConf 130 people in 2009 Now exist worldwide..

    Europe Argentina Australia

  166. September 2009 W3C starts work on CSS4 subject selectors, :matches()

    pseudo-class, :local-link, more pseudo-classes

  167. W3C starts work on CSS4 section h1, article h1, aside

    h1 { font-size: 10em; } :matches(section, article, aside) h1 { font-size: 10em; }

  168. September 2009 Google Chrome Frame Sends IE on a Chrome

    trip

  169. A language that compiles to JavaScript. December 2009 0.1.0

  170. None

  171. A nicer way to write JavaScript? December 2009 Adds syntactic

    sugar inspired by Ruby, Python and Haskell: list comprehension, pattern matching (in terms of destructuring assignments), significant whitespace, everything is an expression, class sugar, existential operator, variadic parameters, default parameters, heredocs, automatic lexical scoping, optional parentheses! (And more..)

  172. December 2010 1.0

  173. https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

  174. None

  175. April 2010 Steve Jobs lays into Flash, says HTML5 will

    win.

  176. 2010 First JS1K

  177. 2010 Backbone.js Released

  178. 2010 Joyent sponsors Node.js

  179. The JS performance race is in full flow! Firefox 4’s

    JavaScript engine 4x faster than 3.6’s due to JaegerMonkey. November 2010 JIT becomes the name of the game.

  180. JavaScript overtakes Ruby to become the #1 most popular language

    on GitHub. December 2010

  181. Google’s V8 gets “Crankshaft” Big performance improvements December 2010 Aggressive

    optimizations in compilation + faster start-up times

  182. 2011 Chrome 9 and Firefox 4 bring WebGL support to

    the masses

  183. March 2011 WebGL 1.0 spec finalized

  184. April 2011 Internet Explorer 10 Platform Preview Still no WebGL

    Much better CSS3 and HTML5 support Hardware accelerated Canvas Big JS performance improvements

  185. April 2011 Emscripten LLVM to JavaScript compiler by Alon Zakai

    (Mozilla) A way to compile C/C++ to JavaScript

  186. May 2011 JSLinux

  187. ES 5.1 Spec Ratified July 2011

  188. pdf.js’ pixel perfect rendering milestone July 2011

  189. 2011 Google Dart

  190. Goal is to "ultimately replace JavaScript as the lingua franca

    of Web development on the open Web platform"

  191. Aims to solve JavaScript’s “problems”, be better for large projects,

    better security, etc.

  192. Class based, single inheritance, object oriented, C-like syntax.. a bit

    more Java- like in some ways. Optional typing, compiles to JS as CoffeeScript does (for now) but Chromium has a special Dart VM build.

  193. November 2011 Adobe announces discontinuation of Flash for mobile -

    will focus on HTML5

  194. November 2011 jQuery Mobile 1.0 Released

  195. ECMAScript.next under heavy development a.k.a. ES6 2012

  196. Goals Be a better language for complex apps (and library

    shared by those apps) Good target for code generators Accept de facto standards where possible (vs inventing stuff)

  197. New goodies let, const, function in block scope destructuring assignments

    ( let {a, b} = pt; } parameter default values ( function f(x, y = 10) { } ) rest, variadic parameters .. ( function(i, ...a) { } ) proxies, weak maps iterators, generators comprehensions ( return [a + b for (a in A) for (b in B)] ) arrow function syntax and more, naturally..

  198. npm registry hits 10,000 packages May 2012

  199. CoffeeScript enters GitHub’s top 10 most popular programming languages May

    2012

  200. O’Reilly’s first JavaScript conference Fluent (about time!) May 2012

  201. May 2012 First BackboneConf

  202. Target for the release of the ES6 standard December 2013

  203. 2014 Target for HTML5 to get W3C Recommendation status

  204. None