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.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Scaleable Web Applications with VueJS

Alexander Heimbuch



  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


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


~ git clone

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


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

Getting Started


~ 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



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



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


  • 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


  • 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


~ git checkout vue-application

Start the API

~ cd api && npm run start

Start the Application

~ cd vue && npm run serve

Access the App


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


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


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


  • 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


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


~ npm install vue-router --save

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


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

const app = new Vue({

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

Live Coding - Implement the Router

Getting Started


~ git checkout vue-router

Start the API

~ cd api && npm run start

Start the Application

~ cd vue-advanced && npm run serve

Access the App


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


  • Code splitting based on routes
  • Lazy loading code chunks

7 State Management: Vuex


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

A Central Place for State


~ npm install vuex --save

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


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

const app = new Vue({

Live Coding - Implement Vuex

Getting Started


~ 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


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.