Dalam era digital saat ini, pengembangan aplikasi web semakin berkembang dengan berbagai framework modern yang mendukung efisiensi dan skalabilitas. Vue.js telah menjadi salah satu framework front-end yang populer karena kemudahan penggunaannya, fleksibilitas, dan performa tinggi. Selain itu, Quasar menawarkan pendekatan unik dalam membangun aplikasi multi-platform dengan Vue.js, memungkinkan pengembang menciptakan aplikasi web, mobile, dan desktop dari satu basis kode.
Training ini dirancang untuk memberikan pemahaman fundamental tentang pengembangan front-end menggunakan Vue.js dan Quasar. Peserta akan mempelajari konsep dasar pengembangan web, perbedaan Vue.js dengan framework lain, serta bagaimana memanfaatkan Vue.js untuk membangun antarmuka pengguna yang dinamis dan interaktif. Selain itu, peserta akan mendapatkan pemahaman tentang ekosistem Vue.js, termasuk Vue Router, state management dengan Pinia, server-side rendering dengan Nuxt.js, serta teknik pengujian dan optimasi aplikasi.
Pelatihan ini mencakup praktik langsung dengan pengembangan aplikasi menggunakan Vue CLI dan Vite, penerapan komponen berbasis UI, manajemen state, dan integrasi dengan API. Di akhir pelatihan, peserta akan memiliki keterampilan untuk membangun aplikasi Vue.js dari awal hingga deployment serta memahami bagaimana Quasar dapat digunakan untuk membangun aplikasi multi-tenanted dengan efisiensi tinggi.
OBJECTIVES
1. Memahami konsep dasar pengembangan front-end, peran Vue.js, dan Quasar dalam ekosistem web
2. Membangun UI berbasis komponen dan single-page applications (SPA) dengan Vue.js
3. Mengelola state, routing, dan API komunikasi dalam aplikasi Vue.js
4. Mengembangkan dan menguji aplikasi Vue.js dengan praktik terbaik
5. Menerapkan Quasar untuk membangun aplikasi multi-platform dengan efisiensi tinggi
AUDIENCE
1. Front-End Developer
2. Full-Stack Developer
3. Web Developer
4. Software Engineer
5. UI/UX Developer
6. IT Consultant
7. Mobile Developer
8. Technical Lead
9. Product Engineer
PREREQUISITES
CONTENT
1. Introducing Front-End Development with Vue.js
1.1. A Brief History of Web Development
1.2. The Rise of Vue.js
1.3. Comparing Vue.js with the Competition
1.4. Using Vue.js to Solve Problems – Case Studies
2. Working in Vue.js Roles
2.1 Working with Vue.js
2.2. Job/Roles that Use Vue.js
2.3. Expected Future Demand
3. HTML, CSS, and JS/TS for Extra Credit
3.1 Working with a Virtual DOM
3.2. CSS Rule Application and CSS Frameworks
3.3. Modern JavaScript Practices
3.4. Client-side APIs
3.5. Using TypeScript
4. Understanding the Vue.js Instance
4.1 The Options API
4.2. Understanding the Vue Life Cycle
4.3. Including TypeScript Support in Vue.js Applications
5. Designing Component-Based UIs and Single Page Applications
Understanding Vue.js Components
5.2. Understanding Components UI Composition
5.3. Understanding Data Flow
5.4. Designing Components
5.5. Functional Components
5.6. The Sample Application as a Set of Components
5.7. Login and Registration Pages
5.8. Orders Page
6. Using the Composition API to Manage Component Logic
6.1. The Composition API
6.2. Problem Solved by the Composition API
6.3. Composition API Life Cycle and Reactive Properties
6.4. Creating Composable Utilities
6.5. VueUse – Composition API Utilities Library
6.6. Handling Dependency Injection – Provide and Inject
6.7. Using Teleport and Suspense
7. Creating and Setting Up a Vue.js Application with Vue CLI and Vite
7.1. Git and NPM Primer
7.2. NPM Primer
7.3. Using the Vue CLI to Create a Project
7.4. Using the Vue UI to Create and Manage a Project
7.5. Using Vite to Create a Project
8. Adding a CSS Framework to the Mix – TailwindCSS, Bootstrap or Foundation
8.1. TailwindCSS and Its Place in the Web Dev Ecosystem
8.2. TailwindCSS Configuration and Basics
8.3. Using TailwindCSS
8.4. Including Tailwind to Vue.js Projects
8.5. Adding Pure CSS Frameworks
8.6. Twitter Bootstrap
8.7. Zurb Foundation
9. Building User Interfaces with Components
9.1. Setting Up – Managing the Project Folders and Files
9.2. Bulding the Basic Prototype Templates
9.3. Landing Page Template
9.4. Page Layout
9.5. Changes to App.vue
10. Routing Between Pages with VueRouter
10.1. The Practice of Front-End Routing
10.2. Adding the VueRouter
10.3. Building Routing Definitions
10.4. RouterRecordRaw Object
11. Interacting with the UI Using Events
11.1. Events in Vue.js
11.2. Triggering and Handling Standard DOM Events
11.3. Creating Custom Events
11.4. Communication Between Parent and Child Components Using Custom Events
11.5. Defining and Validating Events
12. Building Forms and Handling User Input
12.1. Value Binding and v-model
12.2. Creating Forms and Using Form Components
12.3. v-model Modifiers
12.4. Handling Form Data and Validation
13. Managing State with Pinia and API Communication
Managing State in Vue 3
13.2. Introduction to the Pinia Store
13.3. Working with Pinia Stores
13.4. Talking to a Server with Fetch API from Application
13.5. Integrating Axios Into an Application
13.6. GraphQL-Based API Access
14. Testing Vue.js Application
14.1. The Benefits of Testing
14.2. Types of Tests and Tools to Use
14.3. Adding Tests to a Vue Project
14.4. Testing Components
14.5. Testing Events
14.6. Testing Composables
14.7. Testing Pinia and Routing
14.8. Using Nightwatch for E2E Testing
15. Server-Side Rendering with Nuxt.js
15.1. Nuxt.js Basics and SSR
15.2. Creating a Project with Nuxt.js and Managing Dependencies
15.3. Building the Client-Side of a Nuxt Application
15.4. Nuxt Components
15.5. Managing State and Cross-Component Functionality in Nuxt
15.6. Plugins
15.7. Building the Server-Side of a Nuxt Application
16. Building Multi-Tenanted Apps with Quasar
16.1. Quasar in Context
16.2. Getting Started
16.3. Multiple Platforms
16.4. Building Multi-Tenanted Apps
16.5. Plugins, Extensions and Utilities
16.6. Building an Application with Quasar
16.7. Getting Application Into the World
