Vue.js 2 Design Patterns and Best Practices

Paul Halliday

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788831017
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Become an expert Vue developer by understanding the design patterns and component architecture of Vue.js to write clean and maintainable code.About This Book• Craft highly modular applications by exploring the design patterns and component architecture of Vue.js• Enforce a Flux-like application architecture in your Vue.js applications with Vuex• Easy-to-follow examples that can be used to create reusable code and extensible designsWho This Book Is ForThis book targets Vue Developers who care about framework design principles and utilize commonly found design patterns in developing web applications.What You Will Learn• Understand the theory and patterns of Vue.js• Build scalable and modular Vue.js applications• Take advantage of Vuex for reactive state management.• Create Single Page Applications with vue-router.• Use Nuxt for FAST server side rendered Vue applications.• Convert your application to a Progressive Web App (PWA) and add ServiceWorkers, offline support, and more• Build your app with Vue.js by following up with best practices and explore the common anti-patterns to avoidIn DetailThe book starts by comparing Vue.js with other frameworks and setting up the development environment for your application, and gradually move on to writing and styling clean, maintainable, and reusable components that can be used across your application.Further on, you'll look at common UI patterns, Vue form submission, and various modifiers such as lazy binding, number typecasting, and string trimming to create better UIs. You will also explore best practices for integrating HTTP into Vue.js applications to create an application with dynamic data.Routing is a vitally important part of any SPA, so you will focus on the Vue router and explore routing a user between multiple pages. Next, you'll also explore state management with Vuex, write testable code for your application, and create performant, server-side rendered applications with Nuxt.Towards the end, we'll look at common antipatterns to avoid, to save you from a lot of trial and error and development headaches.By the end of this book, you'll be well on your way to becoming an expert Vue developer who can leverage design patterns to efficiently architect the design of your application and write clean and maintainable code.Style and approachThis easy-to-follow practical guide will help you develop efficient Vue.js apps by following best practices and using common design patterns.

Proper Creation of Vue Projects

In this chapter, we'll be looking at how we can create maintainable Vue projects, and take advantage of the many tools and patterns available. If you currently aren't maximizing the use of these things within your development workflow, you may find that the majority of the concepts we discuss in this chapter are applicable to other technologies.

In this chapter, we will be looking at the following:

• Vue devtools
• Visual Studio Code extensions
• TypeScript integration
• Reactivity with RxJS

Visual Studio Code extensions

Our development environment is an important part of application development. When using Visual Studio Code to create Vue applications, the following extensions are recommended:

• Vetur
• Vue 2 Snippets

Let's take a look at both of these in more detail.

Vetur

Vetur is powered by the Vue Language Server and provides us with syntax highlighting, Emmet (for increased HTML/CSS workflow), snippets, linting, IntelliSense, and more. This greatly improves our development experience and is widely supported, with over 1,000 stars on GitHub. To install the extension, click the Extensions icon within Visual Studio Code and type Vetur; from here, you can select Install and it'll automatically be used throughout your project(s):

Installing Vetur

This then gives us access to snippets such as scaffold, which generates a new blank template, script, and style object(s) for us to use within our Vue components:

Scaffolding a new Vue project

Vue 2 Snippets

Snippets are an important part of application development; in a similar way to Emmet, they allow us to quickly scaffold common patterns within our application. We'll also be installing another Visual Studio Code extension that provides us with a variety of commonly used snippets named Vue 2 Snippets.

This allows us to save a substantial amount of time that we otherwise would have had to spend writing out the same boilerplate code. Take the next example; although it's simplistic in nature, we get a description of the snippet, and with a hit of Tab it expands to our predefined code:

Taking advantage of Vue snippets

Vue CLI

The Vue Command Line Interface (CLI) allows us to quickly scaffold new Vue projects with a variety of different template options. Currently, the template options available include technologies such as Webpack, Browserify, and Progressive Web Application features.

Sure, we could create our own Vue application and manually add tools such as Webpack, but this creates technical overhead in the sense that we have to learn, build, and maintain our configuration. The Vue CLI does this for us while maintaining a select set of official templates, but doesn't restrict us from modifying the generated Webpack configuration. All of this allows us to generate new unopinionated Vue projects.

To start using the Vue CLI, let's ensure we have it installed:

npm install vue-cli -g

We can then use the Vue init command to scaffold a new Vue project using the Webpack template:

vue init webpack-simple my-vue-project

On entering the preceding command we should get the following as shown on the Terminal:

Creating projects with Vue init

If we break this down, we're essentially initializing a new Vue project based on the webpack-simple template named my-vue-project. We're then navigated to a wizard process that asks us for more metadata about our project. This metadata and configuration will differ depending on the template you choose.

Let's investigate the files and folders that the template created:

File/Folder	Description
src/	This folder contains all of our project code. We'll spend the majority of our time within src.
.bablrc	This is our Babel configuration file that allows us to write ES2015 and have it appropriately transpiled.
index.html	This is our default HTML file.
package.json	This holds our dependencies and other project-specific metadata.
webpack.config.js	This is our Webpack configuration file, allowing us to use .vue files, Babel, and more.

Notice how we're no longer working with .js files, and we now have .vue files inside of our src directory. A Vue file is known as a Single File Component and it has a template, script, and style tag, allowing us to scope everything to this component only.

This is possible due to our Webpack template, as we have a custom "loader". How does this work? Prior to looking at this, let's take a quick detour and review modern JavaScript build systems.

JavaScript modules

In order to create reusable modular code, our aim should be to have one file per feature in most cases. This allows us to avoid the dreaded "Spaghetti code" anti-pattern, where we have strong coupling and little separation of concerns. Continuing with the pasta-oriented theme, the solution to this is to embrace the "Ravioli code" pattern with smaller, loosely coupled, distributed modules that are easier to work with. What does a JavaScript module look like?

In ECMAScript2015, a module is simply a file that uses the export keyword, and allows other modules to then import that piece of functionality:

// my-module.js
export default function add(x, y) {
 return x + y
}

We could then import add from another module:

// my-other-module.js
import { add } from './my-other-module'

add(1, 2) // 3

As browsers haven't fully caught up with module imports yet, we often use tools to assist with the bundling process. Common projects in this area are Babel, Bublé, Webpack, and Browserify. When we create a new project with the Webpack template, it uses the Vue-loader to transform our Vue components into a standard JavaScript module.

Vue-loader

...

Table of contents

• Title Page
• Copyright and Credits
• Packt Upsell
• Contributors
• Preface
• Vue.js Principles and Comparisons
• Proper Creation of Vue Projects
• Writing Clean and Lean Code with Vue
• Vue.js Directives
• Secured Communication with Vue.js Components
• Creating Better UI
• HTTP and WebSocket Communication
• Vue Router Patterns
• State Management with Vuex
• Testing Vue.js Applications
• Optimization
• Server-Side Rendering with Nuxt
• Patterns