Entendendo Javascript - 5
Exemplos que utilizam Javascript
Fremeworks de Frontend
-
Angular
-
Vue
-
React
-
EXT
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
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
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)
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.
- 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
- 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
- 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
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!
