Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
September 26th, 2015
Javascript
State of the Union
Huge
September 26th, 2015
1. Introduction

2.Where we came from

3.Where we are

4.Where we are going to
5. Conclusion
Agenda
Introduction.
CaioVaccaro.
Senior Web Engineer | Huge.
Developer Team Lead.
NY / RIO.
8 years of experience.


Front-End, Back-End, Infr...
We make digital products.
State of the Union.


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


1. Imperative Languages.
2. Functional Languages.

3. Computers and gadgets.

4. Processors.
5. Companies.
6. Internet a...


1. Imperative Languages.
2. Functional Languages.

3. Computers and gadgets.

4. Processors.
5. Companies.
6. Internet a...
Where we
came from.
1950.
1950
Fortran
(Imperativa)
Fortran
(Imperative)
1950
Fortran
(Imperativa)
Fortran
(Imperative)
ComputadorComputer
1950
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer
1950
IBM
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer
Programming paradigms

1. Imperative.
2. Functional.
3. Reactive.
4. Object oriented.
5. Event oriented.
…
1950
IBM
Fortran
(Imperativa)
Fortran
(Imperative)
Lisp
(Funcional)
Lisp
(Functional)
ComputadorComputer
1950
Lisp
(Funcional)
Lisp
(Functional)
Fortran
(Imperativa)
Fortran
(Imperative)
1950
Lisp
(Funcional)
Lisp
(Functional)
Algol
Fortran
(Imperativa)
Fortran
(Imperative)
1970.
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)
Software architecture

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++
M.P.P
Concorrência
386
Concurrency
HTML
Lisp Scheme Haskell
1950 1970
Algol
Fortran Smalltalk (MVC, OOP)
C C++
1990.
M.P.P
Concorrência
386
Concurrency
HTML
Lisp Scheme Haskell
1950 1970
Algol
Fortran Smalltalk (MVC, OOP)
C C++
Concorrência
386
Concurrency
HTML
me Haskell
OOP)
1990
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
OOP)
1990
Python
Ruby
PHP
Java
(Binding)
AMD Yahoo ...
AMD Yahoo eBay/
Amazon
Altavista
W3C
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
1990
Python
Ru...
AMD Yahoo eBay/
Amazon
Altavista
W3C
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
HTML HTML2
CSS...
wwwl SMTP IRC
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1990
P...
wwwl SMTP IRC
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1990
P...
2000.
wwwl SMTP IRC
Athlon
Pentium
Pentium IIConcorrência
386
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1990
P...
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
Pent...
“Front-end” was
almost declarative.
Pentium III Pentium 4
Pentium II
hoo eBay/
Amazon
Altavista
W3C
Google
avascript
2000
Wikipedia
Netflix
Hotmail
Ajax JSON
...
Pentium III Pentium 4
Pentium II
hoo eBay/
Amazon
Altavista
W3C
Google
avascript
ache
IE7...
Wikipedia
Netflix
Hotmail
Aja...
Pentium III Pentium 4
Pentium II
hoo eBay/
Amazon
Altavista
W3C
Google
avascript
ache
IE7...
Wikipedia
Netflix
Hotmail
Aja...
Pentium III Pentium 4
Pentium II
hoo eBay/
Amazon
Altavista
W3C
Google
avascript
ache
IE7...
Wikipedia
Netflix
Hotmail
Aja...
2000
Pentium III Pentium 4
Google
IE7...
Wikipedia
Netflix
Hotmail
Ajax JSON
XHTML
Mac I Laptops
Dual core
Quad core
Firef...
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4
Google
IE7...
Dual core
Quad core
F...
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4
Google
IE7...
Dual core
Quad core
F...
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4
Google
IE7...
Dual core
Quad core
F...
Ajax JSON
XHTML
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4
Google
IE7...
Dual core
Quad core
F...
How was the code back then?
Wikipedia
Netflix
Hotmail
2000
Dojo
Prototype.js
Pentium III Pentium 4
Google
Ajax JSON
XHTML
IE7...
Dual core
Quad core
F...
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
JavascriptM...
Ajax JSON
XHTML ECMA5
Ajax boom
RESTful
va
nding) Node
2000
Dojo
Prototype.js
YUI
jQuery
mooTools
CoffeeScript
JavascriptM...
Ajax JSON
XHTML ECMA5
Ajax boom
RESTful
Dojo
Prototype.js
YUI
jQuery
mooTools
CoffeeScript
JavascriptMVC
Sass
Mac I Laptop...
Where we are.
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
GUI and “componentization” trend.
“Modules speak to the rest of the
application when something interesting
happens and an intermediate layer
interprets and ...
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
...
i7, 6 cores
12 threads
HTML5
CSS3
ax boom
ESTful
IE9
IE10 IE11
ExtJS
Processing
Mustache
Phonegap
Angular
Stylus
Three.js
...
i7, 6 cores
12 threads
HTML5
CSS3
ax boom
ESTful
IE9
IE10 IE11
ExtJS
Processing
Mustache
Phonegap
Angular
Stylus
Three.js
...
HTML5
CSS3
ax boom
ESTful
IE9
IE10 IE11
ExtJS
Processing
Mustache
Phonegap
Angular
Stylus
Three.js
Backbone
Knockout
Boots...
WTF? What just happened?
From spaghetti to GUIs.
Whereweare
1.AJAX.

