JavaScript History

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