Skip to content
Getting started by checking out the start branch
Branch: workshop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
api
images
vanilla
vue-advanced
vue
.editorconfig
.gitignore
README.md
package-lock.json

README.md

Scaleable Web Applications with VueJS


Alexander Heimbuch

@zusatzstoff
alexander.heimbu.ch
github.com/alexander-heimbuch


Agenda

  1. A Short History of Vue
  2. Setup & Requirements
  3. Demo Application
  4. Back to the Roots
  5. Component Management
  6. Code Decoupling: Vue Router
  7. State Management: Vuex
  8. What's Next?

1 A Short History of Vue


Developed by Evan You in 2014


Core Assets

  • Simple & flexible view layer
  • Focused on composition and functionality
  • 2way databinding
  • API is influenced by AngularJS and KnockoutJS

Popular because of

  • Easy learning curve
  • Elegant programming style & patterns
  • Good documentation
  • Simple & lightweight
  • Fast performance


2 Requirements & Setup


Requirements

  • Git
  • Node 10+
  • NPM 5+
  • Editor
  • Chrome or Firefox

Setup

~ git clone git@github.com:alexander-heimbuch/workshop-vue.git

Workshop Structure

  • Create and evolve a small application
  • All you need is in the repository
  • Each development step can be accessed via git tags

3 Demo Application





4 Back to the Roots


Goals

  • Implement the Demo App in VanillaJS without any framework
  • Identify caveats that prevents application scaling

Getting Started

Checkout

~ git checkout back-to-the-roots

Start the API

~ cd api && npm run start

Start the Application

~ cd vanilla && npm run start

Access the App

http://localhost:1234

localhost:3000/api

parameter name default
query q ''
start start 1
end end null
limit limit movies length
sort sort null
order order DESC

Vanilla Application Review


Task: Search Functionality

Implement the missing search functionality in the Movies App

  • Fuzzy search for the movie title
  • Search dialog closes after the user hits return
  • Only matching movies should be displayed
  • A loading indicator is displayed to give the use feedback
  • If nothing matches the search term a proper error message is displayed in the canvas

Possible Solution Task 1

~ git checkout task-1-solution

Let's Evaluate the Vanilla Application


Dimensions of Scaleability

Developer Velocity vs. Application Performance


Developer Velocity

How fast can a feature be developed?

  • Amount of time that is needed to add another feature
  • Amount of time that is needed to replace a system component
  • Ability to distribute development between developers

Application Performance

How does the application perform?

  • Response time
  • Time to interaction
  • Bundle size
  • FPS rendering
  • ...

Learnings


Components

Components are the building blocks of any Web Application that define how a User Interface should appear


Components

  • Creation and update is complicated
  • Split between template creation and logic
  • Missing component reusability and composition

State Management

Every piece of information in the Web Application that has an effect on it's appearance


State Management

  • Creating initial application state
  • Maintaining and updating the application state
  • Transparancy in state changes

Side Effects

Every interaction with the Web Application from the user or any other external source


Side Effects

  • Handling API calls
  • Handling user interactions

5 Component Management


Goals

  • Learn how VueJS components work
  • Implement the Demo App in VueJS
  • Identify benefits of component driven application design

VueJS Core Concept


VueJS Component Communication


VueJS Component Lifecycle


VueJS Setup

~ npm install -g @vue/cli
~ vue create vue
~ cd vue
~ npm install node-sass sass-loader --save-dev
~ npm run serve

Live Coding - Implement Components


Getting Started

Checkout

~ git checkout vue-application

Start the API

~ cd api && npm run start

Start the Application

~ cd vue && npm run serve

Access the App

http://localhost:8080

Task: Movie Details Modal

Implement the missing movie details functionality

  • If a user clicks a movie, the details modal opens
  • It shows the movie title, cover, description and rating
  • If the user clicks the cancel button the modal disappears

Possible Solution Task 2

~ git checkout task-2-solution

Let's Evaluate the Vue Application


Reusability

  • New applications can be assembled through existing components, development will be faster
  • A component can be managed individually and maintenance becomes easy

Quality

  • Isolated components can be tested easier because of reduced dependencies
  • A component can establish a clear interface that takes different requirements into account

Composition

  • Each functionality is implemented individually, therefore corresponding components can be changed or upgraded seperately
  • Complex components can be reassembled from simpler components fitting different use cases

6 Code Decoupling: Vue Router


Goals

  • Learn how a Router can be used
  • Identify benefits for the application structure

Installation

~ npm install vue-router --save

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
});

const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

Live Coding - Implement the Router


Getting Started

Checkout

~ git checkout vue-router

Start the API

~ cd api && npm run start

Start the Application

~ cd vue-advanced && npm run serve

Access the App

http://localhost:8080

Task: Movie Details

Implement the movie details functionality with a custom route

  • If a user clicks a movie, he is redirected to /details
  • The details modal opens
  • It shows the movie title, cover, description and rating
  • If the user clicks the cancel button he is redirected to the root screen

Possible Solution

git checkout task-3-solution

Let's Evaluate the Vue Router Application


Code Decoupling

  • Each route provides a clear interface to a screen
  • Screens can be developed more independently

State Persistance

  • Most of the component state is maintained in the route
  • Reduce complexity in App Component

Performance

  • Code splitting based on routes
  • Lazy loading code chunks

7 State Management: Vuex


Goals

  • Learn how state management with Vuex works
  • Identify benefits for the data flow

A Central Place for State


Installation

~ npm install vuex --save

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
});

const app = new Vue({
  store
}).$mount('#app');

Live Coding - Implement Vuex


Getting Started

Checkout

~ git checkout vue-state-management

Start the API

~ cd api && npm run start

Start the Application

~ cd vue-advanced && npm run serve

Access the App

http://localhost:8080

Task: Loading Indicator

Use a store binding for the loading indicator

  • use proper mutations, actions & getter

Possible Solution

git checkout task-4-solution

Let's Evaluate the Vue State Management Application


Predictable State Transitions

  • Increases maintainability
  • Hardened applications because of clear data flows

Decoupling Logic from Components

  • Less complex components
  • Simple interfaces allows better testing

Isolating Side Effects

  • Eliminates changes to visual components on changes
  • Isolation allows exchanging of system components

What's Next?


  • Internationalization
  • Building the Application (Chunk Splitting)
  • Deploying the Application
  • Debugging/Tracking User Interactions
  • ...
You can’t perform that action at this time.