2. MVC.
3. Binding.
4. Modules.
FromspaghettitoGUIs:
Client-side’s benefits.
Whereweare
1. Better experience.

2. Minimum on the Back-End.

3. Independent Back-End.
4. Independent Front-End.
Client-side’sbenefi...
Client-Side’s problems.
Whereweare
1.White page.

2. SEO.

3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’sproblemsbefore2015:
In 2015.
A possible solution.
Whereweare
1. Functional reactive programming.

2. Immutable structure.

3. Smarter query languages.
Client-sidein2015,apossiblesolut...
1.White page.

2. SEO.

3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’sproblemsbefore2015:
Where we
are going to.
Javascript.
Wherewearegoingto
ES6/ES7/ES8/Macros.
More browser control.
More Back-End in the Front.
Parallelism and concurrency.
Offline and wearables.
Functional.
Universal/Isomorphic.
Web Assembly.
2020.
2020:
• Code on schools.
• More than 1 million jobs for programmers.
• Cars with AI.
• Delivery, transport and military dr...
2020:
• Elastic search, GraphQL and others new query languages.
• Offline apps.
• Wearables.
• After-React.
• IOT, billions...
Unemployment + Drones + AI + IOT + AR
Conclusion.


1.Why so many changes?
2.What changed?
3.What doesn’t change?
Conclusion:
But why so many changes?
What do we do?
Humans + Pain + Web =
∞


1. Get close to our reality experience.
2. Go beyond.
Web:
We solve problems.
Computers evolve. If the principles
changed there would be no
base to evolution.
Thanks:
• João Pagnoncelli.
• Rafael Gomes.
• Gabriel Godoy.
• Kevin Chevallier.
• Isabella Silveira.
• Douglas Monteiro.
...
Sources:
• https://en.wikipedia.org/wiki/Moore%27s_law
• https://en.wikipedia.org/wiki/Microprocessor_chronology
• https:/...
Sources:
• https://en.wikipedia.org/wiki/Timeline_of_programming_languages
• https://medium.com/javascript-scene/get-ready...
Sources:
• http://www.w3.org/2005/01/timelines/timeline-2500x998.png
• http://www.cooscountywatchdog.com/uploads/8/7/3/0/8...
Thank you.
@caiovaccaro /in/caiovaccaro /caiovaccaro
September 26th, 2015
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
Upcoming SlideShare
Loading in …5
×

of

