Ben Hong
Netlify
Production-Grade Vue.js
4 hours, 37 minutes CC
Course Description
Learn best practices for building production-grade Vue.js applications that can scale and grow! You'll learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, best practices for architecting increasingly complex applications, and more.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 2 minutes
Ben 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.
Best Practices
Section Duration: 33 minutes
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.
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.
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.
Students are instructed to rewrite the DynamicHeading component using a render function and refactor the App styles to a CSS class and CSS modules.
Ben live codes the solution to the Best Practices exercise.
CLI
Section Duration: 20 minutes
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.
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
Section Duration: 59 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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
Section Duration: 35 minutes
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.
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.
Students are instructed to add a text input to customize the increment amount in the HelloWorld component.
Ben live codes the solution to the Composition exercise.
State Management
Section Duration: 30 minutes
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.
Ben answers questions about using map helpers, communicating between modules with actions, and using the Composition API versus Vuex.
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
Section Duration: 27 minutes
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.
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.
Ben answers questions about writing tests for known bugs and testing with manual testers.
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
Section Duration: 1 hour, 4 minutes
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.
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.
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.
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.
Ben shares three core principles for production-grade enterprise applications: impact over intent, context is everything, and all code is compromise.
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.
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.
Wrapping Up
Section Duration: 4 minutes
Ben wraps up the course by sharing some additional resources including the the Vue Enterprise Boilerplate, Vue.js Style Guide, and the Vue 3 Migration Guide.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops