Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router

Description

Enhance your Vue 3 development skills to build high-performing single and progressive page applications with Vite, Pinia, and Web Workers Purchase of the print or Kindle book includes a free PDF eBook Key FeaturesLearn software engineering best practices and design patterns and apply them effectively to your Vue applicationsBuild both SPAs and PWAs using Web Workers and IndexedDBDevelop, test, build, and deploy your Vue 3 applications to a real production serverBook Description If you're familiar with the progressive Vue framework for creating responsive user interfaces, you'll be impressed with its latest iteration, Vue 3, which introduces new concepts and approaches design patterns that are uncommon in other libraries or frameworks. By building on your foundational knowledge of Vue 3 and software engineering principles, this book will enable you to evaluate the trade-offs of different approaches to building robust applications. This book covers Vue 3 from the basics, including components and directives, and progressively moves on to more advanced topics such as routing, state management, web workers, and offline storage. Starting with a simple page, you'll gradually build a fully functional multithreaded, offline, and installable progressive web application. By the time you finish reading this Vue book, not only will you have learned how to build applications, but you'll also understand how to solve common problems efficiently by applying existing design patterns. With this knowledge, you'll avoid reinventing the wheel for every project, saving time and creating software that's adaptable to future changes. What you will learnDiscover the full potential of the powerful and progressive Vue 3 frameworkExplore software principles and design patterns to build maintainable applicationsCreate an efficient development environment using Vite and optimize your code and workflowIdentify and apply proven design patterns to solve common problems in your web application's architectureRefactor your codebase to improve your application's organization, scalability, and maintainabilityFollow best practices for your code, organization, architecture, and user experience implementationWho this book is for This book is for Vue.js developers who are passionate about framework design principles and seek to apply commonly found design patterns to their web development projects. This book assumes prior knowledge of JavaScript and a basic understanding of Vue.js, making it an ideal resource for developers looking to expand their existing skillset. Table of ContentsThe Vue 3 FrameworkSoftware Design Principles and PatternsSetting Up a Working ProjectUser Interface Composition with ComponentsSingle-Page ApplicationsProgressive Web ApplicationsData Flow ManagementMultithreading with Web WorkersTesting and Source ControlDeploying Your ApplicationBonus Chapter - UX PatternsAppendix Cover Title Page Copyright and Credits Foreword Contributors Table of Contents Preface Chapter 1: The Vue 3 Framework The progressive framework Using Vue in your web application The bundler way, a better way... Understanding single-file components Different strokes – options, composition, and script setup API Exploring built-in directives in Vue 3 v-bind: (shorthand ":") v-show v-if, v-else, and v-else-if v-for and :key v-model v-on: (and the shorthand @) Built-in components Book code conventions Variables and props Constants Classes and component names Functions, methods, events, and filenames Instances Summary Review questions Chapter 2: Software Design Principles and Patterns What are the principles of software design? A non-exclusive list of design principles Separation of concerns Composition over inheritance Single responsibility principle Encapsulation KIC – keep it clean DRY – don’t repeat yourself KISS – keep it simple and short Code for the next What is a software design pattern? A quick reference list of patterns The singleton pattern The dependency injection pattern The factory pattern The observer pattern The command pattern The proxy pattern The decorator pattern The façade pattern The callback pattern The promise pattern Summary Review questions Chapter 3: Setting Up a Working Project Technical requirements Project setup and tools Folder structure and modifications Integration with CSS frameworks The w3.css framework FontAwesome is just awesome Vite configuration options The To-Do app Summary Review questions Chapter 4: User Interface Composition with Components Technical requirements Page composition with components Step 1 – identify layouts and user interface elements Step 2 – identify relationships, the data flow, interactions, and events Step 3 – identify user interactivity elements (inputs, dialogs, notifications, and more) Step 4 – identify design patterns and trade-offs Components in depth Local and global components Static, asynchronous, and dynamic imports Props, events, and the v-model directive Custom input controllers Dependency injection with Provide and Inject Special components Slots, slots, and more slots... Composables and mixins Dynamic components with “component:is” A real-world example – a modals plugin Setting up our development project The design The implementation Implementing our new To-Do application A small critique of our new To-Do application Summary Review questions Chapter 5: Single-Page Applications Technical requirements What is a SPA? The Vue 3 router Installation A new To-Do application Routes’ definition and the Router object Router template components Nested routes, named views, and programmatic navigation Exploring authentication patterns Simple username and password authentication OpenID and third-party authentication Passwordless or one-time password (OTP) authentication 2FA - Two Factors Authentication Web3 authentication Summary Review questions Chapter 6: Progressive Web Applications Technical requirements PWAs or installable SPAs Upscaling a SPA into a PWA The manifest file Testing your manifest Install prompt Service workers Vite-PWA plugin Testing your PWA score with Google Lighthouse Summary Review questions Chapter 7: Data Flow Management Technical requirements Components’ basic communication Implementing an event bus with the Singleton and Observer patterns Implementing a basic reactive state Implementing a powerful reactive store with Pinia Browser data stores – session, local, and IndexedDB Experimenting with reactivity and Proxies patterns Summary Review questions Chapter 8: Multithreading with Web Workers Technical requirements An introduction to web workers Implementing a Web Worker The business delegate pattern The dispatcher pattern Establishing a communication pipeline with the web worker Accessing IndexedDB with DexieJS in the web worker Consuming a RESTful API with the web worker A simple NodeJS server for testing Summary Review questions Chapter 9: Testing and Source Control Technical requirements What are testing and TDD What to test Our base example application Installation and use of Vitest Special assertion case – fail on purpose Special assertion case – asynchronous code Installation of Vue Test Utils In-source testing Coverage The Vitest UI What is source control... and why? Source control with Git Installation on Windows systems Installation on Linux systems Installation on macOS systems Using Git Managing branches and merges Merging conflicts Working with remote repositories Continuous Integration and Delivery Summary Review questions Chapter 10: Deploying Your Application Technical requirements What is involved in publishing a web application? Domains, Domain Name Servers (DNS), and DNS records Considerations for building our application for deployment Web server options and configurations Apache HTTP Server configuration Nginx server configuration Other servers Transferring your files to the server Protecting your web application with Let’s Encrypt Summary Review questions Chapter 11: Bonus Chapter - UX Patterns Technical requirements UI design versus UX design The principles of UI design Sufficient contrast or distinction between elements Stimulating repetition and being consistent Be mindful of alignment and direction Use proximity and distance to show natural groups Laws for UI design Common patterns for data manipulation HTML input elements Checkboxes, radios, and toggle switches Chips, pills, or tags Common patterns for data visualization Tooltips Notification dots, bubbles, marks, or badges Toast notifications Carousel or image sliders Progress bars and spinners Pagination and infinite scroller Common patterns for interaction and navigation Placement of menus Breadcrumbs Modal dialogs Menu icons Accordion menus Mega menus Drop-down menus Common patterns for content organization Responsive applications Home link Hero section, call to action, and social media icons Other patterns Dark patterns Trick questions Sneak into the basket Roach motels Privacy Zuckering Preventing price comparison Misdirection Hidden costs Bait and switch Confirm shaming Disguised ads Friendly spam Summary Review questions Appendix: Migrating from Vue 2 A different way to bootstrap and start the application Register global components, plugins, and so on The data property is now always a function There are more reactive options to choose from Changes to v-model, props, and events Removed old browser compatibility Changes in directory and file organization Changes in the router and state management New components and other changes Other breaking changes Summary Final words Index Other Books You May Enjoy