Javascript State of the Union 2015 - English Slide 1 Javascript State of the Union 2015 - English Slide 2 Javascript State of the Union 2015 - English Slide 3 Javascript State of the Union 2015 - English Slide 4 Javascript State of the Union 2015 - English Slide 5 Javascript State of the Union 2015 - English Slide 6 Javascript State of the Union 2015 - English Slide 7 Javascript State of the Union 2015 - English Slide 8 Javascript State of the Union 2015 - English Slide 9 Javascript State of the Union 2015 - English Slide 10 Javascript State of the Union 2015 - English Slide 11 Javascript State of the Union 2015 - English Slide 12 Javascript State of the Union 2015 - English Slide 13 Javascript State of the Union 2015 - English Slide 14 Javascript State of the Union 2015 - English Slide 15 Javascript State of the Union 2015 - English Slide 16 Javascript State of the Union 2015 - English Slide 17 Javascript State of the Union 2015 - English Slide 18 Javascript State of the Union 2015 - English Slide 19 Javascript State of the Union 2015 - English Slide 20 Javascript State of the Union 2015 - English Slide 21 Javascript State of the Union 2015 - English Slide 22 Javascript State of the Union 2015 - English Slide 23 Javascript State of the Union 2015 - English Slide 24 Javascript State of the Union 2015 - English Slide 25 Javascript State of the Union 2015 - English Slide 26 Javascript State of the Union 2015 - English Slide 27 Javascript State of the Union 2015 - English Slide 28 Javascript State of the Union 2015 - English Slide 29 Javascript State of the Union 2015 - English Slide 30 Javascript State of the Union 2015 - English Slide 31 Javascript State of the Union 2015 - English Slide 32 Javascript State of the Union 2015 - English Slide 33 Javascript State of the Union 2015 - English Slide 34 Javascript State of the Union 2015 - English Slide 35 Javascript State of the Union 2015 - English Slide 36 Javascript State of the Union 2015 - English Slide 37 Javascript State of the Union 2015 - English Slide 38 Javascript State of the Union 2015 - English Slide 39 Javascript State of the Union 2015 - English Slide 40 Javascript State of the Union 2015 - English Slide 41 Javascript State of the Union 2015 - English Slide 42 Javascript State of the Union 2015 - English Slide 43 Javascript State of the Union 2015 - English Slide 44 Javascript State of the Union 2015 - English Slide 45 Javascript State of the Union 2015 - English Slide 46 Javascript State of the Union 2015 - English Slide 47 Javascript State of the Union 2015 - English Slide 48 Javascript State of the Union 2015 - English Slide 49 Javascript State of the Union 2015 - English Slide 50 Javascript State of the Union 2015 - English Slide 51 Javascript State of the Union 2015 - English Slide 52 Javascript State of the Union 2015 - English Slide 53 Javascript State of the Union 2015 - English Slide 54 Javascript State of the Union 2015 - English Slide 55 Javascript State of the Union 2015 - English Slide 56 Javascript State of the Union 2015 - English Slide 57 Javascript State of the Union 2015 - English Slide 58 Javascript State of the Union 2015 - English Slide 59 Javascript State of the Union 2015 - English Slide 60 Javascript State of the Union 2015 - English Slide 61 Javascript State of the Union 2015 - English Slide 62 Javascript State of the Union 2015 - English Slide 63 Javascript State of the Union 2015 - English Slide 64 Javascript State of the Union 2015 - English Slide 65 Javascript State of the Union 2015 - English Slide 66 Javascript State of the Union 2015 - English Slide 67 Javascript State of the Union 2015 - English Slide 68 Javascript State of the Union 2015 - English Slide 69 Javascript State of the Union 2015 - English Slide 70 Javascript State of the Union 2015 - English Slide 71 Javascript State of the Union 2015 - English Slide 72 Javascript State of the Union 2015 - English Slide 73 Javascript State of the Union 2015 - English Slide 74 Javascript State of the Union 2015 - English Slide 75 Javascript State of the Union 2015 - English Slide 76 Javascript State of the Union 2015 - English Slide 77 Javascript State of the Union 2015 - English Slide 78 Javascript State of the Union 2015 - English Slide 79 Javascript State of the Union 2015 - English Slide 80 Javascript State of the Union 2015 - English Slide 81 Javascript State of the Union 2015 - English Slide 82 Javascript State of the Union 2015 - English Slide 83 Javascript State of the Union 2015 - English Slide 84 Javascript State of the Union 2015 - English Slide 85 Javascript State of the Union 2015 - English Slide 86 Javascript State of the Union 2015 - English Slide 87 Javascript State of the Union 2015 - English Slide 88 Javascript State of the Union 2015 - English Slide 89 Javascript State of the Union 2015 - English Slide 90 Javascript State of the Union 2015 - English Slide 91 Javascript State of the Union 2015 - English Slide 92 Javascript State of the Union 2015 - English Slide 93 Javascript State of the Union 2015 - English Slide 94 Javascript State of the Union 2015 - English Slide 95 Javascript State of the Union 2015 - English Slide 96 Javascript State of the Union 2015 - English Slide 97 Javascript State of the Union 2015 - English Slide 98 Javascript State of the Union 2015 - English Slide 99 Javascript State of the Union 2015 - English Slide 100 Javascript State of the Union 2015 - English Slide 101 Javascript State of the Union 2015 - English Slide 102 Javascript State of the Union 2015 - English Slide 103 Javascript State of the Union 2015 - English Slide 104 Javascript State of the Union 2015 - English Slide 105 Javascript State of the Union 2015 - English Slide 106 Javascript State of the Union 2015 - English Slide 107 Javascript State of the Union 2015 - English Slide 108 Javascript State of the Union 2015 - English Slide 109 Javascript State of the Union 2015 - English Slide 110 Javascript State of the Union 2015 - English Slide 111 Javascript State of the Union 2015 - English Slide 112 Javascript State of the Union 2015 - English Slide 113 Javascript State of the Union 2015 - English Slide 114 Javascript State of the Union 2015 - English Slide 115 Javascript State of the Union 2015 - English Slide 116 Javascript State of the Union 2015 - English Slide 117 Javascript State of the Union 2015 - English Slide 118 Javascript State of the Union 2015 - English Slide 119 Javascript State of the Union 2015 - English Slide 120 Javascript State of the Union 2015 - English Slide 121 Javascript State of the Union 2015 - English Slide 122 Javascript State of the Union 2015 - English Slide 123 Javascript State of the Union 2015 - English Slide 124 Javascript State of the Union 2015 - English Slide 125 Javascript State of the Union 2015 - English Slide 126 Javascript State of the Union 2015 - English Slide 127 Javascript State of the Union 2015 - English Slide 128 Javascript State of the Union 2015 - English Slide 129 Javascript State of the Union 2015 - English Slide 130 Javascript State of the Union 2015 - English Slide 131 Javascript State of the Union 2015 - English Slide 132 Javascript State of the Union 2015 - English Slide 133 Javascript State of the Union 2015 - English Slide 134 Javascript State of the Union 2015 - English Slide 135 Javascript State of the Union 2015 - English Slide 136 Javascript State of the Union 2015 - English Slide 137 Javascript State of the Union 2015 - English Slide 138 Javascript State of the Union 2015 - English Slide 139
Upcoming SlideShare
10 steps to launch an app in the App Store
Next
Download to read offline and view in fullscreen.

