Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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 ?

Slide 3

Slide 3 text

Why me?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

javascriptweekly.com

Slide 6

Slide 6 text

1996

Slide 7

Slide 7 text

1996

Slide 8

Slide 8 text

1996

Slide 9

Slide 9 text

1996

Slide 10

Slide 10 text

1996

Slide 11

Slide 11 text

The Web’s history is JavaScript’s history

Slide 12

Slide 12 text

The Internet’s history is JavaScript’s history

Slide 13

Slide 13 text

Commodore VIC-20

Slide 14

Slide 14 text

BBC Micro

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

My pivotal GCSE “options” choice..

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

So.. the Web.

Slide 22

Slide 22 text

Vannevar Bush 1945

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

1961 Brendan Eich is invented born CC licensed - Gen Kenai - http://www.flickr.com/photos/gen/4774151517/

Slide 26

Slide 26 text

1965 “Hypertext” coined by Ted Nelson

Slide 27

Slide 27 text

1965 Douglas Engelbart develops and demonstrates NLS - the “oN-Line System”

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

1965 ARPANET

Slide 30

Slide 30 text

1975 Two network comms test Stanford - UCL

Slide 31

Slide 31 text

1982 Paul Irish is born! CC licensed - Ben Alman- http://www.flickr.com/photos/rj3/3919895524/

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

1983-1984 DNS is invented and deployed

Slide 34

Slide 34 text

January 1, 1985 Generic top level domains born com, org, net, edu, gov, mil, arpa

Slide 35

Slide 35 text

March 15, 1985 symbolics.com

Slide 36

Slide 36 text

1990 Tim Berners-Lee creates WorldWideWeb at CERN

Slide 37

Slide 37 text

August 1991 The Web becomes publicly available!

Slide 38

Slide 38 text

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 and

Slide 39

Slide 39 text

1992 ViolaWWW browser released

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

1992 First Web server outside of Europe

Slide 42

Slide 42 text

March 1993 NCSA releases alpha of Mosaic for X Windows

Slide 43

Slide 43 text

Marc Andreessen

Slide 44

Slide 44 text

1993 CERN agrees to let anyone use Web protocols and code royalty-free

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

October 1994 W3C founded

Slide 47

Slide 47 text

October 1994 Eolas founded Patented plugins for browsers

Slide 48

Slide 48 text

"Distributed hypermedia method for automatically invoking external application providing interaction and display of embedded objects within a hypermedia document"

Slide 49

Slide 49 text

October December 1994 Netscape Navigator

Slide 50

Slide 50 text

December 1994 Netscape NetSite Web Server

Slide 51

Slide 51 text

1994 HoTMetaL HTML Editor

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

May 1995 Brendan Eich gets 10 days to build a programming language for Netscape Navigator

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

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!)

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Self + Scheme + Java = Mocha

Slide 58

Slide 58 text

Self + Scheme + Java = LiveScript! (a gross simplification! - see Douglas Crockford’s fine videos for more on this story)

Slide 59

Slide 59 text

June 1995 Netscape and Macromedia partner to run “Director” movies direct in the browser

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

November 1995 HTML 2.0 spec published by IETF

Slide 65

Slide 65 text

Announcement of JavaScript by Netscape and Sun December 1995

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

1995 Internet Explorer 1

Slide 68

Slide 68 text

early 1996 IIS 1.0 Internet Information Services

Slide 69

Slide 69 text

Microsoft’s first Web server was invented in Scotland! but it wasn’t fast enough for MS so IIS was developed instead..

Slide 70

Slide 70 text

March 1996 Netscape Enterprise Server

Slide 71

Slide 71 text

"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!

Slide 72

Slide 72 text

Your request came from: write(request.ip);

Server-side JavaScript (1996 style)

Slide 73

Slide 73 text

Your request came from: `write(request.ip)`

Server-side JavaScript (1996 style)

Slide 74

Slide 74 text

write ("var luck = " + client.winnings + "") Server-side JavaScript (1996 style) var luck = 123

Slide 75

Slide 75 text

September 1995 Internet Explorer 3 ActiveX PICS DOM CSS JScript VBScript

Slide 76

Slide 76 text

Internet Explorer 3 PICS Platform for Internet Content Selection

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Internet Explorer 3 VBScript Simple Validation <!-- 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 --> Enter a value between 10 and 1000:

Slide 80

Slide 80 text

September 1995 Netscape Navigator 3

Slide 81

Slide 81 text

Netscape Navigator 3 Loading remote JavaScript!

Slide 82

Slide 82 text

Netscape Navigator 3 JavaScript Style Sheets (JSSS)

Slide 83

Slide 83 text

Netscape Navigator 3 document.tags.H1.color = “blue” classes.ruddy.all.color = “#FF0000” JavaScript Style Sheets (JSSS)

Slide 84

