Slide DevCoach

DevCoach 135 : Front-End | Bundel Kode dengan Module Bundler

Transcript

1. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
2. Position Bundel Kode dengan Module Bundler Front-End Web Nur Rizki Adi Curriculum Developer
4. Learning Objectives • Memahami konsep dari teknik module bundler. • Memahami saat-saat yang tepat dari pemanfaatannya. • Menunjukkan vendor-vendor yang berperan dalam teknik bundling. • Menjelaskan konsep-konsep inti yang diadopsi oleh webpack. • Menunjukkan cara menyusun konfigurasi webpack pada proyek. Front-End Web
5. Agenda • Apa Itu Module Bundler • Contoh Kasus sebagai Tempat Module Bundler Berperan • Vendor-Vendor yang Berperan sebagai Module Bundler • Konsep Kerja Webpack • Struktur Konfigurasi Webpack Front-End Web
7. Manakah tipe kalian? Front-End Web A. Satu file JavaScript untuk semua. B. Satu hanya untuk kebutuhan spesifik.
8. One specific file for specific feature…
9. One file for everything?
10. Bundle many files to one files only!
11. Module Bundler
12. Apa Itu Module Bundler Teknik menggabungkan beragam kode JavaScript (banyak berkas) menjadi satu berkas saja yang siap di tahap production (rilis).
13. Mari Analogikan! Untuk memudahkan pengenalan terhadap konsep module bundler, mari kita lakukan permisalan dengan suatu hal yang sangat menarik!
14. Bayangkan! Kita berencana wisata dengan mendaki gunung/bukit.
15. Jadi, apa perlu kita siapkan?
16. Module Bundler Hiking Bag
17. Di mana kita dapat mengelola dan mengombinasikan beragam berkas JavaScript (module) menjadi satu berkas saja yang siap pakai. Mirip dengan Module Bundler
18. Real Case!
19. • Menampilkan daftar belanja sesuai rancangan penggunanya. • Bayangkan, ada banyak kode (module) yang digunakan oleh developer. ◦ Kode JavaScript orang lain (third-party packages). ◦ Framework untuk membangun tampilan, baik CSS maupun JS. ◦ Membuat kode sendiri untuk mengelola perilaku navigasi bar, animasi, dsb. pada berkas terpisah. ◦ Menyiapkan kode untuk proses CRUD, dan banyak lagi lainnya. Contoh Kasus: Aplikasi Daftar Belanja
20. Impor Beragam JavaScript demi Aplikasi
21. Impor Beragam JavaScript demi Aplikasi
22. Hadeuh… Kewalahan 😓
24. • Ada banyak berkas yang didaftarkan. Urutannya pun menjadi hal yang sangat vital. • Setiap berkas kode JavaScript dapat di-combine menjadi satu bundel berkas JavaScript saja yang siap pakai, baik kode dari penulis itu sendiri atau pihak lain. • Tool yang digunakan untuk mencapai ini adalah module bundler. Contoh Kasus: Aplikasi Daftar Belanja (cont.)
25. Impor Beragam JavaScript Demi Aplikasi
26. Module bundler yang akan kita pelajari! Beragam Vendor sebagai Module Bundler Webpack Vite Parcel Browserify
27. Konsep Kerja Webpack
28. Konsep Kerja Webpack • Entry point • Output • Loader • Plugin • Mode
29. Struktur Konfigurasi Webpack
30. Live Demo Web Clock
32. webpack.js.org
33. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
34. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
36. Front-end Web