Pengembangan Zero-JS Frontend Dengan “Astro Framework”

Transcript

1. Welcome! Selamat bergabung di SaCode’s Weekend!
2. Outline 💻 Masalahnya: Terlalu banyak JavaScript 💻 Perkenalan dengan Astro 💻 Mengapa Memilih Astro? 💻 Bagaimana Astro bekerja? 💻 Integrasi dengan tools lainnya 💻 Demo
3. The Problem: Terlalu Banyak JavaScript
5. Popularitas SPAs (Single Page Applications). Popularitas SPAs (Single Page Applications) meningkat sejak munculnya BackboneJS dan AngularJS pada 2011/2012. Orang mulai menggunakan SPAs untuk hampir semua jenis situs web, bahkan yang sederhana. Ini menyebabkan dua masalah utama: 1. Kurangnya fokus kerangka kerja sisi server pada penggunaan template engine dan beralih ke respons REST API. 2. Masalah SEO karena SPAs di-render di sisi klien, sehingga tidak terlihat oleh mesin pencari seperti Google.
6. Server-Side Rendering (SSR) menjadi solusi. Pada dasarnya, menjalankan kode frontend di sisi server untuk initial rendering. Tetapi memerlukan NodeJS server dan bisa menjadi overhead untuk situs web berbasis konten.
7. Solusi lain muncul: Static Site Generator (SSG) dan Prerendering. SSG sudah ada jauh sebelum SPAs menjadi hal yang populer, tetapi baru menjadi populer setelah masalah sebelumnya muncul. Tetapi SSG memiliki kendala, seperti penggunaan bahasa selain JavaScript dan "hydration" yang memerlukan pengiriman berlebihan JavaScript.
8. Kenyataannya… @fireship Terkadang Anda hanya memerlukan sedikit JavaScript untuk mikro interaksi. Bahkan itu pun tidak diperlukan di setiap halaman! “Di sinilah Astro Menjadi Solusi” https://astro.build
9. Sebelum @fireship Setelah @fireship
10. Berkenalan Dengan
11. https://astro.build
12. - Astro adalah sebuah Web Framework - Secara default tidak mengirimkan JavaScript sama sekali - Partial hydration untuk fungsionalitas dinamis menggunakan “islands architecture” - SSG and SSR: Astro mendukung SSG dan SSR. Anda bisa memilih metode yang sesuai untuk setiap halaman. Apa itu Astro? https://astro.build
13. Apa yang bisa dibangun dengan Astro? 1. Marketing: Astro cocok untuk situs web pemasaran yang berfokus pada presentasi produk atau layanan Anda. 2. Blog: Anda dapat membangun situs web berita, majalah, atau blog dengan mudah menggunakan Astro. 3. Dokumentasi: Astro adalah pilihan yang baik untuk situs dokumentasi produk atau perangkat lunak. 4. Portofolio: Anda dapat membuat portofolio pribadi atau perusahaan dengan tampilan yang menarik. 5. E-commerce: Meskipun Astro mungkin tidak cocok untuk e-commerce yang sangat kompleks, Anda dapat menggunakannya untuk toko online yang lebih sederhana.
14. Mengapa Memilih Astro?
15. Mengapa Memilih Astro? 1. Content-focused: Astro dirancang untuk situs web yang kaya konten. 2. Server-first: Situs web berjalan lebih cepat saat mereka merender HTML di server. 3. Fast by default: Seharusnya tidak mungkin untuk membangun situs web lambat dengan Astro. 4. Easy to use: Anda tidak perlu menjadi ahli untuk membangun sesuatu dengan Astro. 5. UI-agnostic: Mendukung React, Svelte, Vue dan banyak lainnya. 6. Fully-featured, but flexible: Lebih dari 100+ integrasi Astro untuk dipilih 7. Community and Support: Komunitas yang aktif dan dokumentasi yang baik yang mendukung Astro, memudahkan Anda untuk memulai dan memecahkan masalah.
16. Mengapa Memilih Astro? Performa Terbaik.
17. Mengapa Memilih Astro? Mixing Frameworks.
18. Mengapa Memilih Astro? Kelola konten dengan Markdown atau MDX.
19. Mengapa Memilih Astro? View Transitions.
20. Kapan sebaiknya menggunakan Astro? Astro adalah pilihan unggul jika Anda mengutamakan kinerja dan ingin menggabungkan beberapa kerangka kerja web untuk situs statis atau sebagian besar statis Anda. Jika proyek Anda memerlukan penanganan data dinamis, rendering di sisi server, dan dukungan ekosistem yang lebih luas, Framework seperi Next.js (atau sejenisnya) adalah pilihan yang lebih baik.
21. Bagaimana Astro Bekerja?
22. Bagaimana Astro bekerja? Astro secara default menghasilkan situs statis dan yang di render di server tanpa JavaScript di peramban. Pengembang dapat memilih untuk menggunakan rendering di sisi klien untuk rute tertentu atau bagian halaman.
23. Mengenal Partial Hydration? Partial Hydration adalah konsep yang memungkinkan pengembang menentukan elemen yang dimuat dan kapan, untuk memberikan interaktivitas cepat. JavaScript hanya dimuat saat diperlukan.
24. Mengenal Island Architecture? Island Architecture adalah konsep yang membagi halaman web menjadi "pulau-pulau" yang dapat dihidrasi secara independen. Dalam Astro, Anda harus memberi tahu secara eksplisit komponen mana yang perlu berjalan di peramban, dan Astro hanya akan menghidrasi yang benar-benar diperlukan, sisanya tetap sebagai HTML statis.
25. Integrating With Other Tools
27. Sumber daya untuk Belajar Astro: 1. https://docs.astro.build/en/tutorial/0-introduction/ (free) 2. https://docs.astro.build/en/getting-started/ (free) 3. https://frontendmasters.com/courses/astro/ (paid) 4. https://www.youtube.com/playlist?list=PL9At9z2rvOC9pIc1XbjJe8oMl3h849CRH (free) 5. https://youtu.be/qBOz6TpYAOg?si=i7PRewkiPnc0TXrQ (free) 6. https://youtu.be/Oi9z5gfIHJs?si=S1YtJ6Vo9S0Aum3x (free) 7. https://youtu.be/6XzyobQYQVQ?si=kfNDtlWeaP_b1z3o (free) 8. https://www.freecodecamp.org/news/how-to-use-the-astro-ui-framework/ (free) 9. https://www.youtube.com/live/3eyedOP83fw?si=wTh8f2q-mmZUFjxR (free) 10. https://bejamas.io/blog/practical-guide-to-astro-js-framework/ (free)
28. Referensi yang digunakan pada Materi ini: 1. https://astro.build/blog/introducing-astro/ 2. https://docs.astro.build/en/getting-started/ 3. https://semaphoreci.com/blog/astro-framework 4. https://bejamas.io/blog/practical-guide-to-astro-js-framework/ 5. https://www.adservio.fr/post/astro-framework 6. https://refine.dev/blog/astro-js-guide/ 7. https://jasonformat.com/islands-architecture/ 8. https://itnext.io/ok-astro-is-the-best-web-framework-in-2023-heres-why-734ca15c7062 9. https://www.contentful.com/blog/what-is-astro/ 10. https://deno.com/blog/intro-to-islands
29. Q&A Silahkan ajukan pertanyaan kalian melalui “messages box” atau langsung “open mic”
30. Demo & Discuss Dalam sesi demo & diskusi, kita semua bisa sambil mengajukan pertanyaan.
31. Outline Demo 1. Mulai membangun Project dengan Astro 2. Deployment ke Vercel 3. Implementasi 3rd Party Tools (add integration) 4. Kelola konten menggunakan Markdown dan MDX 5. Implementasi UI-Agnostic 6. Implementasi View Transitions
32. Kesan & Pesan ❏ Kesan terhadap penyelenggaraan SaCode’s Weekend hari ini? ❏ Pesan untuk kita semua yang telah ikuti SaCode’s Weekend hari ini?
33. Thank You Happy Coding! WWW.SACODE.WEB.ID