273 Likes

Share

Download to read offline

Javascript State of the Union 2015 - English

Download to read offline

Where we are, as Front-End developers? This presentation navigates a short timeline of the computer science focusing on the client-side development as a mean to answer why and what has changed, as well as explore patterns and tendencies for the near future.

English article: https://medium.com/@caiovaccaro/javascript-state-of-the-union-2015-part-1-7ccff74813fa#.8x9y48ohk

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Javascript State of the Union 2015 - English

  1. 1. September 26th, 2015
  2. 2. Javascript State of the Union Huge September 26th, 2015
  3. 3. 1. Introduction
 2.Where we came from
 3.Where we are
 4.Where we are going to 5. Conclusion Agenda
  4. 4. Introduction.
  5. 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
  6. 6. We make digital products.
  7. 7. State of the Union.
  8. 8. 
 1.Why so many changes? 2.What changed? 3.What doesn’t change? Introduction:
  9. 9. Timeline. Introduction
  10. 10. 
 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:
  11. 11. 
 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:
  12. 12. Where we came from.
  13. 13. 1950.
  14. 14. 1950 Fortran (Imperativa) Fortran (Imperative)
  15. 15. 1950 Fortran (Imperativa) Fortran (Imperative) ComputadorComputer
  16. 16. 1950 Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  17. 17. 1950 IBM Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  18. 18. Programming paradigms
 1. Imperative. 2. Functional. 3. Reactive. 4. Object oriented. 5. Event oriented. …
  19. 19. 1950 IBM Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  20. 20. 1950 Lisp (Funcional) Lisp (Functional) Fortran (Imperativa) Fortran (Imperative)
  21. 21. 1950 Lisp (Funcional) Lisp (Functional) Algol Fortran (Imperativa) Fortran (Imperative)
  22. 22. 1970.
  23. 23. 1950 M.P.P 1970 Algol Fortran Lisp
  24. 24. 1950 M.P.P 1970 Algol Fortran Lisp
  25. 25. 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC, OOP) Xerox & Apple
  26. 26. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  27. 27. Software architecture
 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
  28. 28. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  29. 29. M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  30. 30. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  31. 31. 1990.
  32. 32. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  33. 33. Concorrência 386 Concurrency HTML me Haskell OOP) 1990
  34. 34. Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency OOP) 1990 Python Ruby PHP Java (Binding) AMD Yahoo eBay/ Amazon Altavista W3C
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 2000.
  40. 40. 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
  41. 41. Pentium II ache by PHP Java (Binding) avascript IE 2000
  42. 42. by PHP Java (Binding) avascript by PHP Java (Binding) avascript Pentium II IE7... ache IEIE 2000
  43. 43. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google Pentium II by PHP Java (Binding) avascript 2000 IE Ajax JSON XHTML
  44. 44. 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
  45. 45. “Front-end” was almost declarative.
  46. 46. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
  47. 47. 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
  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 Dual core Quad core
  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 Firefox Chrome
  50. 50. 2000 Pentium III Pentium 4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
  51. 51. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... 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 Facebook Gmail
  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 ECMA5 Ajax boom RESTful IE8
  55. 55. How was the code back then?
  56. 56. 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
  57. 57. va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTML ECMA5 Ajax boom RESTful
  58. 58. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
  59. 59. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
  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 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass Mac I Laptops iPhone Touch 2 Google Car 2000
  62. 62. Where we are.
  63. 63. 2010-15.
  64. 64. i7, 6 cores 12 threads 2010 2015
  65. 65. i7, 6 cores 12 threads iPhone iPadSmart TVs 2010 2015
  66. 66. i7, 6 cores 12 threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  67. 67. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  68. 68. GUI and “componentization” trend.
  69. 69. “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
  70. 70. 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile. GUI
  71. 71. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  72. 72. 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
  73. 73. 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
  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 Edge ECMA6 WebAssembly Isomorphic
  75. 75. 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
  76. 76. WTF? What just happened?
  77. 77. From spaghetti to GUIs. Whereweare
  78. 78. 1.AJAX.
 2. MVC. 3. Binding. 4. Modules. FromspaghettitoGUIs:
  79. 79. Client-side’s benefits. Whereweare
  80. 80. 1. Better experience.
 2. Minimum on the Back-End.
 3. Independent Back-End. 4. Independent Front-End. Client-side’sbenefits:
  81. 81. Client-Side’s problems. Whereweare
  82. 82. 1.White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
  83. 83. In 2015.
  84. 84. A possible solution. Whereweare
  85. 85. 1. Functional reactive programming.
 2. Immutable structure.
 3. Smarter query languages. Client-sidein2015,apossiblesolution:
  86. 86. 1.White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
  87. 87. Where we are going to.
  88. 88. Javascript. Wherewearegoingto
  89. 89. ES6/ES7/ES8/Macros.
  90. 90. More browser control.
  91. 91. More Back-End in the Front.
  92. 92. Parallelism and concurrency.
  93. 93. Offline and wearables.
  94. 94. Functional.
  95. 95. Universal/Isomorphic.
  96. 96. Web Assembly.
  97. 97. 2020.
  98. 98. 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.
  99. 99. 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.
  100. 100. Unemployment + Drones + AI + IOT + AR
  101. 101. Conclusion.
  102. 102. 
 1.Why so many changes? 2.What changed? 3.What doesn’t change? Conclusion:
  103. 103. But why so many changes?
  104. 104. What do we do?
  105. 105. Humans + Pain + Web = ∞
  106. 106. 
 1. Get close to our reality experience. 2. Go beyond. Web:
  107. 107. We solve problems.
  108. 108. Computers evolve. If the principles changed there would be no base to evolution.
  109. 109. Thanks: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
  110. 110. 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
  111. 111. 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
  112. 112. 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
  113. 113. Thank you. @caiovaccaro /in/caiovaccaro /caiovaccaro
  114. 114. September 26th, 2015
  • OfriSternGonen

    Jul. 24, 2020
  • luiscarlossilva38

    Sep. 16, 2018
  • KrzysiekKondracki

    Jul. 18, 2018
  • FranciaFranco3

    Sep. 12, 2017
  • renuyarasu

    Aug. 23, 2017
  • TabarekAyad

    Mar. 23, 2017
  • tiger2wander

    Aug. 12, 2016
  • danidanibertelle1

    Jul. 7, 2016
  • YassinMohamed7

    May. 1, 2016
  • AhmedEmad18

    Apr. 13, 2016
  • vershatrivedi

    Apr. 12, 2016
  • SmrutiranjanSahu

    Mar. 23, 2016
  • leesean1

    Feb. 16, 2016
  • marceloooo

    Feb. 16, 2016
  • johanst

    Feb. 6, 2016
  • eeshan5aragon

    Jan. 25, 2016
  • Jasonjgeiger

    Jan. 21, 2016
  • wle54719

    Jan. 11, 2016
  • ArmandoBay

    Jan. 10, 2016
  • hhao99

    Jan. 10, 2016

Where we are, as Front-End developers? This presentation navigates a short timeline of the computer science focusing on the client-side development as a mean to answer why and what has changed, as well as explore patterns and tendencies for the near future. English article: https://medium.com/@caiovaccaro/javascript-state-of-the-union-2015-part-1-7ccff74813fa#.8x9y48ohk

Views

Total views

45,466

On Slideshare

0

From embeds

0

Number of embeds

2,512

Actions

Downloads

176

Shares

0

Comments

0

Likes

273

×