'

Javascript State of the Union 2015

Понравилась презентация – покажи это...





Слайд 0

September 26th, 2015


Слайд 1

September 26th, 2015 Javascript State of the Union Huge


Слайд 2

Agenda 1. Introduction
 2. Where we came from
 3. Where we are
 4. Where we are going to 5. Conclusion


Слайд 3

Introduction.


Слайд 4

Caio Vaccaro. Senior Web Engineer | Huge. Developer Team Lead. NY / RIO. 8 years of experience. 
 Front-End, Back-End, Infrastructure, Continuous integration, trainings. @caiovaccaro /in/caiovaccaro /caiovaccaro


Слайд 5


Слайд 6


Слайд 7

We make digital products.


Слайд 8

State of the Union.


Слайд 9


Слайд 10


 Introduction: 1. Why so many changes? 2. What changed? 3. What doesn’t change?


Слайд 11

Introduction Timeline.


Слайд 12


 Timeline: 1. Imperative Languages. 2. Functional Languages.
 3. Computers and gadgets.
 4. Processors. 5. Companies. 6. Internet and browsers. 7. HTML/CSS/JS. 8. JS Frameworks.


Слайд 13


 Timeline: 1. Imperative Languages. 2. Functional Languages.
 3. Computers and gadgets.
 4. Processors. 5. Companies. 6. Internet and browsers. 7. HTML/CSS/JS. 8. JS Frameworks.


Слайд 14

Where we came from.


Слайд 15

1950.


Слайд 16

1950 Fortran Fortran (Imperativa) (Imperative)


Слайд 17

1950 Fortran Fortran (Imperativa) (Imperative) Computer Computador


Слайд 18

1950 Fortran Fortran (Imperativa) (Imperative) Lisp Lisp (Funcional) (Functional) Computer Computador


Слайд 19


Слайд 20

1950 Fortran Fortran (Imperativa) (Imperative) Lisp Lisp (Funcional) (Functional) Computer Computador IBM


Слайд 21

Programming paradigms
 1. Imperative. 2. Functional. 3. Reactive. 4. Object oriented. 5. Event oriented. …


Слайд 22

1950 Fortran Fortran (Imperativa) (Imperative) Lisp Lisp (Funcional) (Functional) Computer Computador IBM


Слайд 23

1950 Fortran Fortran (Imperativa) (Imperative) Lisp Lisp (Funcional) (Functional)


Слайд 24

1950 Fortran Fortran (Imperativa) (Imperative) Algol Lisp Lisp (Funcional) (Functional)


Слайд 25

1970.


Слайд 26

1950 1970 Fortran Algol Lisp M.P.P


Слайд 27

1950 1970 Fortran Algol Lisp M.P.P


Слайд 28

1950 1970 Fortran Smalltalk (MVC, OOP) Algol Lisp M.P.P IBM Xerox & Apple


Слайд 29


Слайд 30

1950 1970 Fortran Smalltalk (MVC, OOP) Algol Lisp M.P.P


Слайд 31

Software architecture
 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …


Слайд 32

1950 1970 Fortran Smalltalk (MVC, OOP) Algol Lisp M.P.P


Слайд 33

1950 1970 Fortran Smalltalk (MVC, OOP) Algol C Lisp C++ Scheme Haskell M.P.P


Слайд 34

1950 1970 Fortran Smalltalk (MVC, OOP) Algol C Lisp C++ Scheme Haskell Concorrência Concurrency M.P.P 386 HTML


Слайд 35

1990.


Слайд 36

1950 1970 Fortran Smalltalk (MVC, OOP) Algol C Lisp C++ Scheme Haskell Concorrência Concurrency M.P.P 386 HTML


Слайд 37

1990 OOP) me Haskell Concorrência Concurrency 386 HTML


Слайд 38

1990 OOP) Ruby Python Concorrência Concurrency Java (Binding) PHP Pentium II Athlon Pentium 386 AMD Altavista W3C Yahoo eBay/ Amazon


Слайд 39

1990 Concorrência Concurrency l Athlon AMD SMTP IRC Ruby Python Pentium 386 www Java (Binding) PHP Pentium II Altavista W3C Yahoo eBay/ Amazon


