Advanced Vue.js Features from the Ground Up
Table of Contents
Advanced Vue.js Features from the Ground Up
IntroductionEvan You introduces his "Advanced Vue.js Features from the Ground Up" course and reviews the agenda.
Introducing ReactivityAfter 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.
Challenge 1: Getters and SettersEvan 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.
Challenge 1: SolutionEvan 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.
Challenge 2: Dependency TrackerEvan walks through the solution to Challenge 1.
Challenge 3: Mini ObserverIn this challenge, students combine the previous two solutions to create a mini observer.
Introducing Writing PluginsAfter reviewing a high-level understanding, Evan examines the makeup of a Vue plugin.
Challenge 4: Writing a Simple PluginIn this challenge, students write a plugin that teaches Vue components to handle a custom "rules" option.
Challenge 4: SolutionEvan walks through the solution to Challenge 4.
Introducing Render FunctionsEvan illustrates how Render Functions help in the process of managing state by tracking changes from DOM and virtual DOM.
Virtual DOMEvan 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.
Putting Everything TogetherEvan illustrates how to render function and reactivity work together.
JSX vs. TemplatesWhile templates are the default API, Evan explains why Vue.js supports both templates and JSX in reviewing their respective benefits.
Challenge 5: Dynamically Render TagsIn this challenge, students implement an example component to render HTML output.
Challenge 5: SolutionEvan walks through the solution to Challenge 5.
Challenge 6: Dynamically Render ComponentsIn this challenge, students iterate through implementations of rendering a component.
Challenge 6: SolutionAfter discussing functional components prompted by a student question, Evan walks through the solution to Challenge 6.
Challenge 7: Higher-Order ComponentsIn this challenge, students create a helper that takes an inner component that expects prop and returns a higher-order component.
Q&A: Higher-Order ComponentsEvan takes questions from students about mixins and higher order component.
Challenge 7: SolutionEvan 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.
Introducing State ManagementEvan reviews the problems and evolution of state management as applications grow in more complexity.
Challenge 8: Passing PropsIn this challenge, students pass props to control states in small component structures.
Challenge 8: SolutionEvan walks through the solution to Challenge 8.
Challenge 9: Shared ObjectIn this challenge, students create a counter component where all its instances share the same count state.
Challenge 9: SolutionEvan walks through the solution to Challenge 9.
Challenge 10: Shared InstanceIn this challenge, students employ a Vue instance as a shared store.
Challenge 10: SolutionEvan walks through the solution to Challenge 10.
Challenge 11: MutationsIn this challenge, students use a Vue instance to fit the API requirements.
Challenge 11: SolutionEvan walks through the solution to Challenge 11.
Q&A: Type-based API and Nested ObjectsEvan takes questions from students about type-based API and nested objects.
Challenge 12: SolutionEvan walks through the solution to Challenge 12.
Challenge 13: Basic Hash RouterIn this challenge, students build a simple hash routing system.
Challenge 13: SolutionEvan walks through the solution to Challenge 13.
Challenge 14: Route TableIn this challenge, students implement a route table.
Challenge 14: SolutionEvan walks through the solution to Challenge 14.
Path to Regular ExpressionsEvan illustrates the need to convert a path string such as `/user/:username` using regular expressions for web applications to use.
Challenge 15: Dynamic RoutesIn this challenge, students create a dynamic routing system with regular expressions.
Challenge 15: SolutionEvan walks through the solution to Challenge 15.
Markup-based vs. Model-basedEvan reviews form validation in markup-based and model-based different styles.
Validation LibraryEvan creates a simple model-based form validation library.
Internationalization ApproachesEvan introduces three approaches to add internationalization to Vue applications.
Internationalization PluginEvan demonstrates how to set up an internalization plugin.
Wrapping Up Advanced Vue.js
Q&A: Onboarding Speed and Web ComponentsEvan 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.
Q&A: SSR and Vue Custom ElementEvan reviews the benefits of Server Side Rendering (SSR), Vue Custom Element, and future of Vue.js.
Wrapping UpWrapping 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.