Slide 84 text

Netscape Navigator 3 with(tags) { H1.color = “blue”; EM.color = “red”; } JavaScript Style Sheets (JSSS)

Slide 85

Slide 85 text

Netscape Navigator 3 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();

Slide 86

Slide 86 text

Brendan Eich refactors and improves the JS engine - hello SpiderMonkey! Autumn/Fall 1996

Slide 87

Slide 87 text

December 1996 CSS 1 becomes official W3C Recommendation has margins, padding, font control, background, alignment, etc.

Slide 88

Slide 88 text

1996 Macromedia Flash

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

First moves on standardizing JavaScript with ECMA 1996-1997

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

January 1997 HTML 3.2 spec published by W3C

Slide 94

Slide 94 text

Works begins on “Javagator” (later known as Rhino), a Java based JS engine 1997

Slide 95

Slide 95 text

1997 Internet Explorer 4 Channels! Active Desktop! DHTML!

Slide 96

Slide 96 text

DHTML Dynamic HTML HTML + CSS + JavaScript

Slide 97

Slide 97 text

Games Animate text and images Tickers / dynamic marquees Custom scrolling & UI elements First in browser “editors”

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Cross browser standards were a problem.. .. until DOM support was standardized

Slide 100

Slide 100 text

1997 Netscape Navigator 4 CSS1 support Dynamic fonts

Slide 101

Slide 101 text

December 1997 HTML 4.0 spec published as a W3C Recommendation

Slide 102

Slide 102 text

December 1997 Macromedia Dreamweaver

Slide 103

Slide 103 text

<!-- 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];} } //--> The most widespread JS code ever?

Slide 104

Slide 104 text

May 1998 CSS 2 published as a W3C Recommendation z-indexing, positions (absolute, relative, fixed), media types, text shadows

Slide 105

Slide 105 text

June 2011! CSS 2.1 (really a cleanup) didn’t become a W3C Recommendation till..

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

1999 Internet Explorer 5 Limited DOM Level 1 support XMLHTTP ActiveX control

Slide 108

Slide 108 text

Microsoft’s XMLHTTP work would go on to influence XMLHttpRequest in other browsers and provide inspiration for the AJAX movement

Slide 109

Slide 109 text

ECMAScript 3 (ES3) standard released December 1999 try/catch, regexes, new control statements - de facto JS base for a decade

Slide 110

Slide 110 text

1999 W3C considers HTML done Future is XML and XHTML 1.0!

Slide 111

Slide 111 text

January 2000 XHTML 1.0 published as a W3C Recommendation

Slide 112

Slide 112 text

May 2000 ISO HTML (based on 4.01 Strict) published as a standard

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Late 2000 DOM Level 2 published including.. getElementById

Slide 116

Slide 116 text

November 2000 Netscape Navigator 6 Bloatware A big mistake Included an e-mail client and more..

Slide 117

Slide 117 text

August 2001 Internet Explorer 6

Slide 118

Slide 118 text

2002 Mozilla Phoenix Lightweight Fast Only a Web browser

Slide 119

Slide 119 text

2002 Mozilla Firebird

Slide 120

Slide 120 text

2004 Mozilla Firefox

Slide 121

Slide 121 text

2004 Mozilla Firefox 1.0 RSS, better tabs, Firefox logo (since 0.9), many localizations

Slide 122

Slide 122 text

2004 WHATWG founded Web Hypertext Application Technology Working Group

Slide 123

Slide 123 text

2004 and starts work on HTML5 W3C being slow.. W3C continued to focus on XHTML 2.0

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

Feb 2005 “AJAX” coined by Jesse James Garrett of Adaptive Path Asynchronous JavaScript And XML

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

February 2005 Prototype JS framework/library released by Sam Stephenson Used primarily with Rails (to start with..)

Slide 130

Slide 130 text

February 2005 ajaxian launches

Slide 131

Slide 131 text

June 2005 script.aculo.us released

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

2005 Mozilla Developer Center (now Mozilla Developer Network) Launched

Slide 134

Slide 134 text

January 2006 jQuery Released

Slide 135

Slide 135 text

Reliable and extensible cross browser abstraction of many client-side JavaScript operations, including DOM element selection and manipulation, animations, event handling, and Ajax support.

Slide 136

Slide 136 text

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.

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

C-like syntax Dynamic typing with optional static types Performance Tools Kitchen sink Multi-platform

Slide 140

Slide 140 text

April 2007 Mozilla, Apple and Opera propose the W3C adopt WHATWG’s work on HTML5 and use the HTML5 name too

Slide 141

Slide 141 text

May 2007 The W3C gets behind HTML5

Slide 142

Slide 142 text

2008 The W3C publishes a first working draft of an HTML5 spec

Slide 143

Slide 143 text

Improved markup, , , 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..

Slide 144

