Difference between revisions of "Konsep dasar dan manfaat penggunaan framework frontend"

From OnnoWiki
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 78: Line 78:
 
| '''Bootstrap''' || CSS/JS      || Desain cepat, banyak komponen siap pakai
 
| '''Bootstrap''' || CSS/JS      || Desain cepat, banyak komponen siap pakai
 
|-
 
|-
−
| '''Tailwind CSS''' | CSS      | Utility-first, fleksibel untuk custom UI
+
| '''Tailwind CSS''' || CSS      || Utility-first, fleksibel untuk custom UI
 
|}
 
|}
  
Line 119: Line 119:
 
! Tanpa Framework        !! Dengan Framework (Vue/React)
 
! Tanpa Framework        !! Dengan Framework (Vue/React)
 
|-
 
|-
−
| Perlu buat HTML manual | Gunakan `<Component />`
+
| Perlu buat HTML manual || Gunakan `<Component />`
 
|-
 
|-
−
| Sulit maintain banyak file | Komponen terpisah → mudah dipelihara
+
| Sulit maintain banyak file || Komponen terpisah → mudah dipelihara
 
|-
 
|-
−
| Reload halaman penuh  | Single Page Application (SPA) = lebih cepat
+
| Reload halaman penuh  || Single Page Application (SPA) = lebih cepat
 
|-
 
|-
−
| Penanganan form manual | Framework bantu validasi & pengiriman data
+
| Penanganan form manual || Framework bantu validasi & pengiriman data
 
|}
 
|}
  

Latest revision as of 10:36, 8 April 2025

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
Tailwind CSS 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)
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


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Konsep_dasar_dan_manfaat_penggunaan_framework_frontend&oldid=72468"