Slide 1

Slide 1 text

Welcome! Selamat bergabung di SaCode’s Weekend!

Slide 2

Slide 2 text

Outline 💻 Masalahnya: Terlalu banyak JavaScript 💻 Perkenalan dengan Astro 💻 Mengapa Memilih Astro? 💻 Bagaimana Astro bekerja? 💻 Integrasi dengan tools lainnya 💻 Demo

Slide 3

Slide 3 text

The Problem: Terlalu Banyak JavaScript

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Sebelum @fireship Setelah @fireship

Slide 10

Slide 10 text

Berkenalan Dengan

Slide 11

Slide 11 text

https://astro.build

Slide 12

Slide 12 text

- 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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Mengapa Memilih Astro?

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Mengapa Memilih Astro? Performa Terbaik.

Slide 17

Slide 17 text

Mengapa Memilih Astro? Mixing Frameworks.

Slide 18

Slide 18 text

Mengapa Memilih Astro? Kelola konten dengan Markdown atau MDX.

Slide 19

Slide 19 text

Mengapa Memilih Astro? View Transitions.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

Bagaimana Astro Bekerja?

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Integrating With Other Tools

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Q&A Silahkan ajukan pertanyaan kalian melalui “messages box” atau langsung “open mic”

Slide 30

Slide 30 text

Demo & Discuss Dalam sesi demo & diskusi, kita semua bisa sambil mengajukan pertanyaan.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Kesan & Pesan ❏ Kesan terhadap penyelenggaraan SaCode’s Weekend hari ini? ❏ Pesan untuk kita semua yang telah ikuti SaCode’s Weekend hari ini?

Slide 33

Slide 33 text

Thank You Happy Coding! WWW.SACODE.WEB.ID