The presentation deals with the special use cases of Vue.js, contains an overview of existing solutions like React, Angular and compare them on a high level, shows in which cases Vue.js can boost developers productivity. This presentation by Igor Nesterenko (Lead Software Engineer, Consultant, GlobalLogic Kharkiv) was delivered at GlobalLogic Kharkiv JS TechTalk on December 18, 2017.

1. 1
Vue.js Use Cases
Igor Nesterenko
Lead Software Engineer
18.12.2017

2. 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. 3
Terms
1. SPA - single page application
2. POC - proof of concept
3. MVP - minimal viable product
4. 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

4. 44
Why Vue.js?

5. 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

6. 66
Good Parts of Vue.js

7. 7
Frameworks Like Top Sport Cars
Any ideas which one
is React, Angular or
Vue.js ?

8. 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. 9
Compare by few aspects

10. 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. 11
Thing to learn

12. 12
Vue Things To Learn
● ES 5 and HTML would be enough
● Even easier that React
● Much more easier the Angular

13. 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

14. 1414
Case 1 Proof of Concept

15. 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. 16
Just include Vue.js in HTML
• no JS fatigue
• clean syntax

17. 17
Use components in barebone HTML
• define components
as you go
• constraints on child
to parent props
changes

18. 18
Small POC refactoring
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})

19. 1919
Case 2 Legacy non-SPA

20. 20
Refactor Old-School JSP

21. 21
Add Vue Component Directly to JSP

22. 22
Separate Components by Files

23. 23
Just Compare with Single File Component

24. 24
Move user-locales to separate JSP

25. 25
Vue Integration

26. 26
Refactored JSP
Old JSP

27. 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. 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

29. 2929
Case 3 Legacy SPA

30. 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. 31
Refactor Backbone App
Backbone.View
Backbone.Model
DOMTemplate
Convert Data to String Direct DOM Manipulations
Listen for changes and
change data through
methods

32. 32
Build Backbone View adapter for Vue
Backbone.View
BackboneVueAdapter
Override Event Delegation
and use component instead
of template

33. 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. 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. 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. 36
BackboneVueAdapter Example

37. 37
BackboneVueAdapter Usage

38. 38
Rewrite Templates to Components

39. 39
Rewrite Templates to Components

40. 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

41. 4141
Case 4 Diversity in Team Experience

42. 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

43. 4343
Case 5 From POC to MVP

44. 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. 45
Single File Component

46. 46
Try Vuex

47. 47
Structure your App

48. 48
Testing
● vue-test-utils for components
● nightwatch for e2e for critical use cases

49. 4949
Summary

50. 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. 51
Thank you