Progressive Javascript: Why React when you can Vue?
1 like144 views
This document outlines the advantages of using Vue.js for web development, highlighting its gentle learning curve, modularity, and performance. It covers key features such as two-way data binding, component structure, and state management with Vuex, along with comparisons to React. The document also includes tips for scalability, testing, and migrating projects to Vue.js.
![29
[ Rapid App Dev with VueJS ]
DEMO](https://image.slidesharecdn.com/jsfoopune2018-181205180311/85/Progressive-Javascript-Why-React-when-you-can-Vue-29-320.jpg)
Progressive Javascript: Why React when you can Vue?
- 1. Progressive JavaScript Why React when you can Vue?
- 2. Hello! I am Sonal Raj 5 year old JS developer Full Stack Enthusiast 2
- 4. The Vue-logy 4 ◎ Gentle learning curve ◎ Lightweight ◎ Flexible ◎ Modular ◎ Highly Performant Plus, incredible development speed with ready-to-use plug-ins.
- 5. 5
- 6. 6 Interpolations Directives – V-attributes that modify the DOM Filters
- 7. 7 Computed props are complex manipulations of reactive props, cached based on their dependencies
- 8. 8 Watchers are generic way to react to data changes, for asynchronous or expensive operations
- 9. 9 Reactivity
- 10. 10 Components Ok the data binding is neat for small demos. What about big apps?
- 11. 11 Modularity You will be disappointed if you still love global scopes!
- 12. 12 Two Way Binding The VueJS magic!
- 13. 13 Handling User Inputs Make the app communicative.
- 14. 14 What to do for Application Scalability
- 15. 15 Full Stack Use MVVM pattern with focus on the View model, connecting View and model with two-way reactive data-binding ◎ Veux ◎ Vue Router ◎ Vue Test Utils ◎ Vue CLI
- 16. 16 Vue CLI Project Generator for initial project setup and scaffolding
- 17. 17 Single File Components ◎ Encapsulate template, javascript and CSS ◎ Webpack / Browserify build tools ◎ Component Scoped CSS ◎ VueLoader
- 18. 18 Vue Routing ◎ Dynamic routing matching with params and query params ◎ Nested routes, named routes ◎ Redirects ◎ Aliases
- 19. 19 Veux
- 20. 20 Veux State Management ◎ ELM-inspired, flux-like ◎ Storage of the application state ◎ Redirects ◎ Aliases
- 21. 21 Benchmarking
- 22. 22 React v/s Vue ◎ React wins in richness of its ecosystem and custom renderers ◎ Vuejs wins in all performance profiles (Thanks to virtual DOM) ◎ Vuejs faster dev mode with up to 10xframe rate
- 23. 23 Speed Stats
- 24. 24
- 25. 25 Porting of large projects to VueJS Common Mistakes
- 26. 26 Porting of large projects to VueJS Lessons Learnt
- 28. 28 Testing in VueJS ◎ Testing Filters ◎ Component Testing tools ◎ Property change verifications ◎ Veux Store Testing ◎ Event Tests
- 29. 29 [ Rapid App Dev with VueJS ] DEMO
- 30. 30 Extra Productivity Tools ◎ JSX – If you are a fan! ◎ Combile with redux using vue-redux ◎ Can use redux-sagas with vue-sagas ◎ vue-migration-helper ◎ awesome-vue
- 31. Thanks! Any questions? You can find me at sonal-raj@github & [email protected] 31