Slide 1

Slide 1 text

History of
 JavaScript Radoslav Stankov 15/09/2018

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

1993 Mosaic 1995 Internet Explorer 1994 Netscape JavaScript 1996 JScript CSS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

URL Fetch Cache Parse Tree Paint Flow

Slide 11

Slide 11 text

Slide 12

Slide 12 text

loading...

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

"...Eich wrote one in 10 days, in May 1995..." 
 https://en.wikipedia.org/wiki/JavaScript


Slide 20

Slide 20 text

Scheme Self +

Slide 21

Slide 21 text

Scheme Self LiveScript +

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Scheme Self LiveScript +

Slide 24

Slide 24 text

Scheme Self LiveScript + Java +

Slide 25

Slide 25 text

Scheme Self LiveScript + Java + JavaScript

Slide 26

Slide 26 text

Paint Flow Event Script 
 (event loop)


Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 !

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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


Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Page title

Content

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Scheme Self LiveScript + Java + JavaScript ECMAScript

Slide 51

Slide 51 text


 https://en.wikipedia.org/wiki/Ecma_International
 "Ecma (European Computer Manufacturers Association) is a standards organization for information and communication systems."

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Microsoft Netscape W3C

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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


Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Object.keys Object.values Object.extend
 Object.isArray Object.isObject Object.isDate Object.isFunction Object.isString Object.isNumber

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

$(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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

Webkit + Chrome V8 + Auto updates = -

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

Model <> View

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

Model <> Router <>View

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

npm install express

Slide 150

Slide 150 text

var Express = require('express');

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text


 https://reactjs.org/


Slide 159

Slide 159 text

class HelloMessage extends React.Component { render() { return (
Hello {this.props.name}
); } } ReactDOM.render( , mountNode );

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text


 https://graphql.org/


Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text


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

Slide 167

Slide 167 text


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

Slide 168

Slide 168 text


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

Slide 169

Slide 169 text

No content

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

Thanks 0