Table of Contents
Introduction
Best Practices
JavaScript Best Practices
Ben explains the single file component (SFC) structure and outlines a few best practices for writing JavaScript in Vue applications. Using TypeScript in Vue 3 is advantageous since Vue 3 is written in TypeScript.
HTML Best Practices
Ben 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.
CSS Best Practices
Ben recommends writing CSS with either CSS modules or scoped styles. CSS modules are less likely to be overridden through specificity and they can utilize module exports to make variables available within the JavaScript scope.
Best Practices Exercise
Students 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 Solution
Ben live codes the solution to the Best Practices exercise.
CLI
Vue CLI
Ben 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&A
Ben 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.
Components
Component Naming Conventions
Ben 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 Refactor
Ben 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 Structure
Ben 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 Props
Ben 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 Slots
Ben 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 Components
Ben 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 Patterns
Ben 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.
Mixins
Ben 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 & Inject
Ben 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 API
Composition API
Ben 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 Modules
Ben 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 Exercise
Students are instructed to add a text input to customize the increment amount in the HelloWorld component.
Composition Solution
Ben live codes the solution to the Composition exercise.
State Management
Vuex Best Practices
Ben 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&A
Ben answers questions about using map helpers, communicating between modules with actions, and using the Composition API versus Vuex.
Routing Techniques
Ben 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
Testing Libraries
Ben 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 Testing
Ben 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&A
Ben answers questions about writing tests for known bugs and testing with manual testers.
Cypress
Ben 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.
Code Maintenance
Following Best Practices
Ben 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 Conventions
Ben 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 Conventions
Ben 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 Practices
Ben 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 Code
Ben 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 3
Ben 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&A
Ben 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.
