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

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

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

More Decks by Peter Cooper

Other Decks in Technology


  1. 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 ?
  2. 1961 Brendan Eich is invented born CC licensed - Gen

    Kenai - http://www.flickr.com/photos/gen/4774151517/
  3. 1982 Paul Irish is born! CC licensed - Ben Alman-

  4. 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>
  5. May 1995 Brendan Eich gets 10 days to build a

    programming language for Netscape Navigator
  6. 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.
  7. 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!)
  8. Self + Scheme + Java = LiveScript! (a gross simplification!

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

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

    wasn’t fast enough for MS so IIS was developed instead..
  11. "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!
  12. 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>
  13. Netscape Navigator 3 with(tags) { H1.color = “blue”; EM.color =

    “red”; } JavaScript Style Sheets (JSSS)
  14. 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>
  15. December 1996 CSS 1 becomes official W3C Recommendation has margins,

    padding, font control, background, alignment, etc.
  16. Games Animate text and images Tickers / dynamic marquees Custom

    scrolling & UI elements First in browser “editors”
  17. <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?
  18. May 1998 CSS 2 published as a W3C Recommendation z-indexing,

    positions (absolute, relative, fixed), media types, text shadows
  19. Microsoft’s XMLHTTP work would go on to influence XMLHttpRequest in

    other browsers and provide inspiration for the AJAX movement
  20. ECMAScript 3 (ES3) standard released December 1999 try/catch, regexes, new

    control statements - de facto JS base for a decade
  21. 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
  22. 2004 and starts work on HTML5 W3C being slow.. W3C

    continued to focus on XHTML 2.0
  23. Reliable and extensible cross browser abstraction of many client-side JavaScript

    operations, including DOM element selection and manipulation, animations, event handling, and Ajax support.
  24. 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.
  25. April 2007 Mozilla, Apple and Opera propose the W3C adopt

    WHATWG’s work on HTML5 and use the HTML5 name too
  26. 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..
  27. 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.
  28. "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
  29. "In JavaScript, there is a beautiful, elegant, highly expressive language

    that is buried under a steaming pile of good intentions and blunders." Douglas Crockford
  30. JavaScript: The Good Parts Functions, loose typing, dynamic objects, expressive

    object literal notation (JSON was extracted from this)
  31. JavaScript: The Bad Parts Global variables, scope (function not block),

    automatic semicolon insertion (ASI), reserved words, Unicode support, typeof, parseInt, +, floating point, NaN, arrays..
  32. Strict mode is a restricted variant of JS with different

    semantics. Some things that didn’t cause errors now do.
  33. “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..!
  34. System overlaying Google’s V8 JavaScript engine Server-side JavaScript (again!) Ideal

    for building Internet services Non-blocking, event-driven I/O
  35. 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/');
  36. September 2009 W3C starts work on CSS4 subject selectors, :matches()

    pseudo-class, :local-link, more pseudo-classes
  37. W3C starts work on CSS4 section h1, article h1, aside

    h1 { font-size: 10em; } :matches(section, article, aside) h1 { font-size: 10em; }
  38. 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..)
  39. 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.
  40. April 2011 Internet Explorer 10 Platform Preview Still no WebGL

    Much better CSS3 and HTML5 support Hardware accelerated Canvas Big JS performance improvements
  41. April 2011 Emscripten LLVM to JavaScript compiler by Alon Zakai

    (Mozilla) A way to compile C/C++ to JavaScript
  42. Goal is to "ultimately replace JavaScript as the lingua franca

    of Web development on the open Web platform"
  43. 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.
  44. 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)
  45. 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..