Entendendo Javascript - 5

Exemplos que utilizam Javascript

https://soundcloud-redux.herokuapp.com/

Fremeworks de Frontend

• Angular

• Vue

• React

• EXT

NPM trends

http://stateofjs.com/2016/frontend/

Fremeworks de Frontend

• Todos são componentizados, ou seja, recebem um input e renderizam algum componente na tela com esses parâmetros.

• React e Vue são excelentes ao tratar componentes mais simples

Building A Component-Based Web UI With Modern JavaScript Frameworks

 Typescript vs. ES6 vs. ES5

• React foca no uso de Javascript ES6;
• Angular 1, Ext e Vue usam Javascript ES5 ou ES6;
• Angular 2 e 4 usam TypeScript.

Templates

Angular exige conhecimento da sintaxe específica para usar algumas funcionalidades (ngIf ou ngFor) 

• Angular coloca JS no HTML
• React coloca HTML no JS com padrão JSX
• EXT suprime HTML

Ponto importante aqui é notar, qual é mais poderoso, HTML ou JS? 

Templates

VUE usa o conceito um pouco diferente, chamado "Single File Component", onde os templates, scripts e estilos ficam armazenados em apenas um arquivo, mas em seções diferentes

https://codesandbox.io/s/o29j95wx9

Templates

Framework vs Biblioteca

Angular e EXT são frameworks, são a "solução completa" com seus conceitos fortes e estabelecidos, não é preciso procurar outras coisas compatíveis, é pegar e usar.

Vue e React são mais voltados a bibliotecas, são universalmente flexíveis, e podem ser pareadas com todo o tipo de biblioteca. Contudo... com grandes poderes vem grandes responsabilidades.

Framework vs Biblioteca

Angular, EXT e React caem em vários conceitos que são necessários aprender para utilizar plenamente as ferramentas, você precisa conhecer JS para aí aprender o framework X ou Y.

VUE elimina essa barreira com simplicidade, facilidade de uso e clareza de código sendo o mais intuitivo dos 4, todas as coisas são bem diretas.

Data bind

One-way vs. Two-way binding

Componentes descrevem a interface em qualquer momento do tempo. Quando os dados mudam, o framework precisa re-desenhar tudo o que for necessário para que os dados permaneçam sempre atualizados.

Angular utiliza por padrão o two-way data binding, enquanto os outros por padrão utilizam one-way (mas podem ser adaptados se necessário)

http://n12v.com/2-way-data-binding/

MVC

Angular traz o conceito de MVC integrado, enquanto os outros são mais V, e se necessário o desenvolvedor precisa criar o M e o C.

App

Algumas bibliotecas mais ambiciosas tentam tornar mais acessível o desenvolvimento de apps mobile apresentando algumas propostas, notoriamente React e Angular.

Para soluções nativas o Angular tem o NativeScript e o React tem o React-native.

Para uma solução híbrida o Angular tem o Ionic com o Cordova e o EXT apresenta suporte na versão 6.

Curva de Aprendizado

Angular exige conhecimento de Typescript, aprender como o framework funciona e conhecer os atributos adicionais das tags. Pode ser uma curva grande de aprendizado. 

React é flexível, utiliza ES6 o que é bom, porém pouco difundido e a sintaxe do JSX é de fácil compreensão, mas exige conhecimento e decisões de arquitetura para utilizar React em todo seu potencial 

Curva de Aprendizado

Vue é o mais simples de todos, com uma baixa curva de aprendizado e facilitando a entrada de novos desenvolvedores no projeto.

Ext embora tenha um fluxo simples, ele exige acompanhamento constante de documentação devido ao grande volume de componentes e é desejável entendimento da estrutura do framework. 

https://www.madewithangular.com/

• Principal notação: Typescript
• Templates: HTML com atributos específicos do framework
• Framework ou biblioteca? framework
• Data bind: MVC two-way
• Solução para app: Nativa (NativeScript) ou Híbrida (Ionic)
• Curva de aprendizado: Alta

• Principal notação: ES6
• Templates: JSX
• Framework ou biblioteca? biblioteca
• Data bind: one-way padrão mas permite two-way
• Solução para app: Nativa (react-native)
• Curva de aprendizado: Alta

https://facebook.github.io/react-native/showcase.html

• Principal notação: ES5 ou ES6
• Templates: single-file-component com arquivos .vue
• Framework ou biblioteca? biblioteca
• Data bind: one-way padrão mas permite two-way
• Solução para app: N/A
• Curva de aprendizado: Baixa

https://madewithvuejs.com/

• Principal notação: ES5
• Templates: JS
• Framework ou biblioteca? framework
• Data bind: one-way
• Solução para app: Versão 5 apresenta responsividade, versão 6 incorporou solução híbrida
• Curva de aprendizado: Média

https://examples.sencha.com/extjs/6.0.1/examples/

Ok, qual eu escolho?

Se gosto de TypeScript: Angular

Eu gosto de flexibilidade e grandes ecosistemas: React

Eu gosto da ideia de "Tudo é Javascript": React ou Ext

Eu gosto de código limpo e baixa curva de aprendizado: Vue

Sozinho ou em um time pequeno: Vue ou React

Aplicações grandes: Angular, React ou Ext

Aplicações mobile: React

Trabalho com designers e quero um HTML limpo: Angular ou Vue

Gostei do Vue mas tenho medo do ecossistema limitado: React

Dúvidas?

That's all folks!