Please enable JavaScript.
Coggle requires JavaScript to display documents.
React JS, Angular & Vue JS - udemy.com/angular-reactjs-vuejs…
React JS, Angular & Vue JS - udemy.com/angular-reactjs-vuejs-quickstart-comparison/learn/v4/content - kruschecompany.com/blog/post/angular-vs-react-vs-vue
-
-
Lodash - Entrega modular, performasse e extras.
Libraries (jQuery e Lodash) vs Frameworks (React, Angular e Vue)
Vue - Trabalha com templates. Instancias, com propriedades e tags para arquivos html. Não precisa escrever para o DOM o framework faz isso.
Build tools packages (Webpack e Babel) - Minify, Optimize, Bundle, Enable Features...
-
- Understanding JavaScript Frameworks in General
Fullstack Applications - Servidor retorna multiplas páginas e o js apenas implementa (views).
Pros - SEO amigável, toneladas de frameworks e tutoriais, simples para segurança de soluções e alta change de não precisar trabalhar com js.
Cons - Tempo lerdo de reação (página precisa ser carregada), fácil de misturar apresentação e lógica de negócio e possibilidade de múltiplas páginas.
Single Page Applications - Servidor retorna apenas uma página e js completa o controle rendendo com o DOM.
Pros - Alta velocidade de reação, separação da apresentação e lógica de negócio, boa experiência para o usuário e possibilidade de usar offline.
Cons - SEO é difícil, segurança precisa de mais cuidados e não vai funcionar sem js.
-
-
3.2. Criando uma aplicação básica Vue: Html (id="app") e instancia arquivo js (new Vue({ });). Cada instancia faria parte de um html. el: #app - Controla um elemento html. data: {} - Pega o js object como argumento e usa na instancia de view. {{}} - Interpolação de string.
-
3.4. Lidando com Eventos e Atualizando o DOM: directivas - São adicionadas nos elementos html para realizar tarefas. methods: {} - São adicionadas as funções de interação com o vue.
-
-
-
-
-
-
-
3.12. Criando e usando componentes: Vue.component('selector-name', { data: function() {} });<selector-name></selector-name><selector-name></selector-name>
3.13. Passando Data em Componentes: <selector-name v-bind:username="'Chris'"></selector-name><selector-name v-bind:username="'Anna'"></selector-name>
-
-
-
3.17. Criando Vue.js Projetos com o Vue CLI: templates oficiais - webpack, webpack-simple, browserify, browserify-simple e simple.
3.18. É possível criar componentes globais e locais. Import, extends e router.
- Understanding Workflows & Webpack
Funcionamento do Webpack: Entry & Output. Modules, rules & plugins.
- React.js - An Introduction
-
-
-
-
-
5.6. Passando Data por Componentes: Construtor especial chamado Props e passando como método no elemento
-
-
-
5.10. Configurando CSS dinamicamente: Adicionando o style como paramêtro. E className nos elementos.
-
-
-
-
5.15. Adicionando react router: react-router-dom, <Router><Router/> e import os componentes.
7.7. Veredito:
Comparação: Angular: Vue: React:
Learning Curve - + +
Downscaling/MPAs - + =
Upscaling/SPAs + = =
Performance = + =
Dev to Production = + +
Popularity/Jobs + = +
7.1. Curva de Aprendizado:
- Angular -> TypeScript & Workflow; Components, modules & Syntax; Dependency Injection & "Colocando tudo junto"; Otimização
- React -> ES6 & JSX; Tudo é JS; Administração de State; Otimização
- Vue.JS -> ES5 & "Controlando o DOM"; ES6 & .vue Files; Orquestração de componentes, comunicação e rotas; Otimização
- Geral -> Angular(-), Vue.JS(+) e React(-)
7.2. Pequena Escala/MPAs:
- É possível usar através de cdn(Continous Delivery Network) importando JS e começando a usar? -> Angular(Não -), Vue.JS(Sim +) e Reaact(Sim +)
- O framework é aplicável para Multi-Page-Applications (MPAs)? -> Angular(Não -), Vue.JS(Sim +) e Reaact(Talvez =)
- É necessário um workflow de compilação mais complexo / recomendado (para aplicativos "simples")? -> Angular(Sim -), Vue.JS(Não +) e Reaact(Sim -)
- O framework vem com muita sobrecarga? -> Angular(Sim -), Vue.JS(Não +) e Reaact(Não -)
- Geral -> Angular(-), Vue.JS(+) e React(-)
7.3. Alta Escala/SPAs:
- Você pode escrever e manter um código complexo ou muito código? -> Angular(Não +), Vue.JS(Talvez =) e React(Talvez =)
- Você precisa confiar em muitos pacotes de terceiros? -> Angular(Não +), Vue.JS(Talvez =) e React(Sim -)
- Capacidades de otimização? -> Angular(Sim +), Vue.JS(Talvez =) e React(Talvez =)
- Facilidade de gestão do state? -> Angular(Talvez =), Vue.JS(Sim +) e React(Talvez =)
- Geral -> Angular(+), Vue.JS(=) e React(=)
7.4. Performace:
- Geral -> Angular(Melhor para grandes aplicações =), Vue.JS(+) e React(=)
7.5. Desenvolvimento para Produção:
- Angular -> Dev Code -> Templates NOT compiled
- Vue.JS -> (Runtime only) Dev Code -> Templates compiled
- -> (With Compiler) Dev Code -> Templates NOT compiled
- React -> Dev Code -> "Everything is JavaScript"
- Geral -> Angular(=), Vue.JS(+) e React(+)
7.6. Popularidade / Trabalhos:
- Geral -> Angular(+), Vue.JS(=) e React(+)
- Angular (2 & 4) - An Introduction
-
-
-
5.4. Projeto com Angular CLI: É a única forma de usar o angular, por causa do TypeScript.
5.5. Entendendo os Componentes e App Componentes: Toda aplicação é construída com componentes e existe o componente principal.
-
-
-
-
-
-
-
-
5.14. Usando múltiplos componentes: Component() e criando um template.
5.15. Passando Data entre componentes: input()
-
-
- Considerations for solution
Angular:
- Typescript
- Programação Orientada a Objetos
- Applicativo Escalável
- Envolve mais desenvolvedores no Projeto
- Trabalha com designers e precisa de HTML limpo
React:
- É flexível
- Preferível para grandes ecossistemas
- Não quer precisa escolher entre vários pacotes
- Usa bastante JS
- Trabalhar com uma equipe de médio porte, mas pode crescer
- Como o Vue.js, mas o seu ecossistema é muito limitado para o seu projeto
Vue.JS:
- Código limpo
- curva de aprendizagem mais simples
- Framework leve
- Trabalhar sozinho ou com uma pequena equipe
- Precisa de arquivos HTML limpos