Javascript State of the Union 2015 - English

September 26th, 2015

Javascript State of the Union

Huge


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


ComputadorComputer

1950


Lisp(Funcional)Lisp(Functional)

ComputadorComputer

1950

IBM



ComputadorComputer

Programming paradigms

1. Imperative.

2. Functional.

3. Reactive.

4. Object oriented.

5. Event oriented.

…

1950

IBM



ComputadorComputer

1950



1950


Algol


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


Software architecture

1. MV*.

2. Microservices.

3. Peer-to-peer.

4. Publish-subscribe.

5. Dependency injection.

…

1950

M.P.P

1970

Algol

Fortran

Lisp


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


C C++

1990.

M.P.P

Concorrência

386

Concurrency

HTML

Lisp Scheme Haskell

1950 1970

Algol


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


1990

Python

Ruby

PHP

Java

(Binding)

AMD Yahoo eBay/Amazon

AltavistaW3C


AltavistaW3C

M.P.P

Athlon

Pentium


386M.P.P

Concorrência

386

Concurrency

1950 1970Fortran

1990

Python

Ruby

PHP

Java

(Binding)

wwwEmail SMTP IRC


AltavistaW3C

M.P.P

Athlon

Pentium


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


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


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


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


Apache

IEIE


AltavistaW3C

Google

M.P.P

Athlon

Pentium

Pentium II

1970Fortran

Python

Ruby

PHP

Java

(Binding)

HTML HTML2

CSS

Javascript

2000

IEAjax JSON

XHTML


Apache

IEIE


AltavistaW3C

Google

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.


Athlon

Pentium

Pentium II


AltavistaW3C

Google

HTML HTML2

CSS

Javascript

2000

Wikipedia

Netflix

Hotmail

Ajax JSON

XHTML


Apache

IEIE


Athlon

Pentium

Pentium II


AltavistaW3C

Google

HTML HTML2

CSS

Javascript


Apache

IE7...

Wikipedia

Netflix

Hotmail

Ajax JSON

XHTML

2000

Windows 3.1 iMac I Laptops


Athlon

Pentium

Pentium II


AltavistaW3C

Google

HTML HTML2

CSS

Javascript


Apache

IE7...

Wikipedia

Netflix

Hotmail

Ajax JSON

XHTML

2000

Windows 3.1 iMac I LaptopsDual core

Quad core


Athlon

Pentium

Pentium II


AltavistaW3C

Google

HTML HTML2

CSS

Javascript


Apache

IE7...

Wikipedia

Netflix

Hotmail

Ajax JSON

XHTML

2000


Quad core

Firefox

Chrome

2000



AltavistaW3C

Google

HTML HTML2

CSS

wwwEmail SMTP IRC IE7...

Wikipedia

Netflix

Hotmail

Ajax JSON

XHTML


Quad core

Firefox

Chrome

Ajax JSON

XHTML

Wikipedia

Netflix

Hotmail

2000

Dojo

Prototype.js



AltavistaW3C

Google

HTML HTML2

CSS


Dual core

Quad core

Firefox

Chrome

Ajax JSON

XHTML

Wikipedia

Netflix

Hotmail

2000

Dojo

Prototype.js



AltavistaW3C

Google

HTML HTML2

CSS


Dual core

Quad core

Firefox

Chrome

Ajax JSON

XHTML

Wikipedia

Netflix

Hotmail

2000

Dojo

Prototype.js



AltavistaW3C

Google

HTML HTML2

CSS


Dual core

Quad core

Firefox

Chrome

Facebook

Gmail

Ajax JSON

XHTML

Wikipedia

Netflix

Hotmail

2000

Dojo

Prototype.js



AltavistaW3C

Google

HTML HTML2

CSS


Dual core

Quad core

Firefox

Chrome

Facebook

Gmail

ECMA5

Ajax boomRESTful

IE8

How was the code back then?

Wikipedia

Netflix

Hotmail

2000

Dojo

Prototype.js



AltavistaW3C

Google

Ajax JSON

XHTMLHTML HTML2

CSS


Dual core

Quad core

Firefox

Chrome

Facebook

Gmail

ECMA5

Ajax boomRESTful

IE8

Python

Ruby

PHP

Java

(Binding) Node

2000


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


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


Sass

Ajax JSON

XHTMLHTML HTML2

CSS

ECMA5

Ajax boomRESTful

Dojo

Prototype.js


Sass

iMac I Laptops iPhoneTouch 2

Google Car2000

Where we are.

2010-15.

i7, 6 cores12 threads

2010 2015


iPhone iPadSmartTVs

2010 2015


iPhone iPadSmartTVs

IE9

IE10 IE11

2010 2015


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


HTML5

CSS3

ECMA5

Ajax boomRESTful

iPhone iPadSmartTVs

IE9

IE10 IE11

2010 2015


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


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


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

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

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

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
