Javascript State of the Union 2015

2.293 visualizações

Publicada em

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

Publicada em: Tecnologia
3 comentários
12 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.293
No SlideShare
0
A partir de incorporações
0
Número de incorporações
39
Ações
Compartilhamentos
0
Downloads
16
Comentários
3
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Javascript State of the Union 2015

  1. 1. 26 de Setembro, 2015
  2. 2. Javascript State of the Union Huge 26 de Setembro, 2015
  3. 3. 1. Introdução
 2. De onde viemos
 3. Onde estamos
 4. Para onde estamos indo 5. Conclusão Agenda
  4. 4. Introdução.
  5. 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
  6. 6. Nós fazemos produtos digitais.
  7. 7. State of the Union.
  8. 8. 
 1. Por que tantas mudanças? 2. O que tem mudado? 3. O que não muda? Introdução:
  9. 9. Timeline. Introdução
  10. 10. 
 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:
  11. 11. 
 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:
  12. 12. De onde viemos.
  13. 13. 1950.
  14. 14. Fortran (Imperativa) 1950
  15. 15. Fortran (Imperativa) Computador 1950
  16. 16. Fortran (Imperativa) Computador Lisp (Funcional) 1950
  17. 17. 1950 Fortran (Imperativa) Computador Lisp (Funcional) IBM
  18. 18. Paradigmas de programação
 1. Imperativo. 2. Funcional. 3. Reativo. 4. Orientado a objeto. 5. Orientado a evento. …
  19. 19. 1950 Fortran (Imperativa) Computador Lisp (Funcional) IBM
  20. 20. 1950 Fortran (Imperativa) Lisp (Funcional)
  21. 21. 1950 Lisp (Funcional) Fortran (Imperativa) Algol
  22. 22. 1970.
  23. 23. 1950 Lisp (Funcional) Fortran (Imperativa) Algol
  24. 24. 1950 M.P.P 1970 Algol Fortran Lisp
  25. 25. 1950 M.P.P 1970 Algol Fortran Lisp
  26. 26. 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC, OOP) Xerox & Apple
  27. 27. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  28. 28. Arquitetura de software
 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
  29. 29. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  30. 30. M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  31. 31. HTML M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++ Concorrência 386
  32. 32. 1990.
  33. 33. HTML M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) Concorrência 386 C C++
  34. 34. HTML me Haskell OOP) 1990 Concorrência 386
  35. 35. Athlon Pentium Pentium IIConcorrência 386 OOP) 1990 Python Ruby PHP Java (Binding) AMD Yahoo eBay/ Amazon Altavista W3C
  36. 36. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
  37. 37. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
  38. 38. wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386
  39. 39. wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
  40. 40. 2000.
  41. 41. wwwl SMTP IRC Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript Athlon Pentium Pentium IIConcorrência 386 IE
  42. 42. Pentium II ache by PHP Java (Binding) avascript IE 2000
  43. 43. by PHP Java (Binding) avascript by PHP Java (Binding) avascript Pentium II IE7... ache IEIE 2000
  44. 44. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google Pentium II by PHP Java (Binding) avascript 2000 IE Ajax JSON XHTML
  45. 45. 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
  46. 46. O “Front-end” era praticamente declarativo.
  47. 47. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 2000 Pentium III Pentium 4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
  52. 52. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
  53. 53. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
  54. 54. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail
  55. 55. 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
  56. 56. Como era o código nessa época?
  57. 57. 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
  58. 58. va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTML ECMA5 Ajax boom RESTful
  59. 59. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
  60. 60. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
  61. 61. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
  62. 62. 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
  63. 63. Onde estamos.
  64. 64. 2010-15.
  65. 65. i7, 6 cores 12 threads 2010 2015
  66. 66. i7, 6 cores 12 threads iPhone iPadSmart TVs 2010 2015
  67. 67. i7, 6 cores 12 threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  68. 68. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  69. 69. Trend de GUI e “componentização”.
  70. 70. “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
  71. 71. 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile. GUI
  72. 72. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. 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
  77. 77. WTF? O que aconteceu?
  78. 78. Do spaghetti às GUIs. Ondeestamos
  79. 79. 1.AJAX.
 2. MVC. 3. Binding. 4. Modules. DoSpaghettiàsGUIs
  80. 80. Benefícios do Client-Side. Ondeestamos
  81. 81. 1. Experiência melhor.
 2. Mínimo no Back-End.
 3. Back-End independente. 4. Front-End independente. BenefíciosdoClient-side
  82. 82. Problemas do Client-Side. Ondeestamos
  83. 83. 1. Página branca.
 2. SEO.
 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
  84. 84. Em 2015.
  85. 85. Uma possível solução. Ondeestamos
  86. 86. 1. Programação funcional reativa.
 2. Estruturas imutáveis.
 3. Query languages mais inteligentes. Client-sideem2015,umapossívelsolução
  87. 87. 1. Página branca.
 2. SEO.
 3. Pode ser devagar. 4. Lógica duplicada. 5. Falta de escalabilidade. ProblemasdoClient-sideantesde2015
  88. 88. Para onde estamos indo.
  89. 89. Javascript. Paraondeestamosindo
  90. 90. ES6/ES7/ES8/Macros.
  91. 91. Mais controle nos browsers.
  92. 92. Mais Back-End no Front.
  93. 93. Paralelismo e concorrência.
  94. 94. Offline e wearables.
  95. 95. Funcional.
  96. 96. Universal/Isomorphic.
  97. 97. Web Assembly.
  98. 98. 2020.
  99. 99. 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.
  100. 100. 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.
  101. 101. Desemprego + Drones + IA + IOT + AR
  102. 102. Conclusão.
  103. 103. 
 1. Por que tantas mudanças? 2. O que tem mudado? 3. O que não muda? Conclusão:
  104. 104. Mas por que tantas mudanças?
  105. 105. O que nós fazemos?
  106. 106. Humans + Pain + Web = ∞
  107. 107. 
 1.Aproximar à nossa realidade. 2. Ir além. Web:
  108. 108. Nós resolvemos problemas.
  109. 109. Computadores evoluem. Se os princípios mudassem não haveria base para evolução.
  110. 110. Agradecimentos: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
  111. 111. 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
  112. 112. 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
  113. 113. 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
  114. 114. Obrigado. @caiovaccaro /in/caiovaccaro /caiovaccaro
  115. 115. 26 de Setembro, 2015

×