Слайд 40

1990 Concorrência Concurrency l Pentium 386 AMD SMTP HTML IRC Ruby Python Athlon Java (Binding) PHP Pentium II Altavista W3C Yahoo eBay/ Amazon www HTML2 CSS


Слайд 41

1990 Concorrência Concurrency l 386 Ruby Python Athlon Java (Binding) PHP Pentium II Pentium Apache SMTP HTML IRC www Netscape HTML2 CSS Javascript


Слайд 42

1990 Concorrência Concurrency l 386 Ruby Python Athlon Java (Binding) PHP Pentium II Pentium Apache SMTP HTML IRC www Netscape HTML2 CSS IE Javascript


Слайд 43

2000.


Слайд 44

1990 Concorrência Concurrency l 386 Ruby Python Athlon Java (Binding) PHP Pentium II Pentium Apache SMTP HTML IRC www Netscape HTML2 CSS IE Javascript


Слайд 45

by Java (Binding) PHP Pentium II ache IE avascript 2000


Слайд 46

by Java (Binding) 2000 PHP Pentium II ache IE avascript ... IE7


Слайд 47

by Java (Binding) 2000 PHP Pentium II Altavista W3C hoo eBay/ ache Amazon IE avascript Google ... IE7 Ajax JSON XHTML


Слайд 48

by Java (Binding) 2000 PHP Pentium II Pentium III Altavista W3C hoo eBay/ ache Amazon IE avascript Pentium 4 Hotmail Google ... Wikipedia Netflix IE7 Ajax JSON XHTML


Слайд 49

“Front-end” was almost declarative.


Слайд 50


Слайд 51


Слайд 52


Слайд 53

Pentium II 2000 Pentium III Altavista W3C hoo eBay/ ache Amazon IE avascript Pentium 4 Hotmail Google ... Wikipedia Netflix IE7 Ajax JSON XHTML


Слайд 54

2000 ndows 3.1 Pentium II Altavista W3C hoo eBay/ ache Amazon avascript iMac I Laptops Pentium III Pentium 4 Hotmail Google ... Ajax Wikipedia Netflix IE7 JSON XHTML


Слайд 55

2000 ndows 3.1 Pentium II Altavista W3C hoo eBay/ ache Amazon avascript iMac I Laptops Dual core Pentium III Pentium 4 Quad core Hotmail Google ... Ajax Wikipedia Netflix IE7 JSON XHTML


Слайд 56

2000 ndows 3.1 Pentium II Altavista W3C hoo eBay/ ache Amazon avascript iMac I Laptops Dual core Pentium III Pentium 4 Quad core Hotmail Google ... Ajax Wikipedia Netflix Firefox IE7 JSON XHTML Chrome


Слайд 57

2000 Mac I Laptops Dual core Pentium III Pentium 4 Quad core Hotmail Google ... Ajax Wikipedia Netflix Firefox IE7 JSON XHTML Chrome


Слайд 58

2000 Dual core Pentium III Pentium 4 Quad core Hotmail Google ... Ajax Wikipedia Netflix Firefox IE7 Chrome JSON XHTML Prototype.js Dojo


Слайд 59


Слайд 60

2000 Dual core Pentium III Pentium 4 Quad core Hotmail Google ... Ajax Wikipedia Netflix Firefox IE7 Chrome JSON XHTML Prototype.js Dojo


Слайд 61

2000 Dual core Pentium III Pentium 4 Quad core Gmail Hotmail Google ... Ajax Wikipedia Facebook Netflix Firefox IE7 Chrome JSON XHTML Prototype.js Dojo


Слайд 62

2000 Dual core Pentium III Pentium 4 Quad core Gmail Hotmail Google ... Ajax Wikipedia Facebook Netflix Firefox IE7 IE8 Chrome Ajax boom RESTful JSON XHTML ECMA5 Prototype.js Dojo


Слайд 63

How was the code back then?


Слайд 64


Слайд 65


Слайд 66


Слайд 67


Слайд 68


Слайд 69


Слайд 70


Слайд 71

