View source for 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==

{| class="wikitable"
! 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==
{| class="wikitable"
! 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==

{| class="wikitable"
! 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
|-
| '''Tailwind CSS''' || CSS      || Utility-first, fleksibel untuk custom UI
|}

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

1. '''Inisialisasi Proyek'''

<pre> 
 npx create-react-app nama-proyek
 # atau
 npm init vue@latest
</pre>
   

2. '''Membuat Komponen'''

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

3. '''Menghubungkan Komponen ke Halaman'''

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

4. '''Menjalankan Proyek'''

 npm run dev
   
==7. 📊 Studi Kasus Mini: Tanpa vs Dengan Framework==

{| class="wikitable"
! Tanpa Framework        !! Dengan Framework (Vue/React)
|-
| Perlu buat HTML manual || Gunakan `<Component />`
|-
| Sulit maintain banyak file || Komponen terpisah → mudah dipelihara
|-
| Reload halaman penuh   || Single Page Application (SPA) = lebih cepat
|-
| Penanganan form manual || 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]]