Vue.js Development Fundamentals

Vue.js adalah salah satu framework JavaScript yang semakin populer untuk membangun antarmuka pengguna yang dinamis dan responsif. Dengan pendekatan yang progresif dan fleksibel, Vue.js memudahkan pengembang dalam mengembangkan aplikasi dari skala kecil hingga besar. Namun, banyak pengembang yang masih mengalami tantangan dalam memahami perbedaan antara berbagai pendekatan dalam Vue 3, seperti Options API, Composition API, dan Script Setup API. Selain itu, konsep manajemen status reaktif, pengelolaan single-page applications (SPA), serta pengintegrasian dengan Progressive Web Applications (PWA) sering menjadi hambatan yang signifikan bagi pengembang yang baru mengenal ekosistem Vue.js.

Training Vue.js Development Fundamentals ini bertujuan untuk memberikan pemahaman mendalam tentang penggunaan Vue 3 dalam pengembangan aplikasi web modern. Peserta akan mempelajari dasar-dasar framework Vue 3, prinsip desain perangkat lunak, komposisi antarmuka pengguna dengan komponen, serta bagaimana mengembangkan aplikasi yang berskala dengan arsitektur yang baik. Selain itu, peserta juga akan mengeksplorasi teknik manajemen data reaktif, komunikasi antar-komponen, serta optimalisasi performa menggunakan Web Workers dan Progressive Web Applications.

Dalam pelatihan ini, peserta akan belajar bagaimana menggunakan Vue 3 untuk membangun aplikasi dari awal, mulai dari pengaturan proyek, memahami struktur folder yang optimal, hingga mengintegrasikan aplikasi dengan framework CSS. Selain itu, peserta juga akan mendalami konsep-komponen Vue, pembuatan SPA, manajemen status dengan Pinia, serta pengelolaan sumber daya browser seperti IndexedDB. Materi pelatihan juga mencakup aspek pengujian aplikasi menggunakan Vitest dan Vue Test Utils, pengelolaan versi dengan Git, serta metode penerapan aplikasi ke server dengan konfigurasi keamanan yang optimal.

OBJECTIVES

1. Memahami dasar-dasar pengembangan aplikasi web dengan Vue 3
2. Menggunakan berbagai pendekatan Vue 3 seperti Options API, Composition API, dan Script Setup API
3. Membangun dan mengelola SPA dengan Vue Router
4. Mengimplementasikan Progressive Web Application (PWA) dengan Vue
5. Mengelola aliran data dalam aplikasi dengan Pinia dan pola komunikasi yang efektif
6. Mengoptimalkan performa aplikasi menggunakan Web Workers dan strategi pengelolaan data browser
7. Melakukan pengujian aplikasi dengan Vitest dan Vue Test Utils
8. Mengelola proyek dengan Git dan menerapkan strategi Continuous Integration and Delivery (CI/CD)
9. Melakukan deployment aplikasi ke server dengan konfigurasi yang aman

AUDIENCE

1. Frontend Developer
2. Full-stack Developer
3. Software Engineer

PREREQUISITES

Tidak ada training khusus yang dipersyaratkan

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