2000 Dual core Pentium III Pentium 4 Quad core Gmail Hotmail Google ... Ajax Wikipedia Facebook Netflix Firefox IE7 IE8 Chrome Ajax boom RESTful JSON XHTML ECMA5 Prototype.js Dojo


Слайд 72

2000 va nding) Node Firefox ... Ajax IE7 IE8 Chrome Ajax boom RESTful JSON XHTML ECMA5 Prototype.js Dojo


Слайд 73


Слайд 74

2000 va nding) Node Firefox ... Ajax IE7 IE8 Chrome Ajax boom RESTful JSON XHTML ECMA5 Prototype.js Dojo


Слайд 75

2000 va nding) Ajax Node Ajax boom RESTful JSON XHTML ECMA5 Sass Prototype.js Dojo YUI jQuery mooTools CoffeeScript JavascriptMVC


Слайд 76


Слайд 77

2000 va nding) Ajax Node Ajax boom RESTful JSON XHTML ECMA5 Sass Prototype.js Dojo YUI jQuery mooTools CoffeeScript JavascriptMVC


Слайд 78

2000 Google Car Mac I Ajax Laptops iPhone Touch 2 Ajax boom RESTful JSON XHTML ECMA5 Sass Prototype.js Dojo YUI jQuery mooTools CoffeeScript JavascriptMVC


Слайд 79

Where we are.


Слайд 80

2010-15.


Слайд 81

2010 2015 i7, 6 cores 12 threads


Слайд 82

2010 iPhone Smart TVs 2015 iPad i7, 6 cores 12 threads


Слайд 83

2010 iPhone Smart TVs 2015 iPad i7, 6 cores 12 threads IE10 IE9 IE11


Слайд 84

2010 iPhone Smart TVs 2015 iPad i7, 6 cores 12 threads IE10 IE9 Ajax boom RESTful ECMA5 CSS3 HTML5 IE11


Слайд 85

GUI and “componentization” trend.


Слайд 86

“Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.


Слайд 87

GUI 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile.


Слайд 88


Слайд 89

2010 iPhone Smart TVs 2015 iPad i7, 6 cores 12 threads IE10 IE9 Ajax boom RESTful ECMA5 CSS3 HTML5 IE11


Слайд 90

2010 2015 i7, 6 cores 12 threads IE10 IE9 Ajax boom RESTful CSS3 ECMA5 HTML5 Angular Less Stylus Three.js ExtJS Processing Mustache Phonegap Typescript NPM RxJS Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC IE11


Слайд 91

ax boom ESTful 2010 2015 i7, 6 cores 12 threads IE10 IE9 CSS3 HTML5 Angular Less Stylus Three.js ExtJS Processing Mustache Phonegap Typescript NPM RxJS Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC IE11


Слайд 92

ax boom ESTful 2010 2015 i7, 6 cores 12 threads IE10 IE9 ECMA6 WebAssembly Isomorphic CSS3 HTML5 Angular Less Stylus Three.js ExtJS Processing Mustache Phonegap Edge IE11 Typescript NPM RxJS Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC


Слайд 93

ax boom ESTful 2010 IE10 2015 IE11 IE9 ECMA6 WebAssembly Isomorphic CSS3 HTML5 Angular Less Stylus Three.js ExtJS Processing Mustache Phonegap Typescript NPM RxJS Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Riot Haml Jade React Meteor Polymer Momment Aurelia Drone bacon.js Webpack flow Babel Velocity Ionic Maple Immutable Relay Angular 2 Cycle.js Edge


Слайд 94

WTF? What just happened?


Слайд 95

Where we are From spaghetti to GUIs.


Слайд 96

From spaghetti to GUIs: 1. AJAX.
 2. MVC. 3. Binding. 4. Modules.


Слайд 97

Where we are Client-side’s benefits.


Слайд 98

Client-side’s benefits: 1. Better experience.
 2. Minimum on the Back-End.
 3. Independent Back-End. 4. Independent Front-End.


Слайд 99

Where we are Client-Side’s problems.


Слайд 100

Client-side’s problems before 2015: 1. White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability.


Слайд 101

In 2015.


