Publicité
Check these out next
![[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=600&height=600&fit=bounds)
Javascript State of the Union 2015
28 Sep 2015•0 j'aime•3,616 vues
13 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Technologie
Onde nós estamos, como desenvolvedores Front-End? Esta apresentação navega por uma curta linha do tempo da ciência da computação, focando no desenvolvimento client-side para responder o porque e o que tem mudado, além de explorar padrões e tendências para o futuro próximo. English version at: http://www.slideshare.net/Hugeinc/javascript-state-of-the-union-2015-english Série de artigos: https://medium.com/@caiovaccaro/javascript-state-of-the-union-2015-parte-1-caa3f4257f3
HugeSuivre
Digital design, business strategy, marketing, and technology. à HugePublicité
Publicité
Publicité
Javascript State of the Union 2015
- 26 de Setembro, 2015
- Javascript State of the Union Huge 26 de Setembro, 2015
- 1. Introdução 2. De onde viemos 3. Onde estamos 4. Para onde estamos indo 5. Conclusão Agenda
- Introdução.
- 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
- Nós fazemos produtos digitais.
- State of the Union.
- 1. Por que tantas mudanças? 2. O que tem mudado? 3. O que não muda? Introdução:
- Timeline. Introdução
- 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:
- 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:
- De onde viemos.
- 1950.
- Fortran (Imperativa) 1950
- Fortran (Imperativa) Computador 1950
- Fortran (Imperativa) Computador Lisp (Funcional) 1950
- 1950 Fortran (Imperativa) Computador Lisp (Funcional) IBM
- Paradigmas de programação 1. Imperativo. 2. Funcional. 3. Reativo. 4. Orientado a objeto. 5. Orientado a evento. …
- 1950 Fortran (Imperativa) Computador Lisp (Funcional) IBM
- 1950 Fortran (Imperativa) Lisp (Funcional)
- 1950 Lisp (Funcional) Fortran (Imperativa) Algol
- 1970.
- 1950 Lisp (Funcional) Fortran (Imperativa) Algol
- 1950 M.P.P 1970 Algol Fortran Lisp
- 1950 M.P.P 1970 Algol Fortran Lisp
- 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC, OOP) Xerox & Apple
- 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
- Arquitetura de software 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
- 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
- M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
- HTML M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++ Concorrência 386
- 1990.
- HTML M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) Concorrência 386 C C++
- HTML me Haskell OOP) 1990 Concorrência 386
- Athlon Pentium Pentium IIConcorrência 386 OOP) 1990 Python Ruby PHP Java (Binding) AMD Yahoo eBay/ Amazon Altavista W3C
- AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386
- wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
- 2000.
- wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
- Pentium II ache by PHP Java (Binding) avascript IE 2000
- by PHP Java (Binding) avascript by PHP Java (Binding) avascript Pentium II IE7... ache IEIE 2000
- IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google Pentium II by PHP Java (Binding) avascript 2000 IE Ajax JSON XHTML
- IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google by PHP Java (Binding) avascript 2000 Wikipedia Netflix Hotmail Pentium III Pentium 4 Pentium II Ajax JSON XHTML
- O “Front-end” era praticamente declarativo.
- Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
- Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops
- Pentium III Pentium 4 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
- Pentium III Pentium 4 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
- 2000 Pentium III Pentium 4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
- Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
- Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
- Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail
- Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- Como era o código nessa época?
- Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google Ajax JSON XHTML IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTML ECMA5 Ajax boom RESTful
- Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
- Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- Ajax JSON XHTML ECMA5 Ajax boom RESTful Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass Mac I Laptops iPhone Touch 2 Google Car 2000
- Onde estamos.
- 2010-15.
- i7, 6 cores 12 threads 2010 2015
- i7, 6 cores 12 threads iPhone iPadSmart TVs 2010 2015
- i7, 6 cores 12 threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- Trend de GUI e “componentização”.
- “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
- 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile. GUI
- i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- i7, 6 cores 12 threads 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
- i7, 6 cores 12 threads 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
- i7, 6 cores 12 threads 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
- 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 Angular 2 Cycle.js Riot Haml Jade 2010 2015 Edge
- WTF? O que aconteceu?
- Do spaghetti às GUIs. Ondeestamos
- 1.AJAX. 2. MVC. 3. Binding. 4. Modules. DoSpaghettiàsGUIs
- Benefícios do Client-Side. Ondeestamos
- 1. Experiência melhor. 2. Mínimo no Back-End. 3. Back-End independente. 4. Front-End independente. BenefíciosdoClient-side
- Problemas do Client-Side. Ondeestamos
- 1. Página branca. 2. SEO. 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
- Em 2015.
- Uma possível solução. Ondeestamos
- 1. Programação funcional reativa. 2. Estruturas imutáveis. 3. Query languages mais inteligentes. Client-sideem2015,umapossívelsolução
- 1. Página branca. 2. SEO. 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
- Para onde estamos indo.
- Javascript. Paraondeestamosindo
- ES6/ES7/ES8/Macros.
- Mais controle nos browsers.
- Mais Back-End no Front.
- Paralelismo e concorrência.
- Offline e wearables.
- Funcional.
- Universal/Isomorphic.
- Web Assembly.
- 2020.
- 2020: • Código nas escolas. • 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.
- 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.
- Desemprego + Drones + IA + IOT + AR
- Conclusão.
- 1. Por que tantas mudanças? 2. O que tem mudado? 3. O que não muda? Conclusão:
- Mas por que tantas mudanças?
- O que nós fazemos?
- Humans + Pain + Web = ∞
- 1.Aproximar à nossa realidade. 2. Ir além. Web:
- Nós resolvemos problemas.
- Computadores evoluem. Se os princípios mudassem não haveria base para evolução.
- Agradecimentos: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
- 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
- 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
- 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
- Obrigado. @caiovaccaro /in/caiovaccaro /caiovaccaro
- 26 de Setembro, 2015
Publicité