26 de Setembro, 2015
26 de Setembro, 2015
Javascript State of the Union
Huge
26 de Setembro, 2015
1. Introdução2. De onde viemos3. Onde estamos
4. Para onde estamos indo
5. Conclusão
Agenda
Introdução.
Caio Vaccaro.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
M.P.P
Lisp Scheme Haskell
1950 1970Fortran Smalltalk (MVC, OOP)
1990
Concorrência
386
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
1950 1970Fortran
Smalltalk (MVC, OOP)
1990
Python
Ruby
PHP
Java
(Binding)
AMD Yahoo eBay/Amazon
AltavistaW3C
AMD Yahoo eBay/Amazon
AltavistaW3C
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
wwwEmail SMTP IRC
AMD Yahoo eBay/Amazon
AltavistaW3C
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
wwwEmail SMTP IRC
wwwEmail SMTP IRC Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
wwwEmail SMTP IRC Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
IE
2000.
wwwEmail SMTP IRC Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386
IE
M.P.P
Athlon
Pentium
Pentium II
wwwEmail SMTP IRC Netscape
Apache
HTML HTML2
CSS
Fortran
Python
Ruby
PHP
Java
(Binding)
Javascript
IE
1970 2000
HTML HTML2
CSS
Fortran
Python
Ruby
PHP
Java
(Binding)
Javascript
1970
Python
Ruby
PHP
Java
(Binding)
Javascript
M.P.P
Athlon
Pentium
Pentium II
IE7...wwwEmail SMTP IRC Netscape
Apache
IEIE
2000
IE7...wwwEmail SMTP IRC Netscape
Apache
IEIE
AMD Yahoo eBay/Amazon
AltavistaW3C
M.P.P
Athlon
Pentium
Pentium II
1970Fortran
Python
Ruby
PHP
Java
(Binding)
HTML HTML2
CSS
Javascript
2000
IEAjax JSON
XHTML
IE7...wwwEmail SMTP IRC Netscape
Apache
IEIE
AMD Yahoo eBay/Amazon
AltavistaW3C
1970Fortran
Python
Ruby
PHP
Java
(Binding)
HTML HTML2
CSS
Javascript
2000
Wikipedia
Netflix
Hotmail
Pentium III Pentium 4M.P.P
Athlon
Pentium
Pentium II
Ajax JSON
XHTML
O “Front-end” era praticamente declarativo.
Pentium III Pentium 4M.P.P
Athlon
Pentium
Pentium II
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
Javascript
2000
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
IE7...wwwEmail SMTP IRC Netscape
Apache
IEIE
Pentium III Pentium 4M.P.P
Athlon
Pentium
Pentium II
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
Javascript
wwwEmail SMTP IRC Netscape
Apache
IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
2000
Windows 3.1 iMac I Laptops
Pentium III Pentium 4M.P.P
Athlon
Pentium
Pentium II
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
Javascript
wwwEmail SMTP IRC Netscape
Apache
IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
2000
Windows 3.1 iMac I LaptopsDual core
Quad core
Pentium III Pentium 4M.P.P
Athlon
Pentium
Pentium II
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
Javascript
wwwEmail SMTP IRC Netscape
Apache
IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
2000
Windows 3.1 iMac I LaptopsDual core
Quad core
Firefox
Chrome
2000
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
Windows 3.1 iMac I LaptopsDual core
Quad core
Firefox
Chrome
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Dual core
Quad core
Firefox
Chrome
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Dual core
Quad core
Firefox
Chrome
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Dual core
Quad core
Firefox
Chrome
Gmail
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
HTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Dual core
Quad core
Firefox
Chrome
Gmail
ECMA5
Ajax boomRESTful
IE8
Como era o código nessa época?
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4M.P.P
AMD Yahoo eBay/Amazon
AltavistaW3C
Ajax JSON
XHTMLHTML HTML2
CSS
wwwEmail SMTP IRC IE7...
Dual core
Quad core
Firefox
Chrome
Gmail
ECMA5
Ajax boomRESTful
IE8
Python
Ruby
PHP
Java
(Binding) Node
2000
wwwEmail SMTP IRC IE7...
Firefox
Chrome
Dojo
Prototype.js
IE8
Ajax JSON
XHTMLHTML HTML2
CSS
ECMA5
Ajax boomRESTful
Ajax JSON
XHTMLHTML HTML2
CSS
ECMA5
Ajax boomRESTful
Python
Ruby
PHP
Java
(Binding) Node
2000
wwwEmail SMTP IRC IE7...
Firefox
Chrome
Dojo
Prototype.js
IE8
Ajax JSON
XHTMLHTML HTML2
CSS
ECMA5
Ajax boomRESTful
Python
Ruby
PHP
Java
(Binding) Node
2000
Dojo
Prototype.js
YUIjQuerymooToolsCoffeeScriptJavascriptMVC
Sass
Ajax JSON
XHTMLHTML HTML2
CSS
ECMA5
Ajax boomRESTful
Python
Ruby
PHP
Java
(Binding) Node
2000
Dojo
Prototype.js
YUIjQuerymooToolsCoffeeScriptJavascriptMVC
Sass
Ajax JSON
XHTMLHTML HTML2
CSS
ECMA5
Ajax boomRESTful
Dojo
Prototype.js
YUIjQuerymooToolsCoffeeScriptJavascriptMVC
Sass
iMac I Laptops iPhoneTouch 2
Google Car2000
Onde estamos.
2010-15.
i7, 6 cores12 threads
2010 2015
i7, 6 cores12 threads
iPhone iPadSmartTVs
2010 2015
i7, 6 cores12 threads
iPhone iPadSmartTVs
IE9
IE10 IE11
2010 2015
i7, 6 cores12 threads
HTML5
CSS3
ECMA5
Ajax boomRESTful
iPhone iPadSmartTVs
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 cores12 threads
HTML5
CSS3
ECMA5
Ajax boomRESTful
iPhone iPadSmartTVs
IE9
IE10 IE11
2010 2015
i7, 6 cores12 threads
IE9
IE10 IE11
HTML5
CSS3
ECMA5
Ajax boomRESTful
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 cores12 threads
HTML5
CSS3
ECMA5
Ajax boomRESTful
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 cores12 threads
HTML5
CSS3
ECMA5
Ajax boomRESTful
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
ECMA6WebAssemblyIsomorphic
HTML5
CSS3
ECMA5
Ajax boomRESTful
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
ECMA6WebAssemblyIsomorphic
Meteor
Momment
Drone
Webpack
Babel
Ionic
Immutable
React
Polymer
Aurelia
bacon.js
flow
Velocity
Maple
Relay
Angular 2
Cycle.js
Riot
Haml
Jade
2010 2015Edge
WTF? O que aconteceu?
Do spaghetti às GUIs.Onde estamos
1. AJAX.2. MVC.
3. Binding.
4. Modules.
Do Spaghetti às GUIs
Benefícios do Client-Side.Onde estamos
1. Experiência melhor.2. Mínimo no Back-End.3. Back-End independente.
4. Front-End independente.
Benefícios do Client-side
Problemas do Client-Side.Onde estamos
1. Página branca.2. SEO.3. Pode ser devagar.
4. Lógica duplicada.
5. Falta de escalabilidade.
Problemas do Client-side antes de 2015
Em 2015.
Uma possível solução.Onde estamos
1. Programação funcional reativa.2. Estruturas imutáveis.3. Query languages mais inteligentes.
Client-side em 2015, uma possível solução
1. Página branca.2. SEO.3. Pode ser devagar.
4. Lógica duplicada.
5. Falta de escalabilidade.
Problemas do Client-side antes de 2015
Para onde estamos indo.
Javascript.Para onde estamos indo
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