$30 off During Our Annual Pro Sale. View Details »

JavaScript History

JavaScript History

Radoslav Stankov

September 15, 2018
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. History
    of

    JavaScript
    Radoslav Stankov 15/09/2018

    View Slide

  2. Radoslav Stankov
    @rstankov

    blog.rstankov.com

    github.com/rstankov

    twitter.com/rstankov

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. 1993 Mosaic
    1995 Internet Explorer
    1994 Netscape
    JavaScript
    1996 JScript
    CSS

    View Slide

  9. View Slide

  10. URL Fetch Cache Parse Tree Paint
    Flow

    View Slide


  11. View Slide


  12. View Slide

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

    View Slide

  14. View Slide

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

    View Slide

  16. View Slide

  17. 1993 Mosaic
    1995 Internet Explorer
    1994 Netscape
    JavaScript
    1996 JScript
    1997 ECMA Script
    1998 Netscape starts Mozilla project
    CSS
    DOM

    View Slide

  18. Brendan Eich

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


    View Slide

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

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


    View Slide

  20. Scheme Self
    +

    View Slide

  21. Scheme Self LiveScript
    +

    View Slide

  22. View Slide

  23. Scheme Self LiveScript
    +

    View Slide

  24. Scheme Self LiveScript
    + Java
    +

    View Slide

  25. Scheme Self LiveScript
    + Java
    + JavaScript

    View Slide

  26. Paint
    Flow
    Event
    Script

    (event loop)


    View Slide

  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

    View Slide

  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
    !

    View Slide

  29. var answer = ([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[]
    [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[][(![]+
    [])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+
    [])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+
    []]]+(!![]+[])[+[]];

    // -> 'noot'

    View Slide

  30. var answer = ([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[]
    [[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])
    [!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[][(![]+
    [])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+
    [])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+
    []]]+(!![]+[])[+[]];

    // -> 'noot'
    "

    View Slide

  31. View Slide

  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

    View Slide

  33. View Slide

  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


    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide



  43. Page title
    Content

    Item 1
    Item 2
    Item 3
    Item 4



    View Slide



  44. Page title
    Content

    Item 1
    Item 2
    Item 3
    Item 4



    HTML
    BODY
    H1
    P
    UL
    LI
    text
    LI
    LI
    LI
    text
    text
    text
    text
    text
    text

    View Slide

  45. element["on" + type] = handler;
    element.attachEvent("on" + type, handler);
    element.addEventListenter(type, handler, false);
    Netscape
    IE
    W3C

    View Slide

  46. element.style[name]
    element.currentStyle[name]

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  50. Scheme Self LiveScript
    + Java
    + JavaScript
    ECMAScript

    View Slide


  51. https://en.wikipedia.org/wiki/Ecma_International

    "Ecma (European Computer Manufacturers Association)
    is
    a standards organization for
    information and communication systems."

    View Slide

  52. "Microsoft and Netscape were engaged in a crazy game of leapfrog.
    Mistakes were made.
    W3C attempted to moderate"
    - Douglas Crockford

    View Slide

  53. Microsoft Netscape
    W3C

    View Slide

  54. View Slide

  55. View Slide

  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

    View Slide

  57. View Slide

  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

    View Slide

  59. View Slide

  60. View Slide

  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

    View Slide

  62. View Slide

  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

    View Slide

  64. # RegExp String.prototype.match and friends
    $ More String.prototype.methods
    % try/catch
    & tighter definition of errors' [item]
    ( cleanups
    ECMAScript 3

    View Slide

  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

    View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  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

    View Slide

  70. View Slide

  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

    View Slide

  72. Douglas Crockford

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


    View Slide

  73. View Slide

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

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  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

    View Slide

  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

    View Slide

  82. View Slide

  83. View Slide

  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

    View Slide

  85. View Slide

  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

    View Slide

  87. View Slide

  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;
    }
    }
    }
    }

    View Slide

  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);
    }

    View Slide

  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);
    }

    View Slide

  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

    View Slide

  92. View Slide

  93. View Slide

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

    View Slide

  95. new Ajax.Request('/some_url', {
    method:'get',
    onSuccess: function(transport) {
    alert(transport.responseText);
    },
    onFailure: function() {
    alert('Something went wrong...');
    }
    });

    View Slide

  96. Object.keys
    Object.values
    Object.extend

    Object.isArray
    Object.isObject
    Object.isDate
    Object.isFunction
    Object.isString
    Object.isNumber

    View Slide

  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']

    View Slide

  98. function() { /* ... */ }.bind(object)
    function() { /* ... */}.defer()
    function() { /* ... */}.delay()

    View Slide

  99. ''.blank();
    // -> true
    'background-color'.camelize();
    // -> 'backgroundColor'
    'section=blog&id=45'.toQueryParams();
    // -> {section: 'blog', id: '45'}
    'This is an article'.escapeHTML();
    // -> "<div class="article">This is an article</div>"

    View Slide

  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

    View Slide

  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

    View Slide

  102. View Slide

  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

    View Slide

  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

    View Slide

  105. View Slide

  106. $( "button.continue" ).html( "Next Step..." )

    View Slide

  107. $( "#button-container button" ).on( "click", function( event ) {
    $( "#banner-message" ).show();
    });

    View Slide

  108. $.ajax({
    url: "/api/getWeather",
    data: {
    zipcode: 97201
    },
    success: function( result ) {
    $( "#weather-temp" ).html( "" + result + "" );
    }
    });

    View Slide

  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

    View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  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

    View Slide

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

    ECMAScript 4

    View Slide

  115. # real classes
    $ types
    % interfaces
    & module and packages
    ' default function parameters
    ) ahead-of-time compilation
    * constants
    ( enums
    + , ... complicated, not backward compatible

    ECMAScript 4

    View Slide

  116. View Slide

  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

    View Slide

  118. View Slide

  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

    View Slide

  120. View Slide

  121. View Slide

  122. Webkit
    +
    Chrome V8
    +
    Auto updates
    =
    -

    View Slide

  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

    View Slide

  124. View Slide

  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

    View Slide

  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

    View Slide

  127. View Slide

  128. var http = require('http');
    http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
    }).listen(8080);

    View Slide

  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

    View Slide

  130. View Slide

  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

    View Slide

  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

    View Slide

  133. View Slide

  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)

    View Slide

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

    CoffeeScript

    View Slide

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

    CoffeeScript

    View Slide

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

    CoffeeScript

    View Slide

  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

    View Slide

  139. View Slide

  140. Model <> View

    View Slide

  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() {
    // ...
    }
    });

    View Slide

  142. Model <> Router <>View

    View Slide

  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) {
    // ...
    }
    });

    View Slide

  144. # Backbone.Events
    $ Backbone.Model
    % Backbone.Collection
    & Backbone.View
    ' Backbone.Router

    Backbone

    View Slide

  145. View Slide

  146. JavaScript The Good Parts
    2009 Node.js
    Underscore.js
    CoffeeScript
    2010 Backbone.js
    NPM
    2012 TypeScript
    2013 React
    2015 ES6
    GraphQL

    View Slide

  147. View Slide

  148. View Slide

  149. npm install express

    View Slide

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

    View Slide

  151. 2009 Node.js
    Underscore.js
    CoffeeScript
    2010 Backbone.js
    NPM
    2012 TypeScript
    2013 React
    2015 ES6
    GraphQL

    View Slide

  152. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  156. # Types
    $ Interfaces
    % Shapes
    & Decorators
    ' Complier
    ) Latest ECMAScript features
    * Backward compatible
    TypeScript

    View Slide

  157. Underscore.js
    CoffeeScript
    2010 Backbone.js
    NPM
    2012 TypeScript
    2013 React
    2015 ES6
    GraphQL

    View Slide


  158. https://reactjs.org/


    View Slide

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

    Hello {this.props.name}

    );
    }
    }
    ReactDOM.render(
    ,
    mountNode
    );

    View Slide

  160. CoffeeScript
    2010 Backbone.js
    NPM
    2012 TypeScript
    2013 React
    2015 ES6
    GraphQL

    View Slide

  161. View Slide

  162. # (arg) => arg + 1
    $ class
    % `Template string`
    & let, const
    ' deconstructing, array spread
    ) for (var n of fibonacci)
    * import/export
    ( Promise
    ✈ ... much more

    ECMAScript 6

    View Slide

  163. 2010 Backbone.js
    NPM
    2012 TypeScript
    2013 React
    2015 ES6
    GraphQL

    View Slide


  164. https://graphql.org/


    View Slide

  165. View Slide


  166. query {
    post(id: 1) {
    id
    title
    tagline
    votesCount
    commentsCount
    thumbnailUrl

    hunter: {
    id
    avatarUrl
    }
    }
    }

    View Slide


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

    hunter: {
    id
    avatarUrl
    }
    }
    }

    View Slide


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

    View Slide

  169. View Slide

  170. View Slide

  171. Thanks 0

    View Slide