Upload
huge
View
29.261
Download
1
Embed Size (px)
Citation preview
September 26th, 2015
Javascript State of the Union
Huge
September 26th, 2015
1. Introduction2. Where we came from
3. Where we are4. Where we are going to
5. Conclusion
Agenda
Introduction.
Caio Vaccaro.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
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 and browsers. 7. HTML/CSS/JS. 8. JS Frameworks.
Timeline:
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:
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++
M.P.P
Concorrência
386
Concurrency
HTML
Lisp Scheme Haskell
1950 1970Fortran Smalltalk (MVC, OOP)
1990
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386M.P.P
Concorrência
386
Concurrency
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
386M.P.P
Concorrência
386
Concurrency
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
wwwEmail SMTP IRC
AMD Yahoo eBay/Amazon
AltavistaW3C
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386M.P.P
Concorrência
386
Concurrency
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
wwwEmail SMTP IRC
wwwEmail SMTP IRC
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386M.P.P
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
wwwEmail SMTP IRC
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386M.P.P
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
IE
2000.
wwwEmail SMTP IRC
M.P.P
Athlon
Pentium
Pentium IIConcorrência
386M.P.P
Concorrência
386
Concurrency
Netscape
Apache
HTML HTML2
CSS
1950 1970Fortran
1990
Python
Ruby
PHP
Java
(Binding)
Javascript
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
“Front-end” was almost declarative.
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
How was the code back then?
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
Where we are.
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
GUI and “componentization” trend.
“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? What just happened?
From spaghetti to GUIs.Where we are
1. AJAX.2. MVC.
3. Binding.
4. Modules.
From spaghetti to GUIs:
Client-side’s benefits.Where we are
1. Better experience.2. Minimum on the Back-End.3. Independent Back-End.
4. Independent Front-End.
Client-side’s benefits:
Client-Side’s problems.Where we are
1. White page.2. SEO.3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’s problems before 2015:
In 2015.
A possible solution.Where we are
1. Functional reactive programming.2. Immutable structure.3. Smarter query languages.
Client-side in 2015, a possible solution:
1. White page.2. SEO.3. Can be slow.
4. Duplicated logic.
5. No serious scalability.
Client-side’s problems before 2015:
Where we are going to.
Javascript.Where we are going to
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 drones.
• AI medical diagnosis.
• OS with augmented reality.
• 3D printing.
• Mobile payments.
• People and voice recognition.
• Robots.
• 4 million unemployed drivers.
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.
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.
• Marcos Rodrigues.
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
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
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
Thank you.
@caiovaccaro /in/caiovaccaro /caiovaccaro
September 26th, 2015