Architecting Vue.js 3 Enterprise-Ready Web Applications E-Book

Solomon Eseme

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 272

Veröffentlichungsjahr: 2023

Beschreibung

Building enterprise-ready Vue.js apps entails following best practices for creating high-performance and scalable applications. Complete with step-by-step explanations and best practices outlined, this Vue.js book is a must-read for any developer who works with a large Vue.js codebase where performance and scalability are indispensable.
Throughout this book, you’ll learn how to configure and set up Vue.js 3 and the composition API and use it to build real-world applications. You’ll develop the skills to create reusable components and scale performance in Vue.js 3 applications. As you progress, the book guides you in scaling performance with asynchronous lazy loading, image compression, code splitting, and tree shaking. Furthermore, you’ll see how to use the Restful API, Docker, GraphQL, and different types of testing to ensure that your Vue.js 3 application is scalable and maintainable.
By the end of this book, you’ll be well-versed in best practices for implementing Restful API, Docker, GraphQL, and testing methods to build and deploy an enterprise-ready Vue.js 3 application of any scale.

Leseprobe

Architecting Vue.js 3 Enterprise-Ready Web Applications

Build and deliver scalable and high-performance, enterprise-ready applications with Vue and JavaScript

Solomon Eseme

BIRMINGHAM—MUMBAI

Architecting Vue.js 3 Enterprise-Ready Web Applications

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Content Development Editor: Rakhi Patel

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Sejal Dsilva

Production Designer: Prashant Ghare

Marketing Coordinators: Namita Velgekar, Nivedita Pandey, and Anamika Singh

First published: April 2023

Production reference: 1170323

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-390-5

www.packtpub.com

To my parents Mr/Mrs. Eseme Adaada, family, and friends, for their sacrifices and for exemplifying the power of determination and resilience.

– Solomon Eseme

Contributors

About the author

Solomon Eseme is an experienced software engineer, content creator, and the founder of Mastering Backend, with 5+ years of experience working across multiple frontend and backend technologies to design and build high-performing, scalable, and innovative applications, following best practices and industry standards in a variety of workplaces, from start-ups to larger consultancies. He started using Vue when it was first integrated with Laravel and has never looked back. He is also a panelist on the ViewsOnVue podcast and a technical writer with Vue.js developers.

I want to thank the people who have been close to me and supported me, especially my parents, family, and close friends, Success Ibekwe, Moses Anumadu, and Godknows Eseme(Boikay) (brother).

.

About the reviewer

Brice Chaponneau is a freelance solution architect and also offers his services as an auditor or lead in current frameworks, such as Vue, React, Svelte, and Solid. He has worked in various domains, with clients such as Arcelor Mittal, Caisse d’Epargne, SNCF, Société Générale, Natixis, Edmond de Rothschild, Carrefour, Galeries Lafayette, KPMG, and Louis Vuitton. He has written a book on Vue 2, published by Eyrolles in 2019. He participated as a reviewer on the book Building Vue.js Application with GraphQL for Packt in 2020.

Table of Contents

Preface

Part 1: Getting Started with Vue.js

1

Getting Started with Vue.js 3

Technical requirements

Overview of Vue.js

Introducing Vue.js 3

Vue 3 performance

Tree-shaking support

The Composition API

Building your first Vue.js 3 app

Creating a Vue 3 app with Vite

What is the Strapi CMS?

Summary

2

Using Libraries for Large-Scale Applications

Technical requirements

Exploring large-scale Vuex

Vuex modules

The Vuex state

Vuex getters

Vuex mutations

Vuex actions

Structuring with the repository pattern

Overview of the repository pattern

Creating a repository folder

Creating a clients folder

Creating an xxxClient.js class

Creating an individual repository class

Creating a RepositoryFactory.js class

Using the repository pattern

Structuring Vue navigation with Vue Router

The folder structure

The index.js file

Hash mode

HTML5 mode

The combine.js file

Adding the router to Vue

Summary

Part 2: Large-Scale Apps and Scaling Performance in Vue.js 3

3

Scaling Performance in Vue.js 3

Technical requirements

Why do we need Vue.js performance optimization?

The primary reasons for poor Vue performance

Checking your Vue application’s bundle size

Generating a report

Running the npm build command

Optimizing the performance of an enterprise Vue application

Asynchronous/lazy component loading

WebP images and image compression

Code splitting

Summary

4

