Workshops

Advanced Features from the Ground Up

We often reach for existing libraries when dealing with advanced app features such as routing, state management, form validation and i18n, and a lot of times the implementations behind these libraries can be a black box. In this workshop we are going to build simple versions of such libraries from the ground up using basic Vue features. This will help you better understand the nature of these problems and how to better leverage Vue’s reactivity system to come up with elegant solutions.

Application state with Vuex

As an application grows, you will notice that components will share common code and state. Eventually as the application grows it can become more important to manage this state carefully, to improve maintainability, predictability and application flow.

Vuex, is inspired by elm. It is not only a library but a state management pattern. Introducing these patterns, improves the overall application flow and creates a centralised state. However, it is easy to go overboard with state managment; thus we will look at a full range of best practices to ensure you can make the most of Vuex.

Schedule:

• What is Vuex?
• Looking at state management patterns
• Determining application state from local state
• Using Actions, Mutations and Getters
• Modularising a store
• Composing actions (Promises and Async/Await)
• Avoiding common pitfalls

Animated Interfaces with Vue.js

In one day of training, attendees will go from knowing nothing (or very little) about animating in Vue to creating complex effects in performant and visually stunning patterns. The web is more than a document reader, and Vue has unique offerings that make animations not only possible, but possible to do in an organized and state-managed manner.

What we'll go over is included but not limited to:

• Working with SVG within Vue components
• Creating custom directives for animation
• Using in-out modes to create effective and reusable component composition
• Using Vue <transition> hooks for external javascript libraries
• Interpolating state for data visualization with watchers
• Integration of animation with routers for page transition