Vue.js Development Fundamentals

Praktik pembuatan user interface website yang lebih interaktif menggunakan framework Vue.js. Dilengkapi dengan pembahasan studi kasus terkait penggunaan Vuex untuk mengatur state management, pembuatan routing dan form handling, serta penggunaan GraphQL untuk menghubungkan website dengan database

CONTENT

1. The Vue 3 Framework

1.1. The Progressive Framework
1.2. Using Vue in your Web Application
1.3. Understanding Single-file Components
1.4. Different Strokes–options, Composition, and Script Setup API
1.5. Exploring Built-in Directives in Vue 3
1.6. Built-in Components
1.7. Book Code Conventions

2. Design Principles and Patterns

2.1. What are the Principles of Software Design
2.2. A Non-exclusive List of Design Principles
2.3. What is a Software Design Pattern?
2.4. A Quick Reference List of Patterns

3. Setting Up a Working Project

3.1. Project Setup and Tools
3.2. Folder Structure and Modifications
3.3. Integration with CSS Frameworks
3.4. FontAwesome is just Awesome
3.5. Vite Configuration Options
3.6. The To-Do App

4. User Interface Composition with Components

4.1. Page Composition with Components
4.2. Components in Depth
4.3. Special Components
4.4. A Real-World Example – a Modals Plugin
4.5. Implementing our New To-Do Application
4.6. A Small Critique of our New To-Do Application

5. Single-Page Applications

5.1. What is a SPA?
5.2. The Vue 3 Router
5.3. Exploring Authentication Patterns

6. Progressive Web Applications

6.1. PWAs or Installable SPAs
6.2. Upscaling a SPA into a PWA
6.3. Vite-PWA Plugin
6.4. Testing your PWA Score with Google Lighthouse

7. Data Flow Management

7.1 Components’ Basic Communication
7.2. Implementing an Event Bus with the Singleton and Observer Patterns
7.3. Implementing a Basic Reactive State
7.4. Implementing a Powerful Reactive Store with Pinia
7.5. Browser Data Stores – Session, Local, and IndexedDB
7.6. Experimenting with Reactivity and Proxies Patterns

8. Multithreading with Web Workers

8.1. An Introduction to Web Workers
8.2. The Business Delegate Pattern
8.3. The Dispatcher Pattern
8.4. Establishing a Communication Pipeline with the Web Worker
8.5. Accessing IndexedDB with DexieJS in the Web Worker
8.6. Consuming a RESTful API with the Web Worker
8.7. A Simple NodeJS Server for Testing

9. Testing and Source Control

9.1. What are Testing and TDD
9.2. What to Test
9.3. Our Base Example Application
9.4. Installation and Use of Vitest
9.5. Installation of Vue Test Utils
9.6. In-Source Testing
9.7. Coverage
9.8. The Vitest UI
9.9. What is Source Control and Why?
9.10. Source Control with Git
9.11. Continuous Integration and Delivery

10. Deploying Your Application

10.1 What is Involved in Publishing a Web Application?
10.2. Considerations for building our Application for Deployment
10.3. Web Server Options and Configurations
10.4. Transferring your Files to the Server
10.5. Protecting your Web Application with Let’s Encrypt