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.

1. Progressive
JavaScript
Why React when you can Vue?

2. Hello!
I am Sonal Raj
5 year old JS developer
Full Stack Enthusiast
2

3. What is VueJS?
3

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

27. 27
Migration Tips and
Tricks

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 & sonal.nitjsr@gmail.com
31