The document provides a history of JavaScript and web development from 1950 to 2015. It discusses the evolution of programming languages, computers, processors, companies, browsers, HTML/CSS, JavaScript frameworks, and more. Key developments include the introduction of imperative and functional programming, Ajax and JSON, mobile devices, and modern JavaScript frameworks. The document predicts continued evolution in areas like WebAssembly, isomorphic code, functional programming, and integration of AI and IoT. Overall it traces the massive changes in the field but argues the underlying principles that allow for continued evolution have remained steady.

1. September 26th, 2015

2. Javascript
State of the Union
Huge
September 26th, 2015

3. 1. Introduction
2.Where we came from
3.Where we are
4.Where we are going to
5. Conclusion
Agenda

4. Introduction.

5. CaioVaccaro.
Senior Web Engineer | Huge.
Developer Team Lead.
NY / RIO.
8 years of experience.
Front-End, Back-End, Infrastructure,
Continuous integration, trainings.
@caiovaccaro
/in/caiovaccaro
/caiovaccaro

8. We make digital products.

9. State of the Union.

11.
1.Why so many changes?
2.What changed?
3.What doesn’t change?
Introduction:

12. Timeline.
Introduction

13.
1. Imperative Languages.
2. Functional Languages.
3. Computers and gadgets.
4. Processors.
5. Companies.
6. Internet and browsers.
7. HTML/CSS/JS.
8. JS Frameworks.
Timeline:

14.
1. Imperative Languages.
2. Functional Languages.
3. Computers and gadgets.
4. Processors.
5. Companies.
6. Internet and browsers.
7. HTML/CSS/JS.
8. JS Frameworks.
Timeline:

15. Where we
came from.

16. 1950.

17. 1950
Fortran
(Imperativa)
Fortran
(Imperative)

18. 1950
Fortran
(Imperativa)
Fortran
(Imperative)
ComputadorComputer

19. 1950
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer

21. 1950
IBM
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer

22. Programming paradigms
1. Imperative.
2. Functional.
3. Reactive.
4. Object oriented.
5. Event oriented.
…

23. 1950
IBM
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer

24. 1950
Lisp
(Funcional)
Lisp
(Functional)
Fortran
(Imperativa)
Fortran
(Imperative)

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

26. 1970.

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

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

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

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

32. Software architecture
1. MV*.
2. Microservices.
3. Peer-to-peer.
4. Publish-subscribe.
5. Dependency injection.
…

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

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

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

36. 1990.

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

38. Concorrência
386
Concurrency
HTML
me Haskell
OOP)
1990

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

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

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

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

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

44. 2000.

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

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

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

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

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

50. “Front-end” was
almost declarative.

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

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

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
Dual core
Quad core

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
Firefox
Chrome

58. 2000
Pentium III Pentium 4
Google
IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
Mac I Laptops
Dual core
Quad core
Firefox
Chrome

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

61. 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
Facebook
Gmail

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
ECMA5
Ajax boom
RESTful
IE8

64. How was the code back then?

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

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

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

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

78. 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
Dojo
Prototype.js
YUI
jQuery
mooTools
CoffeeScript
JavascriptMVC
Sass
Mac I Laptops iPhone
Touch 2
Google Car
2000

80. Where we are.

81. 2010-15.

82. i7, 6 cores
12 threads
2010 2015

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

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

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

86. GUI and “componentization” trend.

87. “Modules speak to the rest of the
application when something interesting
happens and an intermediate layer
interprets and reacts to these
messages.”
Addy Osmani.

88. 1. MV*.
2. Binding.
3. SPA.
4. Desktop/Mobile.
GUI

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

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

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

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
Edge
ECMA6
WebAssembly
Isomorphic

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

95. WTF? What just happened?

96. From spaghetti to GUIs.
Whereweare

97. 1.AJAX.
2. MVC.
3. Binding.
4. Modules.
FromspaghettitoGUIs:

98. Client-side’s benefits.
Whereweare

99. 1. Better experience.
2. Minimum on the Back-End.
3. Independent Back-End.
4. Independent Front-End.
Client-side’sbenefits:

100. Client-Side’s problems.
Whereweare

101. 1.White page.
2. SEO.
3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’sproblemsbefore2015:

102. In 2015.

103. A possible solution.
Whereweare

104. 1. Functional reactive programming.
2. Immutable structure.
3. Smarter query languages.
Client-sidein2015,apossiblesolution:

105. 1.White page.
2. SEO.
3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’sproblemsbefore2015:

106. Where we
are going to.

107. Javascript.
Wherewearegoingto

108. ES6/ES7/ES8/Macros.

109. More browser control.

110. More Back-End in the Front.

111. Parallelism and concurrency.

112. Offline and wearables.

113. Functional.

114. Universal/Isomorphic.

115. Web Assembly.

116. 2020.

117. 2020:
• Code on schools.
• More than 1 million jobs for programmers.
• Cars with AI.
• Delivery, transport and military drones.
• AI medical diagnosis.
• OS with augmented reality.
• 3D printing.
• Mobile payments.
• People and voice recognition.
• Robots.
• 4 million unemployed drivers.

118. 2020:
• Elastic search, GraphQL and others new query languages.
• Offline apps.
• Wearables.
• After-React.
• IOT, billions of small things connected to the internet.
• Military and industrial IOT.
• Smart homes.
• Jobs and companies driven by AI.

119. Unemployment + Drones + AI + IOT + AR

120. Conclusion.

121.
1.Why so many changes?
2.What changed?
3.What doesn’t change?
Conclusion:

123. But why so many changes?

124. What do we do?

125. Humans + Pain + Web =
∞

126.
1. Get close to our reality experience.
2. Go beyond.
Web:

127. We solve problems.

133. Computers evolve. If the principles
changed there would be no
base to evolution.

134. Thanks:
• João Pagnoncelli.
• Rafael Gomes.
• Gabriel Godoy.
• Kevin Chevallier.
• Isabella Silveira.
• Douglas Monteiro.
• Marcos Rodrigues.

135. Sources:
• 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

136. Sources:
• 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

137. Sources:
• 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

138. Thank you.
@caiovaccaro /in/caiovaccaro /caiovaccaro

139. September 26th, 2015