Slide 144 text

Canvas

Slide 145

Slide 145 text

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.

Slide 146

Slide 146 text

WebSocket

Slide 147

Slide 147 text

WebGL

Slide 148

Slide 148 text

XHTML5 is an XML serialization of HTML5

Slide 149

Slide 149 text

2008 PhoneGap Released Build native mobile apps using Web technologies a.k.a. Apache Cordova (sort of)

Slide 150

Slide 150 text

ECMAScript 4 fiasco 2008 Political differences, mostly between Adobe and Microsoft

Slide 151

Slide 151 text

ActionScript 3 inherited quite a lot from ECMAScript 4

Slide 152

Slide 152 text

“Harmony” comes to JS 2008

Slide 153

Slide 153 text

May 2008 JavaScript: The Good Parts published

Slide 154

Slide 154 text

"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

Slide 155

Slide 155 text

"In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders." Douglas Crockford

Slide 156

Slide 156 text

JavaScript: The Good Parts Functions, loose typing, dynamic objects, expressive object literal notation (JSON was extracted from this)

Slide 157

Slide 157 text

JavaScript: The Bad Parts Global variables, scope (function not block), automatic semicolon insertion (ASI), reserved words, Unicode support, typeof, parseInt, +, floating point, NaN, arrays..

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

ECMAScript 5 (ES5) standard released 2009 getters, setters, better reflection, standardized some quirks, strict mode

Slide 160

Slide 160 text

Strict mode is a restricted variant of JS with different semantics. Some things that didn’t cause errors now do.

Slide 161

Slide 161 text

“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..!

Slide 162

Slide 162 text

2009

Slide 163

Slide 163 text

System overlaying Google’s V8 JavaScript engine Server-side JavaScript (again!) Ideal for building Internet services Non-blocking, event-driven I/O

Slide 164

Slide 164 text

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/');

Slide 165

Slide 165 text

2009 First JSConf 130 people in 2009 Now exist worldwide.. Europe Argentina Australia

Slide 166

Slide 166 text

September 2009 W3C starts work on CSS4 subject selectors, :matches() pseudo-class, :local-link, more pseudo-classes

Slide 167

Slide 167 text

W3C starts work on CSS4 section h1, article h1, aside h1 { font-size: 10em; } :matches(section, article, aside) h1 { font-size: 10em; }

Slide 168

Slide 168 text

September 2009 Google Chrome Frame Sends IE on a Chrome trip

Slide 169

Slide 169 text

A language that compiles to JavaScript. December 2009 0.1.0

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

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..)

Slide 172

Slide 172 text

December 2010 1.0

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

No content

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

2010 First JS1K

Slide 177

Slide 177 text

2010 Backbone.js Released

Slide 178

Slide 178 text

2010 Joyent sponsors Node.js

Slide 179

Slide 179 text

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.

Slide 180

Slide 180 text

JavaScript overtakes Ruby to become the #1 most popular language on GitHub. December 2010

Slide 181

Slide 181 text

Google’s V8 gets “Crankshaft” Big performance improvements December 2010 Aggressive optimizations in compilation + faster start-up times

Slide 182

Slide 182 text

2011 Chrome 9 and Firefox 4 bring WebGL support to the masses

Slide 183

Slide 183 text

March 2011 WebGL 1.0 spec finalized

Slide 184

Slide 184 text

April 2011 Internet Explorer 10 Platform Preview Still no WebGL Much better CSS3 and HTML5 support Hardware accelerated Canvas Big JS performance improvements

Slide 185

Slide 185 text

April 2011 Emscripten LLVM to JavaScript compiler by Alon Zakai (Mozilla) A way to compile C/C++ to JavaScript

Slide 186

Slide 186 text

May 2011 JSLinux

Slide 187

Slide 187 text

ES 5.1 Spec Ratified July 2011

Slide 188

Slide 188 text

pdf.js’ pixel perfect rendering milestone July 2011

Slide 189

Slide 189 text

2011 Google Dart

Slide 190

Slide 190 text

Goal is to "ultimately replace JavaScript as the lingua franca of Web development on the open Web platform"

Slide 191

Slide 191 text

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

Slide 192

Slide 192 text

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.

Slide 193

Slide 193 text

November 2011 Adobe announces discontinuation of Flash for mobile - will focus on HTML5

Slide 194

Slide 194 text

November 2011 jQuery Mobile 1.0 Released

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

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)

Slide 197

Slide 197 text

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..

Slide 198

Slide 198 text

npm registry hits 10,000 packages May 2012

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

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

Slide 201

Slide 201 text

May 2012 First BackboneConf

Slide 202

Slide 202 text

Target for the release of the ES6 standard December 2013

Slide 203

Slide 203 text

2014 Target for HTML5 to get W3C Recommendation status

Slide 204

Slide 204 text

No content