Creator of Vue.js
Vue 2 Internal Features from the Ground Up
3 hours, 48 minutes
CC
Course Description
Learn from Evan You -- the creator of Vue.js -- how to build more accessible routing, state management, form validation and internationalization libraries from the ground up! This course is for developers who have some experience with Vue.js and want to understand its internals better so they can author your own Vue plugins and use Vue more effectively. You'll build simple versions of advanced features of Vue.js from the ground up composing basic Vue features. This course will help you better understand the nature of common problems and how to better leverage Vue's reactivity system to come up with elegant solutions.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseTable of Contents
Advanced Vue.js Features from the Ground Up
Section Duration: 2 minutes
Evan You introduces his "Advanced Vue.js Features from the Ground Up" course and reviews the agenda.
Reactivity
Section Duration: 26 minutes
After clarifying the term reactivity in the context of working in Vue.js as changing the state and how the state reflects the update the DOM system, Evan walks through a simple example of how Vue.js's rendering system works.
Evan reviews Object.defineProperty() and its get and set functions. In this challenge, students implement observe() and autorun(), which triggers re-computation when object is mutated.
Evan provides a starting point to the Challenge 1 by showing dependency tracking, when an inner update function executes, the dependency class has access to the currently active update.
Evan walks through the solution to Challenge 1.
In this challenge, students combine the previous two solutions to create a mini observer.
Writing Plugins
Section Duration: 12 minutes
After reviewing a high-level understanding, Evan examines the makeup of a Vue plugin.
In this challenge, students write a plugin that teaches Vue components to handle a custom "rules" option.
Evan walks through the solution to Challenge 4.
Render Functions
Section Duration: 1 hour, 3 minutes
Evan illustrates how Render Functions help in the process of managing state by tracking changes from DOM and virtual DOM.
Evan reviews virtual DOM, which is a lightweight representation of what actual DOM should like at a given point in time. Virtual decouples rendering logic from actual DOM allowing rendering capabilities in non-browser environments such as server-side and native mobile rendering.
Evan illustrates how to render function and reactivity work together.
While templates are the default API, Evan explains why Vue.js supports both templates and JSX in reviewing their respective benefits.
Evan reviews the Render Function API by examining a component with an "h" function. The "h" function is a convention based on hyperscript, a method for writing HTML through JavaScript. Evan takes questions from students.
In this challenge, students implement an example component to render HTML output.
Evan walks through the solution to Challenge 5.
In this challenge, students iterate through implementations of rendering a component.
After discussing functional components prompted by a student question, Evan walks through the solution to Challenge 6.
In this challenge, students create a helper that takes an inner component that expects prop and returns a higher-order component.
Evan takes questions from students about mixins and higher order component.
Evan walks to the solution to Challenge 7 and takes questions from students. Then Evan adds a class to util.js that will be needed later.
State Management
Section Duration: 47 minutes
Evan reviews the problems and evolution of state management as applications grow in more complexity.
In this challenge, students pass props to control states in small component structures.
Evan walks through the solution to Challenge 8.
In this challenge, students create a counter component where all its instances share the same count state.
Evan walks through the solution to Challenge 9.
In this challenge, students employ a Vue instance as a shared store.
Evan walks through the solution to Challenge 10.
In this challenge, students use a Vue instance to fit the API requirements.
Evan walks through the solution to Challenge 11.
In this challenge, students manage state with functional JavaScript.
Evan takes questions from students about type-based API and nested objects.
Evan walks through the solution to Challenge 12.
Routing
Section Duration: 32 minutes
In this challenge, students build a simple hash routing system.
Evan walks through the solution to Challenge 13.
In this challenge, students implement a route table.
Evan walks through the solution to Challenge 14.
Evan illustrates the need to convert a path string such as `/user/:username` using regular expressions for web applications to use.
In this challenge, students create a dynamic routing system with regular expressions.
Evan walks through the solution to Challenge 15.
Form Validation
Section Duration: 18 minutes
Evan reviews form validation in markup-based and model-based different styles.
Evan creates a simple model-based form validation library.
Internationalization
Section Duration: 9 minutes
Evan introduces three approaches to add internationalization to Vue applications.
Evan demonstrates how to set up an internalization plugin.
Wrapping Up Advanced Vue.js
Section Duration: 15 minutes
Evan takes questions from students about onboarding speed and how important it is when selecting a framework, leveraging features in web components, and when to use Vuex.
Evan reviews the benefits of Server Side Rendering (SSR), Vue Custom Element, and future of Vue.js.
Wrapping up the "Advanced Vue.js Features from the Ground Up" course, Evan talks about financial sponsorship of Vue.js help move the open source project forward.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops