Konsep dasar dan manfaat penggunaan framework frontend

Tujuan Pembelajaran:

Setelah mengikuti modul ini, mahasiswa mampu:

• Memahami konsep dasar framework frontend
• Menjelaskan alasan penggunaan framework dalam pengembangan web
• Mengenali berbagai framework frontend populer
• Memahami manfaat dan cara kerja dasar dari framework frontend

1. 🔍 Apa Itu Framework Frontend?

Definisi:

Framework Frontend adalah kumpulan tools, library, dan struktur kode yang mempermudah pengembangan tampilan (UI) dan interaksi pengguna di sisi client (browser).

> Framework = "Kerangka kerja" yang membantu kita menulis kode lebih rapi, efisien, dan terstruktur.

2. 🧱 Komponen Dasar Framework Frontend

Komponen	Penjelasan
Komponen UI	Potongan kode seperti tombol, navbar, form yang bisa dipakai ulang
Routing	Mengatur navigasi antar halaman (tanpa reload)
State Management	Mengelola data yang digunakan oleh banyak komponen
Templating	Mempermudah integrasi antara HTML dan data dinamis
CLI Tools	Command Line Interface untuk membuat dan membangun proyek otomatis

3. ⚡ Framework vs Library

Aspek	Framework	Library
Struktur	Sudah punya arsitektur bawaan	Bebas, tidak mengatur struktur
Contoh	React (meski disebut library, sering dipakai layaknya framework), Vue, Angular	jQuery, Chart.js
Kontrol	Framework mengatur alur kerja	Library hanya membantu tugas tertentu

4. 💡 Mengapa Menggunakan Framework Frontend?

✅ Manfaat:

1. Pengembangan Lebih Cepat

• Banyak fitur otomatis: routing, komponen UI, dan live reload

2. Kode Lebih Terstruktur

• Menghindari “spaghetti code”

3. Reusability

• Komponen dapat digunakan berulang di halaman berbeda

4. Komunitas Besar dan Dokumentasi Lengkap

• Mudah mencari solusi saat mengalami masalah

5. Responsive dan Interaktif

• Framework seperti Vue atau React sangat cocok untuk membuat web modern dan dinamis

5. 🌐 Contoh Framework Frontend Populer

Nama	Bahasa Dasar	Kelebihan Utama
React.js	JavaScript	Ringan, berbasis komponen, populer di industri
Vue.js	JavaScript	Mudah dipelajari, dokumentasi bagus
Angular	TypeScript	Lengkap, cocok untuk proyek besar
Svelte	JavaScript	Ringan, tanpa virtual DOM
Bootstrap	CSS/JS	Desain cepat, banyak komponen siap pakai
CSS | Utility-first, fleksibel untuk custom UI

6. 🛠️ Alur Kerja Dasar Framework (Contoh: Vue/React)

1. Inisialisasi Proyek

 
 npx create-react-app nama-proyek
 # atau
 npm init vue@latest

2. Membuat Komponen

 // React
 function Header() {
   return <h1>Halo Dunia</h1>;
 }

3. Menghubungkan Komponen ke Halaman

 import Header from './Header';
 function App() {
   return <Header />;
 }

4. Menjalankan Proyek

npm run dev
  

7. 📊 Studi Kasus Mini: Tanpa vs Dengan Framework

Tanpa Framework	Dengan Framework (Vue/React)
Gunakan `<Component />`
Komponen terpisah → mudah dipelihara
Single Page Application (SPA) = lebih cepat
Framework bantu validasi & pengiriman data

8. ✍️ Tugas Mahasiswa

Tugas Individu (Praktik)

• Pilih salah satu framework (React/Vue)
• Buat halaman web sederhana yang memiliki:
  • 2 komponen (misal: Header & Footer)
  • Navigasi antar halaman
  • Form input dengan validasi

Tugas Kelompok (Diskusi)

• Cari dan presentasikan:
  • Perbedaan utama antara React, Vue, dan Angular
  • Framework mana yang paling cocok untuk e-commerce skala besar dan kenapa?

9. 📚 Referensi

• [reactjs.org](https://reactjs.org)
• [vuejs.org](https://vuejs.org)
• [angular.io](https://angular.io)
• [tailwindcss.com](https://tailwindcss.com)
• [MDN Web Docs](https://developer.mozilla.org/en-US/)

Pranala Menarik

• Web Programming