Architecture for Large-Scale Web Apps

Technical requirements

Understanding file architecture and structure

Predictability in Vue 3

Different frontend architectural patterns

Micro frontend architecture

Atomic Design

Storybook

Implementing Storybook in Vue.js 3

Implementing internationalization and localization

Benefits of internationalizing software

Installing Vue I18n

Summary

5

An Introduction to GraphQL, Queries, Mutations, and RESTful APIs

Technical requirements

An introduction to GraphQL

What is GraphQL?

Features of GraphQL

Why use GraphQL instead of REST?

The difference between GraphQL and RESTful APIs

Understanding queries and mutations in GraphQL

Using queries

Using mutations

Integrating GraphQL Apollo Client with Vue 3

Installation

Structuring GraphQL

JWT authentication for sign in/sign up

Summary

6

Building a Complete Pinterest Clone with GraphQL

Technical requirements

An introduction to Strapi

Scaffolding a Strapi project

Building the collections

Seeding data

Building a Vue 3 Pinterest app

Generating the Cards component

Connecting the frontend and backend

The auth folder

The photos folder

The users folder

Summary

Part 3: Vue.js 3 Enterprise Tools

7

Dockerizing a Vue 3 App

Technical requirements

Overview of Docker

What is Docker?

Implementing Docker with Vue.js 3

Prerequisite

Example project

Dockerizing Vue.js and Node.js with Docker Compose

Overview of Docker Compose

Running the app on Docker Compose

Summary

Part 4: Testing Enterprise Vue.js 3 Apps

8

Testing and What to Test in Vue.js 3

Technical requirements

Overview of testing

What is software testing?

Why software testing is important

The benefits of software testing

Testing in software engineering

Types of software testing

What to test

Testing strategy

What you should test

What you should not test

Testing a basic Vue.js 3 app

Creating a test folder

Writing a basic unit test

Component testing in Vue.js 3

Writing a basic component test

Summary

9

Best Practices in Unit Testing

Technical requirements

Introduction to unit testing

What is unit testing?

The importance and benefits of unit testing

Best practices in unit test creation

Arrange, act, and assert

Write deterministic tests

Write good test names and descriptions

Write tests before or during development (TDD)

Using mocks and stubs

Leverage automation testing

JavaScript unit testing

Popular JavaScript testing frameworks

Unit testing a Vue.js 3 app

What to test

Running unit tests manually

Summary

10

Integration Testing in Vue.js 3

Technical requirements

Introduction to integration testing

What is integration testing?

Importance of integration testing

Benefits of integration testing

Best practices when creating integration tests

JavaScript integration testing

Testing a basic Vue app

Writing a basic integration test

Testing integrated components

Summary

11

Industry-Standard End-to-End Testing

Technical requirements

Introduction to E2E testing

What is E2E testing?

Importance of E2E testing

Benefits of E2E testing

Best practices in E2E test creation

JavaScript E2E testing

Selenium WebDriver

Cypress

Playwright

Puppeteer

Karma

E2E testing a Vue.js 3 app

Setting up Cypress

Creating the test file

Running the test

Summary

Part 5: Deploying Enterprise-ready Vue.js 3

12

Deploying Enterprise-Ready Vue.js 3

Technical requirements

Introduction to CI/CD

Overview of CI/CD

Continuous integration

Continuous delivery

Continuous deployment

What is a deployment pipeline?

Elements of a deployment pipeline

Overview of a deployment pipeline

Overview of GitHub Actions

Jobs in the deployment pipeline

Creating the deployment pipeline with GitHub Actions

Deploying to AWS

Using Docker

Provisioning AWS resources

Pipeline for the production environment

Summary

13

Advanced Vue.js Frameworks

Technical requirements

Introduction to Vue frameworks

Top Vue frameworks

Understanding Nuxt.js and how it works

Uses of Nuxt.js

How does Nuxt.js work?

Benefits of Nuxt.js

Creating a Nuxt.js app

Nuxt.js pages and routing system

What is Gridsome?

What is Gridsome used for?

How does Gridsome work?

Benefits of Gridsome

Creating a Gridsome app

Summary

Index

Other Books You May Enjoy

Preface

Building enterprise-ready Vue.js apps entails following best practices to create high-performance and scalable Vue.js applications.

