Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Vue.js | Angular | React
Veja diferenças de cada framework!
José Barbosa | @kidchenko
José Barbosa | @kidchenko
• Programador na Lambda3;
• Cloud Computing <3 Azure;
• Ecossistema de Startups;
• .Net, JavaScr...
Acompanhe
nosso
podcast:
http://blog.lambda3.com.br/category/p
odcast
http://blog.evanyou.me/2015
/10/25/vuejs-re-introduction/
REACTIVITY
Keeping the state and the view in sync is hard. Or is it?
index.js
index.html
index.js
index.html
COMPONENTS
Ok the data binding is neat for small demos. What about big apps?
index.js
index.html
MODULARITY
It’s 2015 and we shouldn’t put everything in the global scope!
ComponentA.js
App.js
MyComponent.vue
example.vue
ROUTING
So I want to build an app, but where’s the router?
index.js
app.vue
Two Way binding
Here where the magic happens?
index.js
index.html
Render a List
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
index.js
index.html
Handle User Input
Your app do somethig?
index.js
index.html
Todo Example
Show me the code!
index.js
index.html
About Vue.js and
AngularJS comparison
Angular Modules
So I want to build an app, but where’s the router?
Directives
Filters
Vue.js vs Angular
• Vue.js do francês; visão;
• Vue.js é beeeeem mais simples que o angular ele é apenas a view;
• Ele é m...
Vue.js or React.js, which
should I choose to make
frontend?
https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=1
https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=1
https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=2
Iterating
Props and Components
Vue.js vs React
• Ambos possuem composição de View components reativos;
• React é baseado em Virtual DOM, quando o estado ...
Vue.js vs React
• JSX;
• React.render pode ficar macarrônico;
• Vue.js possui um data-binding leve;
• O time do react quer...
Single File Components
Flux/Redux para Vue.js
Vuex
https://github.com/vuejs/vuex
Revue
store.js
https://github.com/revue/revue
Revue
component.js
https://github.com/revue/revue
Referências
• http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
• https://vuejs.org/guide/index.html
• https://fade...
Obrigado!
Dúvidas?
José Barbosa | @kidchenko
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Prochain SlideShare
Chargement dans…5
×

Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!

5 031 vues

Publié le

Vuejs, Angularjs e Reactjs são os três principais três frameworks front-end do momento. Veja algumas semelhanças e diferenças entre cada um.

Palestra no meetup de vue.js

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!

  1. 1. Vue.js | Angular | React Veja diferenças de cada framework! José Barbosa | @kidchenko
  2. 2. José Barbosa | @kidchenko • Programador na Lambda3; • Cloud Computing <3 Azure; • Ecossistema de Startups; • .Net, JavaScript e Front-end Developer; • Docker <3;
  3. 3. Acompanhe nosso podcast: http://blog.lambda3.com.br/category/p odcast
  4. 4. http://blog.evanyou.me/2015 /10/25/vuejs-re-introduction/
  5. 5. REACTIVITY Keeping the state and the view in sync is hard. Or is it?
  6. 6. index.js
  7. 7. index.html
  8. 8. index.js
  9. 9. index.html
  10. 10. COMPONENTS Ok the data binding is neat for small demos. What about big apps?
  11. 11. index.js
  12. 12. index.html
  13. 13. MODULARITY It’s 2015 and we shouldn’t put everything in the global scope!
  14. 14. ComponentA.js
  15. 15. App.js
  16. 16. MyComponent.vue
  17. 17. example.vue
  18. 18. ROUTING So I want to build an app, but where’s the router?
  19. 19. index.js
  20. 20. app.vue
  21. 21. Two Way binding Here where the magic happens?
  22. 22. index.js
  23. 23. index.html
  24. 24. Render a List todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ]
  25. 25. index.js
  26. 26. index.html
  27. 27. Handle User Input Your app do somethig?
  28. 28. index.js
  29. 29. index.html
  30. 30. Todo Example Show me the code!
  31. 31. index.js
  32. 32. index.html
  33. 33. About Vue.js and AngularJS comparison
  34. 34. Angular Modules So I want to build an app, but where’s the router?
  35. 35. Directives
  36. 36. Filters
  37. 37. Vue.js vs Angular • Vue.js do francês; visão; • Vue.js é beeeeem mais simples que o angular ele é apenas a view; • Ele é micro, mais fino, um framework apenas para sua view; • Angular usa 2 way data binding; Vue.js default é one-way. Com fluxo de pai para filho entre os componentes; • Baseado em componentes diretivas apenas encaspulam o DOM; • Vue.js tem melhor performance, Angular é baseado em dirty checking. Vue.js é baseado em Sistema Assincrono de Filas;
  38. 38. Vue.js or React.js, which should I choose to make frontend?
  39. 39. https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=1
  40. 40. https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=1
  41. 41. https://laracasts.com/discuss/channels/vue/vuejs-or-reactjs-which-should-i-choose-to-make-frontend?page=2
  42. 42. Iterating
  43. 43. Props and Components
  44. 44. Vue.js vs React • Ambos possuem composição de View components reativos; • React é baseado em Virtual DOM, quando o estado muda, Virtual DOM aplica o patch no real DOM; • Virtual DOM++; • Vue.js usa o DOM como template e mantém uma referência para a atual os bindings; • Vue.js possui dependência do DOM; Virtual DOM permite ao React ser isomórfico.
  45. 45. Vue.js vs React • JSX; • React.render pode ficar macarrônico; • Vue.js possui um data-binding leve; • O time do react quer fazer do React uma plataforma agnostica à UI (React Native), Vue.js é focado em uma solulção para web. • React é usado com functional programming patterns. • Arquiteturas Flux/Redux com Vuex e Revue • CSS-in-JS solutions vs Vue single file component;
  46. 46. Single File Components
  47. 47. Flux/Redux para Vue.js
  48. 48. Vuex https://github.com/vuejs/vuex
  49. 49. Revue store.js https://github.com/revue/revue
  50. 50. Revue component.js https://github.com/revue/revue
  51. 51. Referências • http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ • https://vuejs.org/guide/index.html • https://fadeit.dk/blog/2015/05/14/getting-started-with-vuejs-angularjs-perspective/ • https://vuejs.org/guide/comparison.html • https://rlafranchi.github.io/2016/05/03/vue-vs-react/ • https://engineering.footballradar.com/from-a-react-point-of-vue-comparing-reactjs-to- vuejs-for-dynamic-tabular-data/ • https://blog.codeship.com/consider-vuejs-next-web-project/ • http://react-etc.net/entry/comparison-js-angular-react-vue • https://github.com/vuejs/vuex • https://github.com/revue/revue • https://www.youtube.com/watch?v=6I_GwgoGm1w
  52. 52. Obrigado! Dúvidas? José Barbosa | @kidchenko

×