Book Image

Vue.js 2 Design Patterns and Best Practices

By : Paul Halliday
Book Image

Vue.js 2 Design Patterns and Best Practices

By: Paul Halliday

Overview of this book

Vue.js 2 Design Patterns and Best Practices starts by comparing Vue.js with other frameworks and setting up the development environment for your application, and gradually moves on to writing and styling clean, maintainable, and reusable Vue.js 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. Toward the end, we'll look at common antipatterns to avoid, saving you from a lot of trial and error and development headaches. By the end of this book, you'll be 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.
Table of Contents (19 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Free Chapter
1
Vue.js Principles and Comparisons
12
Server-Side Rendering with Nuxt
Index

Preface

Vue.js is a JavaScript framework that allows you to create performant web applications. It boasts a smaller learning curve than its competitors and has detailed documentation with a variety of examples and use cases. Vue.js applications can be created with the Vue CLI or by including it in your page via a script tag, making it super-easy to use in projects without build systems.

In a similar way to other modern web frameworks/libraries, Vue.js is component driven, and this means that you can create self-contained units with their own view/data logic. This allows our application to scale as it gets larger because any changes can be encapsulated away from each other.

When scaling your application, state management is a hot topic in the frontend space, and Vue.js solves this with the Vuex library. This allows us to define actions within our application and act accordingly, giving us predictable state that can be used to form the basis of our user interface and other interactions.

This book explores all this and more, and it provides examples of how these principles can be implemented into new and old Vue.js applications.

Who this book is for

This book is for people interested in creating web and mobile applications with JavaScript.  Prior experience with HTML5/ES2015 will be helpful, as modern JavaScript concepts are used within the book. You'll likely be looking to make use of this knowledge to create interactive web-based experiences within your personal projects or job role.

What this book covers

Chapter 1, Vue.js Principles and Comparisons, introduces the readers to Vue.js and motivates them to use it as a framework to create web applications. The reader will gain an understanding of the differences between Vue.js in comparison to other popular frameworks, such as React and Angular.

Chapter 2, Proper Creation of Vue Projects, looks at the appropriate way to create a Vue project. This includes the use of Webpack, Babel/TypeScript (for ES6), .vue files, linting, and more.

Chapter 3, Writing Clean and Lean Code with Vue, takes a deeper look at the Vue.js instance and different reserved properties, such as data, computed, and watch, as well as creating getters and setters. This chapter especially considers when to use computed properties and when to use watched properties. It also outlines why templates should be kept especially lean for easier maintenance.

Chapter 4, Vue.js Directives, introduces the fact that the developers have access to a powerful set of directives, such as v-for, v-if, v-model, and others when writing reactive Vue applications. This chapter looks at each directive in detail, as well as best practices and patterns. Furthermore, the reader is introduced to using shorthand syntax for event binding.

Chapter 5, Secured Communication with Vue.js Components, takes a more advanced look at Vue components, with a look at component communication. We’ll take a look at passing properties, as well as validating for prop types and considering the different types of properties and data flows.

Chapter 6, Creating Better UI, focuses on the common UI patterns of Vue. It takes another look at how v-model can be used to gain input from the user, along with a glance at binding to inputs such as text, checkbox, radio buttons, and so on. It also looks at drop-down and dynamic inputs. Finally, the chapter covers form submission and various modifiers, such as lazy binding, number typecasting, and string trimming.

Chapter 7, HTTP and WebSocket Communication, covers the best practices for integrating HTTP into Vue.js applications. It takes a look at Axios and a variety of methods for sending HTTP requests (that is, root instance/component/ nav guards). This chapter also takes a look at using socket.io, along with the creation of a basic Node/ Express API for real-time integration.

Chapter 8, Vue Router Patterns, describes how routing is a vitally important part of any SPA. This chapter focuses on the Vue route and looks at routing a user between multiple pages. It goes through everything from matching paths and components to dynamic matching with navigation parameters, regular expressions, and more.

Chapter 9, State Management with Vuex, demonstrates state management with Vuex. It starts by looking at the Flux architecture and unidirectional data flow. Then, it takes a look at Vuex, a state management system for Vue. The chapter also looks at implementing this in an application, as well as common pitfalls and usage patterns. It goes on to the Vue-devtools to capture actions and Vue instance data.

Chapter 10Testing Vue.js Applications, demonstrates that testing is a vital part of any project, regardless of the framework or language. This chapter looks at testing our application and how to write testable code. We'll then look at testing our application with Jasmine and Karma, as well as testing our Vuex code when testing mutations.

Chapter 11Optimization, outlines deploying a Vue application and any potential performance optimizations. It then looks at converting an application to a Progressive Web App (PWA) and adding ServiceWorkers, offline support, and more. It also looks at ways in which the overall bundle size can be reduced, and at performance wins with SVG.

Chapter 12Server-Side Rendering with Nuxt, showcases using Nuxt to create Vue applications that are server-side rendered. The project will be created by using the Vue CLI, and we’ll look at everything from configuration to routing, middleware, and testing Nuxt, all the way through to deployment.

Chapter 13Patterns, assists the reader with common anti-patterns and allows them to avoid these principles when writing Vue.js applications. A style guide is proposed, as well as key issues such as the use of $parent, $ref coupling issues, inline expressions, and others.

To get the most out of this book

  1. You should already have an understanding and knowledge of JavaScript (ES2015+), as well as HTML5 and CSS3.
  2. Experience with Vue.js is not required for this book, although experience with other JavaScript frameworks will assist with comparisons and similar features.

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packtpub.com.
  2. Select the SUPPORT tab.
  1. Click on Code Downloads & Errata.
  2. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Vue.js-2-Design-Patterns-and-Best-Practices.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/Vuejs2DesignPatternsandBestPractices_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in the text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

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

Any command-line input or output is written as follows:

$ npm install
$ npm run dev

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.