Javascript State of the Union 2015

26 de Setembro, 2015

Javascript State of the Union

Huge


1. Introdução2. De onde viemos3. Onde estamos

4. Para onde estamos indo

5. Conclusão

Agenda

Introdução.

Caio Vaccaro.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

Nós fazemos produtos digitais.

State of the Union.

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

Introdução:

Timeline.Introdução

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:

De onde viemos.

Fortran(Imperativa)

1950

Fortran(Imperativa)

Computador

1950

Fortran(Imperativa)

Computador

Lisp(Funcional)

1950

1950

Fortran(Imperativa)

Computador

Lisp(Funcional)

IBM

Paradigmas de programação

1. Imperativo.

2. Funcional.

3. Reativo.

4. Orientado a objeto.

5. Orientado a evento.

…

1950

Fortran(Imperativa)

Computador

Lisp(Funcional)

IBM

1950

Fortran(Imperativa)

Lisp(Funcional)

1950

Lisp(Funcional)

Fortran(Imperativa)

Algol

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


Arquitetura de software

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++

HTML

M.P.P

Lisp Scheme Haskell

1950 1970

Algol


C C++

Concorrência

386

HTML

M.P.P

Lisp Scheme Haskell

1950 1970

Algol


Concorrência

386

C C++

HTML

M.P.P

Lisp Scheme Haskell

1950 1970Fortran Smalltalk (MVC, OOP)

1990

Concorrência

386

M.P.P

Athlon

Pentium

Pentium IIConcorrência

386

1950 1970Fortran


1990

Python

Ruby

PHP

Java

(Binding)

AMD Yahoo eBay/Amazon

AltavistaW3C


AltavistaW3C

M.P.P

Athlon

Pentium


386

1950 1970Fortran

1990

Python

Ruby

PHP

Java

(Binding)

wwwEmail SMTP IRC


AltavistaW3C

M.P.P

Athlon

Pentium


386

HTML HTML2

CSS

1950 1970Fortran

1990

Python

Ruby

PHP

Java

(Binding)

wwwEmail SMTP IRC

wwwEmail SMTP IRC Netscape

Apache

HTML HTML2

CSS

1950 1970Fortran

1990

Python

Ruby

PHP

Java

(Binding)

Javascript

M.P.P

Athlon

Pentium


386


Apache

HTML HTML2

CSS

1950 1970Fortran

1990

Python

Ruby

PHP

Java

(Binding)

Javascript

M.P.P

Athlon

Pentium


386

IE

M.P.P

Athlon

Pentium

Pentium II


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

O “Front-end” era praticamente declarativo.


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

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

Como era o código nessa época?

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

Dojo

Prototype.js

YUIjQuerymooToolsCoffeeScriptJavascriptMVC

Sass

iMac I Laptops iPhoneTouch 2

Google Car2000

Onde estamos.

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

Trend de GUI e “componentização”.

“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? O que aconteceu?

Do spaghetti às GUIs.Onde estamos

1. AJAX.2. MVC.

3. Binding.

4. Modules.

Do Spaghetti às GUIs

Benefícios do Client-Side.Onde estamos

1. Experiência melhor.2. Mínimo no Back-End.3. Back-End independente.

4. Front-End independente.

Benefícios do Client-side

Problemas do Client-Side.Onde estamos

1. Página branca.2. SEO.3. Pode ser devagar.

4. Lógica duplicada.

5. Falta de escalabilidade.

Problemas do Client-side antes de 2015

Em 2015.

Uma possível solução.Onde estamos

1. Programação funcional reativa.2. Estruturas imutáveis.3. Query languages mais inteligentes.

Client-side em 2015, uma possível solução

1. Página branca.2. SEO.3. Pode ser devagar.

4. Lógica duplicada.

5. Falta de escalabilidade.

Problemas do Client-side antes de 2015

Para onde estamos indo.

Javascript.Para onde estamos indo

ES6/ES7/ES8/Macros.

Mais controle nos browsers.

Mais Back-End no Front.

Paralelismo e concorrência.

Offline e wearables.

Funcional.

Universal/Isomorphic.

Web Assembly.

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.

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.

Desemprego + Drones + IA + IOT + AR

Conclusão.

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

Conclusão:

Mas por que tantas mudanças?

O que nós fazemos?

Humans + Pain + Web = ∞

1. Aproximar à nossa realidade. 2. Ir além.

Web:

Nós resolvemos problemas.

Computadores evoluem. Se os princípios mudassem não haveria

base para evolução.

Agradecimentos:

• João Pagnoncelli.

• Rafael Gomes.

• Gabriel Godoy.

• Kevin Chevallier.

• Isabella Silveira.

• Douglas Monteiro.

• Marcos Rodrigues.

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

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

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

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

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

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

Obrigado.

@caiovaccaro /in/caiovaccaro /caiovaccaro

Javascript State of the Union 2015

Technology

Transcript of Javascript State of the Union 2015