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