This book is a must for any developer who works with a large Vue.js code base where performance and scalability are important. You’ll learn how to configure and set up Vue.js 3 and Composition API, and how to build real-world applications with it. You’ll then learn to create reusable components in Vue.js 3 and scale performance in Vue.js 3 applications.

You will then learn to scale performance with asynchronous lazy loading, image compression, code splitting, and tree shaking. Next, you’ll learn how to use RESTful API, Docker, GraphQL, and different types of testing to ensure that your Vue.js 3 application is scalable and maintainable. By the end of this book, you will be able to build and deploy your enterprise-ready Vue.js 3 application using best practices in implementing RESTful API, Docker, GraphQL, and different testing methods with Vue.js 3.

Who this book is for

The book is intended for Vue.js developers and professional frontend developers who want to build high-performance, production-grade, and enterprise-scalable Vue.js apps from design to deployment. The book assumes a working knowledge of Vue.js and JavaScript programming.

What this book covers

Chapter 1, Getting Started with Vue.js 3, covers Vue.js, Options API, the new Vue.js 3, and Composition API. Thus, it establishes and fosters an understanding of Vue.js. In addition, this chapter will explore the Vue.js 3 Composition API in depth and serve as a guide to understanding the other chapters.

Chapter 2, Using Libraries for Large-Scale Application, covers the essential aspects of Vuex, Axios, and Vue Router and how to integrate them with Vue 3 to develop an enterprise application. This background information will put you in a better position to grasp the terms and concepts of these libraries and help you understand how to build and scale an enterprise-ready application.

Chapter 3, Scaling Performance in Vue.js 3, dives deeper into scaling an extensive Vue application. You will learn how to scale performance with asynchronous lazy loading, image compression, code splitting, tree shaking, and many other tricks to increase the performance of your Vue.js 3 enterprise-ready application.

Chapter 4, Architecture for Large-Scale Web Applications, teaches you how to handle a sizable enterprise-ready project, from managing larger file structures to using the micro-frontend architecture. You will also learn how to handle the internationalization and localization of your Vue.js 3 project.

Chapter 5, An Introduction to GraphQL, Queries, Mutations, and RESTful APIs, explores GraphQL, Apollo Server 2, queries, mutations, and how to integrate these technologies into your Vue.js 3 application. In addition, you will learn how to utilize GraphQL to deliver scalable and high-performance applications.

Chapter 6, Building a Complete Pinterest Clone with GraphQL, discusses how to build a complete Pinterest clone with Vue 3 and GraphQL. You will utilize the knowledge of GraphQL to develop and deliver an enterprise application, such as Pinterest, using Vue 3 and GraphQL.

Chapter 7, Dockerizing a Vue 3 App, examines the nitty-gritty involved in dockerizing your Vue project. In addition, you will learn the best practices and industry standards to dockerize and deploy an enterprise Vue.js 3 web application. This chapter will also go more practical by dockerizing a full-stack web application and deploying a container to a cloud platform using Docker Compose. You will learn how to handle larger projects with this tool.

Chapter 8, Testing and What to Test in Vue.js 3, explores the whole concept of testing. You will learn what to test from an available array of components and methods. In addition, you will learn the best practices and industry standards for testing libraries and how to integrate them with Vue.js 3.

Chapter 9, Best Practices in Unit Testing, dives into everything related to unit testing. You will learn how to unit-test a Vue.js 3 component and the components and pages’ methods. You will also learn unit tools such as Jest and Mocha and use them to effectively unit-test an enterprise project.

Chapter 10, Integration Testing in Vue.js 3, covers everything related to integration testing. You will learn in depth how to perform an integration test on a Vue.js 3 component and pages. You will also learn about integration testing tools such as Vue-Test-Library and how to use them to test an enterprise project effectively.

Chapter 11, Industry Standard End-to-End Testing, explores everything related to end-to-end testing. You will learn in depth how to perform end-to-end testing on a Vue.js 3 component and pages. In addition, you will also learn about end-to-end testing tools, such as Cypress and Puppeteer, and how to use them to test an enterprise project end to end effectively.

Chapter 12, Deploying Enterprise-Ready Vue.js 3, shows you how to deploy Vue.js 3 projects to the AWS cloud. You will learn the best practices in deploying to AWS. In addition, you will learn how big companies deploy their enterprise Vue applications.

Chapter 13, Advanced Vue.js Frameworks, offers a definitive guide to Nuxt.js. You will learn the nitty-gritty of Nuxt.js and how to build and deliver enterprise SSR projects with Vue.js 3. We will also offer a definitive guide to Gridsome. You will learn the nitty-gritty of Gridsome and how to build and deliver enterprise CSR projects with Vue.js 3.

