Download - Vue.js Use Cases
1
Vue.js Use Cases
Igor Nesterenko
Lead Software Engineer
18.12.2017
2
Agenda
1. Why Vue.js ?
2. Good Parts of Vue.js
3. Case 1 Proof of Concept
4. Case 2 Legacy non-SPA
5. Case 3 Legacy SPA
6. Case 4 Diversity in team experience
7. Case 5 From POC to MVP
8. Summary
3
Terms
1. SPA - single page application 2. POC - proof of concept3. MVP - minimal viable product4. Progressive Framework - set of libraries developed by the same
team with high attention to backward compatibility and features interoperability
5. JavaScript Fatigue - time spend on configuring js environment
44
Why Vue.js?
5
Github Stars Over Years
• What concern it helps to solve ?
• Why Vue.js is growing so rapidly?
• Is it not enough React.js ?
• Why Angular in the bottom, however it’s on a top list in hiring ?
Photo is example for
placement and max. size
66
Good Parts of Vue.js
7
Frameworks Like Top Sport Cars
Any ideas which one
is React, Angular or
Vue.js ?
8
Pragmatic Overview
● Overview few most important aspects when choosing any solution.
● What concepts I have to learn to start using solution ?
● What main special traits of Vue.js to compare to React and Angular ?
9
Compare by few aspects
10
Vue Comparison
● Vue’s Docs is rockstar● Vue is smallest one● Official Router, unlike React● Official Store unlike Angular and React● Official Tests Utils, however in beta● MIT License, however No Big Company behind
11
Thing to learn
12
Vue Things To Learn
● ES 5 and HTML would be enough
● Even easier that React
● Much more easier the Angular
13
Good parts of Vue.js
● Can run in browser natively
● It’s joy to learn
● Vue familiar as for Angular as for React developer
● Official guidelines, tools and plugins to scale application
1414
Case 1 Proof of Concept
15
Case 1 Proof of concept
● You have some idea to validate before presenting to customer
● Customer ask you to make some prototype of new feature or try new approach
● Just few days
16
Just include Vue.js in HTML
• no JS fatigue
• clean syntax
17
Use components in barebone HTML
• define components as you go
• constraints on child to parent props changes
18
Small POC refactoring
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
1919
Case 2 Legacy non-SPA
20
Refactor Old-School JSP
21
Add Vue Component Directly to JSP
22
Separate Components by Files
23
Just Compare with Single File Component
24
Move user-locales to separate JSP
25
Vue Integration
26
Refactored JSP
Old JSP
27
Case 1 Summary
● courage to learn jsp/asp or php ;-)● pair programming● share best practices of component development● educate non-Components people ● ! be aware of security issues
28
Case 1 Summary
● no additional tooling
● Single File Component like dev experience for free
● no REST API pre-requirements● more clean and maintainable code
2929
Case 3 Legacy SPA
30
Case 3 Legacy SPA
● Can’t evolve/maintain, outdated stac
● Example: Backbone, Marionet, AngularJS, RequireJs
● Usual backbone problems: component composition and state management
● Danger ! in some cases the only way to rewrite app from scratch
31
Refactor Backbone App
Backbone.View
Backbone.Model
DOMTemplateConvert Data to String Direct DOM Manipulations
Listen for changes and
change data through
methods
32
Build Backbone View adapter for Vue
Backbone.View
BackboneVueAdapter
Override Event Delegation
and use component instead
of template
33
Build Backbone View adapter for Vue
BackboneVueAdapter
Backbone.ModelDOM
VueComponent
Pass Props to Update Component
Direct DOM Manipulations
Reactive
Updates
Listen for changes and
change data through
methods
34
Build Backbone View adapter for Vue
BackboneVueAdapter
Backbone.ModelDOM
VueComponent
Listen for changes and
change data through
methods
Reactive
Updates
Pass Props and Listen for
Events
35
Leave BackboneVueAdapter for Smart Components
BackboneVueAdapter
Backbone.Model
VueComponent
Listen for changes and
modify data through
methods
VueComponent VueComponent
Pass Props and Listen for
Events
Pass Props and Listen for
Events
36
BackboneVueAdapter Example
37
BackboneVueAdapter Usage
38
Rewrite Templates to Components
39
Rewrite Templates to Components
40
Case 3 Legacy SPA - Summary
● No additional tools required● Vue allows to decouple Backbone.View from DOM● Limit places with data manipulation● Allows to refactor app step by step into component
architecture● ! Don’t modify the same DOM attributes
4141
Case 4 Diversity in Team Experience
42
Case 4 Diversity in Team Experience
● good for newbie
● familiar for Angular people, because templates syntax
● familiar for React people, because only components philosophy
● as result it’s a good tool for team with a big diversity in experience
4343
Case 5 From POC to MVP
44
Case 5 From POC to MVP
●Use vue-cli to checkout project templates
●Switch to Single File Components
●State Management
●Unit Testing and e2e
45
Single File Component
46
Try Vuex
47
Structure your App
48
Testing
● vue-test-utils for components
● nightwatch for e2e for critical use cases
4949
Summary
50
Summary
● jQuery-like first user experience
● allows you to go in unfriendly environments
● all you need for complex UI solutions
●may helps in dealing with team diversity
●provide a progressive framework, so you can evolve your POC in scalable app
51
Thank you