Table of Contents
IntroductionBen Hong introduces the Production Vue course and explains most of the example are applicable to both Vue 2 and Vue 3. Anything specific to Vue 3 will be noted.
HTML Best PracticesBen demonstrates how to use HTML in both a template block and the Vue render function. Templates are the recommended method since they are the most declarative way to write HTML. The render function is useful when the markup needs to be programmatically generated.
Best Practices ExerciseStudents are instructed to rewrite the DynamicHeading component using a render function and refactor the App styles to a CSS class and CSS modules.
Best Practices SolutionBen live codes the solution to the Best Practices exercise.
Vue CLIBen demonstrates how to use the Vue CLI. It can be run either from the command line or through the GUI Mode. When using the GUI mode, configuration and application statistics can be managed and viewed for multiple Vue projects.
Vue CLI Alternatives and Q&ABen explains Vue CLI may not work for micro-frontends or legacy migrations. In those cases, Vue can be added to an application from the CDN. Questions about Vite, extending Vue CLI, and how to add plugins with the Vue CLI are also covered in this segment.
Component Naming ConventionsBen recommends avoiding single-word component names because conflicts can arise with core or third-party components. Prefixing component names with "App", "Base" or "The" adds clarity to the component's intended use. Methods should also be named based on what they do and not based on the events that trigger them.
When to RefactorBen discusses the principle of data-driven refactoring which helps determine when a component is too complex and should be refactored. Components should be refactored when they are too hard to understand, parts of the component require their own state, or it's difficult to describe a components responsibility.
Component File StructureBen compares a nested folder structure with a flat folder structure. The flat structure makes reusing and refactoring components easier. Page-level components like Home or About should still be organized into a separate directory since they are related to routing and typically composed from atomic-level components.
Component PropsBen demonstrates how to use Object notation to declare component props. Object notation allows a type, default value, and validator function to be declared for each prop.
Solving Prop Complexity with SlotsBen uses a thought-exercise to explain how using too many props can increase the technical debt of a component. Slots simplify the complexity by allowing content to be injected into a component from its parent.
Dynamically Switching ComponentsBen explains how to use the Vue Component to dynamically swap components in an application. The :is directive specifies the component to load. The v-bind directive binds props for the component.
Component Design PatternsBen covers two component design patterns. The Vendor Component Wrapper pattern recommends wrapping vendor components in a custom Vue component to encapsulate the API and functionality. The Transparent Component pattern uses the inheritAttrs property to allow props, attributes and listeners to get passed through the parent element of a component.
MixinsBen explains why mixins are useful for refactoring Options API components. However, overusing mixins can lead to property name conflicts and increase the difficulty to debug the origin of a piece of logic.
Provide & InjectBen explains the difference between using the Provide/Inject API and using props. While props depends on a specific parent-child relationship, the Provide/Inject API will inject data into the parent-child tree for any descendant to consume.
Composition APIBen demonstrates how to refactor Options API code to use the Composition API. The reactive helper method is imported to expose reactive properties within the component. The toRefs helper method allows the spread operator to be used within the reactive method.
Composition ModulesBen demonstrates how the Composition API allows code to be abstracted into separate, reusable modules. Methods from these modules can be individually imported into a component.
Composition ExerciseStudents are instructed to add a text input to customize the increment amount in the HelloWorld component.
Composition SolutionBen live codes the solution to the Composition exercise.
Vuex Best PracticesBen shares some best practices for managing state with Vuex. Data shared between components or between router views should be stored in Vuex. User interface variables, form data or validation results should not be stored in Vuex. Map helpers can simplify property and method names within the Vuex global store.
Vuex and Composition API Q&ABen answers questions about using map helpers, communicating between modules with actions, and using the Composition API versus Vuex.
Routing TechniquesBen explains the three aspects of routing in Vue. Layout components contain markup shared between pages. View components define the page-level components. Routes define how paths map to view components. Lazy-loading routes is also discussed in this segment.
Testing LibrariesBen summarizes different testing libraries and compares unit testing with component testing. Unit tests should not test core Vue logic like the existence the computed property. They should focus on application functionality.
Unit & E2E TestingBen introduces Cypress and TestCafe which are two frameworks for performing end-to-end testing. Like unit tests, end-to-end tests should be able to run independently and not rely on any shared state between tests. UI element tests should not rely on CSS classes since styling can change depending on the current interaction state.
Testing Q&ABen answers questions about writing tests for known bugs and testing with manual testers.
CypressBen demonstrates how the Cypress testing framework runs UI tests in the browser. After the tests are complete, the Cypress UI allows time-traveling and inspection of HTML elements at any point in the test's progression.
Following Best PracticesBen discusses how development teams should decide which best practices or conventions they should follow. Good conventions enable developers to write code that's easier to refactor and has a lower barrier of entry.
Selection & Implementation of ConventionsBen describes the first two phases for choosing coding conventions. The Selection Phase defines the problem the convention will solve. The Implementation Phase focuses on the automation tools that optimize how the coding conventions are used.
Maintenance of ConventionsBen explains the third phase for choosing coding conversions. The Maintenance Phase builds emotional safety and awareness in the development team by finding systematic solutions for issues that arise not blaming individual developers.
CI Best PracticesBen discusses how continuous integration and testing are incorporated into the deployment pipeline. Running an entire test suite with every pull request can slow down the development process. A more efficient CI plan involves utilizing a staging or pre-production environment for running all end-to-end tests.
Core Principles of Enterprise CodeBen shares three core principles for production-grade enterprise applications: impact over intent, context is everything, and all code is compromise.
Migrating from Vue 2 to Vue 3Ben shares some final thoughts about migrating from Vue 2 to Vue 3. Legacy applications should remain in Vue 2 especially if IE11 support is required. Vue 3 is an appropriate choice for new applications.
Vue Architecture Q&ABen answers questions about using RxJS with Vue, authenticating routes, documentation, and communicating between complex store architecture. The use of class components versus decorators is also covered in this segment.