Transferir como PDF, PPTX
Carregado porHuge
Javascript State of the Union 2015
O documento apresenta uma análise da evolução do JavaScript e seu papel na tecnologia digital ao longo das décadas, destacando as mudanças de paradigmas de programação e os avanços na arquitetura de software. A discussão abrange desde as linguagens de programação dos anos 50 até as tendências atuais em desenvolvimento e as projeções para o futuro da tecnologia, incluindo a importância de práticas como programação funcional reativa e a interdependência entre front-end e back-end. A conclusão enfatiza que a evolução dos computadores é contínua e que a adaptação às mudanças é essencial para resolver problemas na web.
![[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...](https://cdn.slidesharecdn.com/ss_thumbnails/15h50-16h20-luizfernandorodrigues-180706155219-thumbnail.jpg?width=640&height=640&fit=bounds)
Javascript State of the Union 2015
- 1. 26 de Setembro,2015
- 2. Javascript State of theUnion Huge 26 de Setembro, 2015
- 3. 1. Introdução 2. Deonde viemos 3. Onde estamos 4. Para onde estamos indo 5. Conclusão Agenda
- 4.
- 5. CaioVaccaro. Senior Web Engineer| Huge. Developer Team Lead. NY / RIO. 8 anos de experiência. Front-End, Back-End, Infraestrutura, Integração contínua, treinamentos. @caiovaccaro /in/caiovaccaro /caiovaccaro
- 8. Nós fazemos produtosdigitais.
- 9. State of theUnion.
- 11. 1. Por quetantas mudanças? 2. O que tem mudado? 3. O que não muda? Introdução:
- 12.
- 13. 1. Linguagens Imperativas. 2.Linguagens Funcionais. 3. Computadores e gadgets. 4. Processadores. 5. Empresas. 6. Internet e navegadores. 7. HTML/CSS/JS. 8. Frameworks JS. Timeline:
- 14. 1. Linguagens Imperativas. 2.Linguagens Funcionais. 3. Computadores e gadgets. 4. Processadores. 5. Empresas. 6. Internet e navegadores. 7. HTML/CSS/JS. 8. Frameworks JS. Timeline:
- 15.
- 16.
- 17.
- 18.
- 19.
- 21.
- 22. Paradigmas de programação 1.Imperativo. 2. Funcional. 3. Reativo. 4. Orientado a objeto. 5. Orientado a evento. …
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC,OOP) Xerox & Apple
- 32.
- 33. Arquitetura de software 1.MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
- 34.
- 35. M.P.P Lisp Scheme Haskell 19501970 Algol Fortran Smalltalk (MVC, OOP) C C++
- 36. HTML M.P.P Lisp Scheme Haskell 19501970 Algol Fortran Smalltalk (MVC, OOP) C C++ Concorrência 386
- 37.
- 38. HTML M.P.P Lisp Scheme Haskell 19501970 Algol Fortran Smalltalk (MVC, OOP) Concorrência 386 C C++
- 39.
- 40. Athlon Pentium Pentium IIConcorrência 386 OOP) 1990 Python Ruby PHP Java (Binding) AMD YahooeBay/ Amazon Altavista W3C
- 41. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium PentiumIIConcorrência 386 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- 42. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium PentiumIIConcorrência 386 HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- 43. wwwl SMTP IRCNetscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386
- 44. wwwl SMTP IRCNetscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
- 45.
- 46. wwwl SMTP IRCNetscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
- 47.
- 48.
- 49.
- 50. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google by PHP Java (Binding) avascript 2000 Wikipedia Netflix Hotmail Pentium IIIPentium 4 Pentium II Ajax JSON XHTML
- 51. O “Front-end” era praticamentedeclarativo.
- 55. Pentium III Pentium4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
- 56. Pentium III Pentium4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops
- 57. Pentium III Pentium4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops Dual core Quad core
- 58. Pentium III Pentium4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops Dual core Quad core Firefox Chrome
- 59. 2000 Pentium III Pentium4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
- 60. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium IIIPentium 4 Google IE7... Dual core Quad core Firefox Chrome
- 62. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium IIIPentium 4 Google IE7... Dual core Quad core Firefox Chrome
- 63. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium IIIPentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail
- 64. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium IIIPentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- 65. Como era ocódigo nessa época?
- 73. Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium4 Google Ajax JSON XHTML IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- 74. va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTMLECMA5 Ajax boom RESTful
- 76. Ajax JSON XHTML ECMA5 Ajaxboom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
- 77. Ajax JSON XHTML ECMA5 Ajaxboom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- 79. Ajax JSON XHTML ECMA5 Ajaxboom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- 80. Ajax JSON XHTML ECMA5 Ajaxboom RESTful Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass Mac I Laptops iPhone Touch 2 Google Car 2000
- 81.
- 82.
- 83. i7, 6 cores 12threads 2010 2015
- 84. i7, 6 cores 12threads iPhone iPadSmart TVs 2010 2015
- 85. i7, 6 cores 12threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 86. i7, 6 cores 12threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 87. Trend de GUIe “componentização”.
- 88. “Modules speak tothe rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
- 89. 1. MV*. 2. Binding. 3.SPA. 4. Desktop/Mobile. GUI
- 91. i7, 6 cores 12threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 92. i7, 6 cores 12threads IE9 IE10 IE11 HTML5 CSS3 ECMA5 Ajax boom RESTful ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015
- 93. i7, 6 cores 12threads HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015
- 94. i7, 6 cores 12threads HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015 Edge ECMA6 WebAssembly Isomorphic
- 95. HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess ECMA6 WebAssembly Isomorphic Meteor Momment Drone Webpack Babel Ionic Immutable React Polymer Aurelia bacon.js flow Velocity Maple Relay Angular2 Cycle.js Riot Haml Jade 2010 2015 Edge
- 96. WTF? O queaconteceu?
- 97. Do spaghetti àsGUIs. Ondeestamos
- 98. 1.AJAX. 2. MVC. 3. Binding. 4.Modules. DoSpaghettiàsGUIs
- 99.
- 100. 1. Experiência melhor. 2.Mínimo no Back-End. 3. Back-End independente. 4. Front-End independente. BenefíciosdoClient-side
- 101.
- 102. 1. Página branca. 2.SEO. 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
- 103.
- 104.
- 105. 1. Programação funcionalreativa. 2. Estruturas imutáveis. 3. Query languages mais inteligentes. Client-sideem2015,umapossívelsolução
- 106. 1. Página branca. 2.SEO. 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
- 107.
- 108.
- 109.
- 110. Mais controle nosbrowsers.
- 111. Mais Back-End noFront.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118. 2020: • Código nasescolas. • Mais de 1 milhão de empregos para programadores. • Carros com IA. • Drones de entrega, transporte e militares. • Diagnósticos por IA. • Realidade aumentada com SO. • Impressão 3D. • Pagamentos mobile. • Reconhecimento de voz e de pessoa. • Robôs. • 4 milhões de motoristas desempregados.
- 119. 2020: • Elastic search,GraphQL e outras novas query languages. • Apps offline. • Wearables. • Pós-React. • IOT, bilhões de coisas pequenas conectadas na web. • IOT industrial e militar. • Smart homes. • Empregos e empresas por IA.
- 120. Desemprego + Drones+ IA + IOT + AR
- 121.
- 122. 1. Por quetantas mudanças? 2. O que tem mudado? 3. O que não muda? Conclusão:
- 124. Mas por quetantas mudanças?
- 125. O que nósfazemos?
- 126. Humans + Pain+ Web = ∞
- 127. 1.Aproximar à nossarealidade. 2. Ir além. Web:
- 128.
- 134. Computadores evoluem. Seos princípios mudassem não haveria base para evolução.
- 135. Agradecimentos: • João Pagnoncelli. •Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
- 136. Fontes: • 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-knowledge- history-5.html • http://www.wolframalpha.com/docs/timeline/computable-knowledge- history-6.html • https://en.wikipedia.org/wiki/Timeline_of_computing • https://en.wikipedia.org/wiki/History_of_computing_hardware
- 137. Fontes: • 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-of- Computer-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/800px- Web_development_timeline.png • https://farm9.staticflickr.com/8529/8588701778_91aeb65377_o.png
- 138. Fontes: • 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
- 139.
- 140. 26 de Setembro,2015