To get the most out of this book

Software/hardware covered in the book

Operating system requirements

Node.js 16.0 or higher

Windows, macOS, or Linux

Familiarity with command line

Windows, macOS, or Linux

JavaScript, ECMAScript 11

Windows, macOS, or Linux

Vue.js 3

Windows, macOS, or Linux

Docker and AWS

Windows, macOS, or Linux

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

You will need knowledge of Docker and containerization to run the code presented in Chapter 7.

You will need knowledge of AWS and cloud computing to run the code presented in Chapter 12.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Architecting-Vue.js-3-Enterprise-Ready-Web-Applications. If there’s an update to the code, it will be updated in the GitHub repository.

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 and diagrams used in this book. You can download it here: https://packt.link/4Lgta.

Conventions used

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

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “If you’re following along, create a new file called staging.yml inside the .github/workflows folder.”

A block of code is set as follows:

lint:   runs-on: ubuntu-latest   steps:     - uses: actions/checkout@v3     - run: |         yarn         yarn lint

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

npm install --save graphql graphql-tag @apollo/client @vue/apollo-composable

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Click on the Next: Permissions option on the other options, and finally, click the Create User button.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

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

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/support/errata and fill in the form.

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.

Share Your Thoughts

Once you’ve read Architecting Vue.js 3 Enterprise-Ready Web Applications, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere? Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781801073905

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: Getting Started with Vue.js

This first part gives you a theoretical and historical background for the rest of the book. It covers Vue.js, Options API, the new Vue.js 3, and Composition API. You will also learn how to create a new Vue app using Vue CLI, and then, we will dive deeper into using Vuex, Vue Router, and Axios to build an enterprise-ready app.

This part comprises the following chapters:

Chapter 1, Getting Started with Vue.js 3Chapter 2, Using Libraries for Large-Scale Applications

2

Using Libraries for Large-Scale Applications

Before you start learning how to use different libraries to develop large-scale and enterprise-ready applications with Vue.js 3, you need to understand these individual libraries and the various features they are bundled with to help you navigate through building scalable and enterprise-ready applications.

In this chapter, we will cover the essential aspects of Vuex, Axios, and Vue Router and how to integrate them with Vue 3 to develop an enterprise application. This background information will put you in a better position to grasp the terms and concepts of these libraries and help you understand how to build and scale an enterprise-ready application.

We will cover the following key topics in this chapter:

Exploring large-scale VuexStructuring with the repository patternCreating a repository folderStructuring Vue navigation with Vue Router

Once you’ve mastered each of these topics, you will be ready to get started with building your first enterprise-ready application with Vue 3.

Technical requirements

To get started with this chapter, we recommend reading through Chapter 1, Getting Started with Vue.js 3, and its overview of Vue 3 and the Composition API, which will be intensively used in this chapter.

Exploring large-scale Vuex

Vuex is the state management library for Vue applications. It serves as a central store for all the components in a Vue application. It is also a library implementation tailored specifically to Vue.js to take advantage of its granular reactivity system for efficient updates.

Significant benefits can be derived when using Vuex for the state management of a Vue application. Still, it can easily be misused and overwhelmed if not adequately structured—especially when building a large-scale enterprise application—due to the size of the project and the number of components and features that will be introduced in the project.

To tackle this structure problem, we will introduce you to different structures to arrange your Vuex store and the law of predictability discussed in Chapter 4, Architecture for Large-Scale Web Applications, to accommodate large-scale Vue applications.

In this section, we will discuss Vuex states, getters, mutations, and actions.

Practically, the usual way to structure your Vuex store is to have every piece of code inside a single index.js file called a single state tree. This method works perfectly for a small project and helps to avoid navigating through different files to find a single method.

However, when developing an enterprise project using Vuex, using single state trees becomes very bloated and difficult to maintain.

To reduce this large file and split the file into different features, Vuex allows us to divide our store into Vuex modules.

Before we dive in, the Vue community has introduced a new state management system called Pinia that fixes the problems of Vuex and is directly compatible with Vue 3. As of the time of writing, Pinia was still in the development and beta phase. You can learn more about Pinia and how to integrate it into your Vue 3 application here: https://pinia.vuejs.org/.

Vuex modules