Слайд 102

Where we are A possible solution.


Слайд 103

Client-side in 2015, a possible solution: 1. Functional reactive programming.
 2. Immutable structure.
 3. Smarter query languages.


Слайд 104

Client-side’s problems before 2015: 1. White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability.


Слайд 105

Where we are going to.


Слайд 106

Where we are going to Javascript.


Слайд 107

ES6/ES7/ES8/Macros.


Слайд 108

More browser control.


Слайд 109

More Back-End in the Front.


Слайд 110

Parallelism and concurrency.


Слайд 111

Offline and wearables.


Слайд 112

Functional.


Слайд 113

Universal/Isomorphic.


Слайд 114

Web Assembly.


Слайд 115

2020.


Слайд 116

2020: • Code on schools. • More than 1 million jobs for programmers. • Cars with AI. • Delivery, transport and military drones. • AI medical diagnosis. • OS with augmented reality. • 3D printing. • Mobile payments. • People and voice recognition. • Robots. • 4 million unemployed drivers.


Слайд 117

2020: • Elastic search, GraphQL and others new query languages. • Offline apps. • Wearables. • After-React. • IOT, billions of small things connected to the internet. • Military and industrial IOT. • Smart homes. • Jobs and companies driven by AI.


Слайд 118

Unemployment + Drones + AI + IOT + AR


Слайд 119

Conclusion.


Слайд 120


 Conclusion: 1. Why so many changes? 2. What changed? 3. What doesn’t change?


Слайд 121


Слайд 122

But why so many changes?


Слайд 123

What do we do?


Слайд 124

Humans + Pain + Web = ∞


Слайд 125


 Web: 1. Get close to our reality experience. 2. Go beyond.


Слайд 126

We solve problems.


Слайд 127


Слайд 128


Слайд 129


Слайд 130


Слайд 131


Слайд 132

Computers evolve. If the principles changed there would be no base to evolution.


Слайд 133

Thanks: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.


Слайд 134

Sources: • https://en.wikipedia.org/wiki/Moore%27s_law • https://en.wikipedia.org/wiki/Microprocessor_chronology • https://en.wikipedia.org/wiki/Bell%27s_law_of_computer_classes • https://en.wikipedia.org/wiki/Data_binding • https://people.apache.org/~xli/presentations/history_Intel_CPU.pdf • http://www.wolframalpha.com/docs/timeline/computable-knowledgehistory-5.html • http://www.wolframalpha.com/docs/timeline/computable-knowledgehistory-6.html • https://en.wikipedia.org/wiki/Timeline_of_computing • https://en.wikipedia.org/wiki/History_of_computing_hardware


Слайд 135

Sources: • https://en.wikipedia.org/wiki/Timeline_of_programming_languages • https://medium.com/javascript-scene/get-ready-for-the-future-f4cf7610b985 • http://cdn.oreillystatic.com/news/graphics/prog_lang_poster.pdf • http://www.worldsciencefestival.com/wp-content/uploads/2013/12/A-History-ofComputer-Science.jpg • http://archive.wired.com/images/article/magazine/1701/ff_mac3_f.jpg • http://anddum.com/timeline/timelinepics/inteltimeline.gif • http://brewhouse.io/images/posts/2015/05/frameworks-1-0.png • http://webdesignergeeks.com/wp-content/uploads/2011/08/800pxWeb_development_timeline.png • https://farm9.staticflickr.com/8529/8588701778_91aeb65377_o.png


Слайд 136

Sources: • http://www.w3.org/2005/01/timelines/timeline-2500x998.png • http://www.cooscountywatchdog.com/uploads/8/7/3/0/8730508/4030670.jpg? 697 • http://homepages.rpi.edu/home/37/clarkr6/public_html/images2/timeline.jpg • http://images.hardwarecanucks.com/image//skymtl/CPU/INTEL-2014/ INTEL-2014-4.png • http://i.imgur.com/NFysh.png


Слайд 137

Thank you. @caiovaccaro /in/caiovaccaro /caiovaccaro


Слайд 138

September 26th, 2015


Слайд 139


×

HTML:





Ссылка: