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

1. 26 de Setembro, 2015

2. Javascript
State of the Union
Huge
26 de Setembro, 2015

3. 1. Introdução
2. De onde viemos
3. Onde estamos
4. Para onde estamos indo
5. Conclusão
Agenda

4. Introdução.

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 produtos digitais.

9. State of the Union.

11.
1. Por que tantas mudanças?
2. O que tem mudado?
3. O que não muda?
Introdução:

12. Timeline.
Introdução

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. De onde viemos.

16. 1950.

17. Fortran
(Imperativa)
1950

18. Fortran
(Imperativa)
Computador
1950

19. Fortran
(Imperativa)
Computador
Lisp
(Funcional)
1950

21. 1950
Fortran
(Imperativa)
Computador
Lisp
(Funcional)
IBM

22. Paradigmas de programação
1. Imperativo.
2. Funcional.
3. Reativo.
4. Orientado a objeto.
5. Orientado a evento.
…

23. 1950
Fortran
(Imperativa)
Computador
Lisp
(Funcional)
IBM

24. 1950
Fortran
(Imperativa)
Lisp
(Funcional)

25. 1950
Lisp
(Funcional)
Fortran
(Imperativa)
Algol

26. 1970.

27. 1950
Lisp
(Funcional)
Fortran
(Imperativa)
Algol

28. 1950
M.P.P
1970
Algol
Fortran
Lisp

29. 1950
M.P.P
1970
Algol
Fortran
Lisp

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

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

33. Arquitetura de software
1. MV*.
2. Microservices.
3. Peer-to-peer.
4. Publish-subscribe.
5. Dependency injection.
…

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

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

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

37. 1990.

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

39. HTML
me Haskell
OOP)
1990
Concorrência
386

40. Athlon
Pentium
Pentium IIConcorrência
386
OOP)
1990
Python
Ruby
PHP
Java
(Binding)
AMD Yahoo eBay/
Amazon
Altavista
W3C

41. AMD Yahoo eBay/
Amazon
Altavista
W3C
Athlon
Pentium
Pentium IIConcorrência
386
1990
Python
Ruby
PHP
Java
(Binding)
wwwl SMTP IRC

42. AMD Yahoo eBay/
Amazon
Altavista
W3C
Athlon
Pentium
Pentium IIConcorrência
386
HTML HTML2
CSS
1990
Python
Ruby
PHP
Java
(Binding)
wwwl SMTP IRC

43. wwwl SMTP IRC Netscape
Apache
HTML HTML2
CSS
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
Athlon
Pentium
Pentium IIConcorrência
386

44. wwwl SMTP IRC Netscape
Apache
HTML HTML2
CSS
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
Athlon
Pentium
Pentium IIConcorrência
386
IE

45. 2000.

46. wwwl SMTP IRC Netscape
Apache
HTML HTML2
CSS
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
Athlon
Pentium
Pentium IIConcorrência
386
IE

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

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

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

50. 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

51. O “Front-end” era
praticamente declarativo.

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

56. 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

57. 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

58. 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

59. 2000
Pentium III Pentium 4
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 III Pentium 4
Google
IE7...
Dual core
Quad core
Firefox
Chrome

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

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

64. 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

65. Como era o código nessa época?

73. 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

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

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

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

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

80. 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

81. Onde estamos.

82. 2010-15.

83. i7, 6 cores
12 threads
2010 2015

84. i7, 6 cores
12 threads
iPhone iPadSmart
TVs
2010 2015

85. i7, 6 cores
12 threads
iPhone iPadSmart
TVs
IE9
IE10 IE11
2010 2015

86. i7, 6 cores
12 threads
HTML5
CSS3
ECMA5
Ajax boom
RESTful
iPhone iPadSmart
TVs
IE9
IE10 IE11
2010 2015

87. Trend de GUI e “componentização”.

88. “Modules speak to the 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
12 threads
HTML5
CSS3
ECMA5
Ajax boom
RESTful
iPhone iPadSmart
TVs
IE9
IE10 IE11
2010 2015

92. 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

93. 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

94. 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

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
Angular 2
Cycle.js
Riot
Haml
Jade
2010 2015 Edge

96. WTF? O que aconteceu?

97. Do spaghetti às GUIs.
Ondeestamos

98. 1.AJAX.
2. MVC.
3. Binding.
4. Modules.
DoSpaghettiàsGUIs

99. Benefícios do Client-Side.
Ondeestamos

100. 1. Experiência melhor.
2. Mínimo no Back-End.
3. Back-End independente.
4. Front-End independente.
BenefíciosdoClient-side

101. Problemas do Client-Side.
Ondeestamos

102. 1. Página branca.
2. SEO.
3. Pode ser devagar.
4. Lógica duplicada.
5. Falta de escalabilidade.
ProblemasdoClient-sideantesde2015

103. Em 2015.

104. Uma possível solução.
Ondeestamos

105. 1. Programação funcional reativa.
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. Para onde
estamos indo.

108. Javascript.
Paraondeestamosindo

109. ES6/ES7/ES8/Macros.

110. Mais controle nos browsers.

111. Mais Back-End no Front.

112. Paralelismo e concorrência.

113. Offline e wearables.

114. Funcional.

115. Universal/Isomorphic.

116. Web Assembly.

117. 2020.

118. 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.

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. Conclusão.

122.
1. Por que tantas mudanças?
2. O que tem mudado?
3. O que não muda?
Conclusão:

124. Mas por que tantas mudanças?

125. O que nós fazemos?

126. Humans + Pain + Web =
∞

127.
1.Aproximar à nossa realidade.
2. Ir além.
Web:

128. Nós resolvemos problemas.

134. Computadores evoluem. Se os
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. Obrigado.
@caiovaccaro /in/caiovaccaro /caiovaccaro

140. 26 de Setembro, 2015