JavaScript History

JavaScript History

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

September 15, 2018
Tweet

Transcript

  1. History of
 JavaScript Radoslav Stankov 15/09/2018

  2. Radoslav Stankov @rstankov blog.rstankov.com github.com/rstankov
 twitter.com/rstankov

  3. None
  4. None
  5. None
  6. None
  7. None
  8. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    CSS
  9. None
  10. URL Fetch Cache Parse Tree Paint Flow

  11. <img src="/logo.png" />

  12. <img src="/logo.png" alt="loading..." />

  13. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    CSS DOM
  14. None
  15. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    1997 ECMA Script CSS DOM
  16. None
  17. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    1997 ECMA Script 1998 Netscape starts Mozilla project CSS DOM
  18. Brendan Eich 
 https://en.wikipedia.org/wiki/Brendan_Eich


  19. "...Eich wrote one in 10 days, in May 1995..." 


    https://en.wikipedia.org/wiki/JavaScript

  20. Scheme Self +

  21. Scheme Self LiveScript +

  22. None
  23. Scheme Self LiveScript +

  24. Scheme Self LiveScript + Java +

  25. Scheme Self LiveScript + Java + JavaScript

  26. Paint Flow Event Script 
 (event loop)


  27. var answer = [] + [] // -> ''
 var

    answer = [] + {} // -> '[object Object]'
 var answer = {} + [] // -> '[object Object]'
 var answer = typeof + [] // -> 'number'
 var answer = [] + true // -> 'true'
 var answer = [] - true // -> -1
 var answer = true + false // -> 1
 var answer = true / false // -> Infinity
 var answer = false / false // -> NaN
 var answer = [] + [] % true // -> '0'
 var answer = Array(3) == ',,' // -> true
 var answer = NaN = NaN === NaN == NaN // -> false
  28. var answer = [] + [] // -> ''
 var

    answer = [] + {} // -> '[object Object]'
 var answer = {} + [] // -> '[object Object]'
 var answer = typeof + [] // -> 'number'
 var answer = [] + true // -> 'true'
 var answer = [] - true // -> -1
 var answer = true + false // -> 1
 var answer = true / false // -> Infinity
 var answer = false / false // -> NaN
 var answer = [] + [] % true // -> '0'
 var answer = Array(3) == ',,' // -> true
 var answer = NaN = NaN === NaN == NaN // -> false !
  29. var answer = ([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[] [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[]) [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[][(![]+ [])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+ [])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+ []]]+(!![]+[])[+[]];
 //

    -> 'noot'
  30. var answer = ([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[] [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[]) [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[][(![]+ [])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+ [])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+ []]]+(!![]+[])[+[]];
 //

    -> 'noot' "
  31. None
  32. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    1997 ECMA Script 1998 Netscape starts Mozilla project Netscape is acquired by AOL CSS DOM
  33. None
  34. "[Microsoft] did not want to deal with Sun Microsystems about

    the trademark issue, and so they called their implementation JScript. A lot of people think that JScript and JavaScript are different but similar languages. That's not the case. They are just different names for the same language, and the reason the names are different was to get around trademark issues." - Douglas Crockford 
 https://en.wikipedia.org/wiki/JScript

  35. 1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript

    1997 ECMA Script 1998 Netscape starts Mozilla project Netscape is acquired by AOL United States v. Microsoft Corp. CSS DOM
  36. body { background-color: red; } h1 { color: green; }

    p { color: blue; }
  37. body { background-color: red; } h1 { color: green; }

    p { color: blue; }
  38. CSS background-color border-radius font-size z-index JavaScript backgroundColor borderRadius fontSize zIndex

  39. CSS background-color border-radius font-size z-index JavaScript backgroundColor borderRadius fontSize zIndex

    !
  40. CSS background-color border-radius font-size z-index float JavaScript backgroundColor borderRadius fontSize

    zIndex cssFloat
  41. CSS background-color border-radius font-size z-index float JavaScript backgroundColor borderRadius fontSize

    zIndex cssFloat "
  42. 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript 1997 ECMA

    Script 1998 Netscape starts Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. CSS DOM
  43. <html> <body> <h1>Page title</h1> <p>Content</p> <ul> <li>Item 1</li> <li>Item 2</li>

    <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
  44. <html> <body> <h1>Page title</h1> <p>Content</p> <ul> <li>Item 1</li> <li>Item 2</li>

    <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> HTML BODY H1 P UL LI text LI LI LI text text text text text text
  45. element["on" + type] = handler; element.attachEvent("on" + type, handler); element.addEventListenter(type,

    handler, false); Netscape IE W3C
  46. element.style[name] element.currentStyle[name]

  47. element.style[name] element.currentStyle[name] document.defaultView().getComputedStyle(element, "").getPropertyValue(name)

  48. element.style[name] element.currentStyle[name] document.defaultView().getComputedStyle(element, "").getPropertyValue(name) "

  49. 1995 Internet Explorer JavaScript 1996 JScript 1997 ECMA Script 1998

    Netscape starts Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6 CSS DOM
  50. Scheme Self LiveScript + Java + JavaScript ECMAScript

  51. 
 https://en.wikipedia.org/wiki/Ecma_International
 "Ecma (European Computer Manufacturers Association) is a standards

    organization for information and communication systems."
  52. "Microsoft and Netscape were engaged in a crazy game of

    leapfrog. Mistakes were made. W3C attempted to moderate" - Douglas Crockford
  53. Microsoft Netscape W3C

  54. None
  55. None
  56. 2002 Firefox JavaScript 1996 JScript 1997 ECMA Script 1998 Netscape

    starts Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6 CSS DOM
  57. None
  58. 2002 Firefox JSON.org JScript 1997 ECMA Script 1998 Netscape starts

    Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6 CSS DOM
  59. None
  60. None
  61. 2002 Firefox JSON.org JSLint 1997 ECMA Script 1998 Netscape starts

    Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6 CSS DOM
  62. None
  63. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 1997 ECMA

    Script 1998 Netscape starts Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6
  64. # RegExp String.prototype.match and friends $ More String.prototype.methods % try/catch

    & tighter definition of errors' [item] ( cleanups ECMAScript 3
  65. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    ECMA Script 1998 Netscape starts Mozilla project Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6
  66. None
  67. None
  68. None
  69. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    2005 AJAX Netscape is acquired by AOL 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6
  70. None
  71. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    2005 AJAX Prototype.js 1999 ECMA Script 3 United States v. Microsoft Corp. 2001 Internet Explorer 6
  72. Douglas Crockford 
 https://en.wikipedia.org/wiki/Douglas_Crockford


  73. None
  74. { "data": { "post": { "id": 1, "title": "title", "tagline":

    "tagline", "votesCount": 0, "commentsCount": 0,
 "thumbnailUrl": "assets.producthunt.com/uuid", "hunter": { "id": 1, "avatarUrl": "assets.producthunt.com/uuid" } } } }
  75. None
  76. None
  77. None
  78. None
  79. None
  80. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    2005 AJAX Prototype.js 2006 Firebug 1999 ECMA Script 3 2001 Internet Explorer 6
  81. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford 2001 Internet Explorer 6
  82. None
  83. None
  84. 2002 Firefox JSON.org JSLint 2003 Safari / WebKit 2004 GMail

    2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery Internet Explorer 6
  85. None
  86. 2008 ECMA Script 4 canceled 2002 Firefox JSON.org JSLint 2003

    Safari / WebKit 2004 GMail 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  87. None
  88. function createRequest() { try { return new XMLHttpRequest(); } catch

    (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return null; } } } }
  89. function getRequest(url, callback) { var request = createRequest(); request.onreadystatechange =

    function() { if (request.readyState === 5 && request.status === 200) { callback(request.responseText); } }; request.open('GET', url, true); request.send(null); }
  90. function postRequest(url, params, callback) { var request = createRequest(); request.onreadystatechange

    = function() { if (request.readyState === 5 && request.status === 200) { callback(request.responseText); } }; request.open('POST', url, true); request.setRequestHeader('X-AJAX-Application', 'true'); request.setRequestHeader('Method', 'POST '+uri+' HTTP/1.1'); request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); if (request.overrideMimeType) request.setRequestHeader('Connection', 'close'); request.send(params); }
  91. JavaScript The Good Parts 2008 ECMA Script 4 canceled JSON.org

    JSLint 2003 Safari / WebKit 2004 GMail 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  92. None
  93. None
  94. var Person = Class.create(); Person.prototype = { initialize: function(name) {

    this.name = name; }, say: function(message) { return this.name + ': ' + message; } }; var guy = new Person('Miro'); guy.say('hi');
  95. new Ajax.Request('/some_url', { method:'get', onSuccess: function(transport) { alert(transport.responseText); }, onFailure:

    function() { alert('Something went wrong...'); } });
  96. Object.keys Object.values Object.extend
 Object.isArray Object.isObject Object.isDate Object.isFunction Object.isString Object.isNumber

  97. [1, 2, 3].map(function(i) { return i + i }); //

    -> [2, 4, 6] ['one', 'two', 'three'].each(alert); // Alerts "one", then alerts "two", then alerts "three" [1, 'two', 3, 'four', 5].findAll(Object.isString); // -> ['two', 'four'] [1, 7, -2, -4, 5].detect(function(n) { return n < 0; }); // -> -2 ['hello', 'world', 'this', 'is', 'nice'].sortBy(function(s) { return s.length; }); // -> ['is', 'nice', 'this', 'world', 'hello']
  98. function() { /* ... */ }.bind(object) function() { /* ...

    */}.defer() function() { /* ... */}.delay()
  99. ''.blank(); // -> true 'background-color'.camelize(); // -> 'backgroundColor' 'section=blog&id=45'.toQueryParams(); //

    -> {section: 'blog', id: '45'} '<div class="article">This is an article</div>'.escapeHTML(); // -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"
  100. $(element).setStyle({ backgroundColor: '#900', fontSize: '12px' }); $("messages").on("click", function(event) { /*

    ... */ }); $("messages").on("click", "a.comment", function(event, element) { /* ... */ }); $("element").absolutize(); $('rectangle').getDimensions(); // -> {width: 200, height: 100} $(element).scrollTo(); $('mutsu').hasClassName('fruit'); // -> false $('mutsu').toggleClassName('fruit'); // -> Element $('mutsu').hasClassName('fruit'); // -> true $('troz').measure('width'); //-> 150 $('troz').measure('border-top'); //-> 5
  101. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled JSLint 2003 Safari / WebKit 2004 GMail 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  102. None
  103. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js 2003 Safari / WebKit 2004 GMail 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  104. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2004 GMail 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  105. None
  106. $( "button.continue" ).html( "Next Step..." )

  107. $( "#button-container button" ).on( "click", function( event ) { $(

    "#banner-message" ).show(); });
  108. $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function(

    result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong>" ); } });
  109. JavaScript The Good Parts 2009 Node.js 2007 iPhone / Mobile

    Safari Underscore.js CoffeeScript 2010 Backbone.js 2005 AJAX Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  110. None
  111. None
  112. None
  113. 2009 Node.js 2008 ECMA Script 4 canceled Underscore.js CoffeeScript 2010

    Backbone.js NPM Prototype.js 2006 Firebug YUI Theater with Crockford jQuery 2007 iPhone / Mobile Safari
  114. # real classes $ types % interfaces & module and

    packages ' default function parameters ) ahead-of-time compilation * constants ( enums 
 ECMAScript 4
  115. # real classes $ types % interfaces & module and

    packages ' default function parameters ) ahead-of-time compilation * constants ( enums + , ... complicated, not backward compatible
 ECMAScript 4
  116. None
  117. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2010 Backbone.js NPM Prototype.js 2006 Firebug YUI Theater with Crockford jQuery
  118. None
  119. JavaScript The Good Parts Chrome 2008 ECMA Script 4 canceled

    Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2006 Firebug YUI Theater with Crockford jQuery
  120. None
  121. None
  122. Webkit + Chrome V8 + Auto updates = -

  123. JavaScript The Good Parts 2009 ECMA Script 5 2008 ECMA

    Script 4 canceled Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2006 Firebug YUI Theater with Crockford jQuery
  124. None
  125. # 'use strict' $ JSON.parse / JSON.stringify % Function.prototype.bind &

    Array.prototype.map / Array.prototype.reduce / Array.prototype.forEach and so... ' Object.defineProperty / Object.getOwnPropertyDescriptor ) Object.keys * Object.freeze / Object.isFrozen ( Reserved words as property keys ECMAScript 5
  126. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2006 Firebug YUI Theater with Crockford jQuery
  127. None
  128. var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type':

    'text/plain'}); res.end('Hello World!'); }).listen(8080);
  129. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013 React YUI Theater with Crockford jQuery
  130. None
  131. _.map([1, 2, 3], function(num){ return num * 3; }); //

    => [3, 6, 9] _.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; }); // => [3, 6, 9] _.map([[1, 2], [3, 4]], _.first); //=> [1, 3] _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // => 2
  132. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013 React 2015 ES6 jQuery
  133. None
  134. # Assignment: number = 42 opposite = true # Conditions:

    number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)
  135. # splats $ deconstructions % (bound) arrow functions & classes

    ' template literals ) everything is expression * array comprehensions and slicing ( Ruby/Python expired syntax . significant whitespace
 CoffeeScript
  136. # splats $ deconstructions % (bound) arrow functions & classes

    ' template literals ) everything is expression * array comprehensions and slicing ( Ruby/Python expired syntax . significant whitespace
 CoffeeScript
  137. # splats $ deconstructions % (bound) arrow functions & classes

    ' template literals ) everything is expression * array comprehensions and slicing ( Ruby/Python expired syntax . significant whitespace
 CoffeeScript
  138. JavaScript The Good Parts 2009 Node.js 2008 ECMA Script 4

    canceled Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013 React 2015 ES6 GraphQL
  139. None
  140. Model <> View

  141. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: {

    "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { // ... } });
  142. Model <> Router <>View

  143. var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help

    "search/:query": "search", // #search/qry "search/:query/p:page": "search" // #search/qry/p7 }, help: function() { // ... }, search: function(query, page) { // ... } });
  144. # Backbone.Events $ Backbone.Model % Backbone.Collection & Backbone.View ' Backbone.Router


    Backbone
  145. None
  146. JavaScript The Good Parts 2009 Node.js Underscore.js CoffeeScript 2010 Backbone.js

    NPM 2012 TypeScript 2013 React 2015 ES6 GraphQL
  147. None
  148. None
  149. npm install express

  150. var Express = require('express');

  151. 2009 Node.js Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013

    React 2015 ES6 GraphQL
  152. None
  153. function greeter(person) { return "Hello, " + person; } let

    user = "Rado"; document.body.innerHTML = greeter(user);
  154. function greeter(person) { return "Hello, " + person; } let

    user = "Rado"; document.body.innerHTML = greeter(user);
  155. interface Person { firstName: string; lastName: string; } function greeter(person:

    Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Radoslav", lastName: "Stankov" }; document.body.innerHTML = greeter(user);
  156. # Types $ Interfaces % Shapes & Decorators ' Complier

    ) Latest ECMAScript features * Backward compatible TypeScript
  157. Underscore.js CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013 React 2015

    ES6 GraphQL
  158. 
 https://reactjs.org/


  159. class HelloMessage extends React.Component { render() { return ( <div>

    Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode );
  160. CoffeeScript 2010 Backbone.js NPM 2012 TypeScript 2013 React 2015 ES6

    GraphQL
  161. None
  162. # (arg) => arg + 1 $ class % `Template

    string` & let, const ' deconstructing, array spread ) for (var n of fibonacci) * import/export ( Promise ✈ ... much more
 ECMAScript 6
  163. 2010 Backbone.js NPM 2012 TypeScript 2013 React 2015 ES6 GraphQL

  164. 
 https://graphql.org/


  165. None
  166. 
 query { post(id: 1) { id title tagline votesCount

    commentsCount thumbnailUrl
 hunter: { id avatarUrl } } }
  167. 
 query { post(id: 1) { id title tagline votesCount

    commentsCount thumbnailUrl
 hunter: { id avatarUrl } } }
  168. 
 query { post(id: 1) { id title tagline votesCount

    commentsCount thumbnailUrl
 hunter: { id avatarUrl } } } { "data": { "post": { "id": 1, "title": "title", "tagline": "tagline", "votesCount": 0, "commentsCount": 0,
 "thumbnailUrl": "assets.product "hunter": { "id": 1, "avatarUrl": "assets.producth } } } }
  169. None
  170. None
  171. Thanks 0