Sejarah Framework Astro JS: Dari Awal Hingga Sekarang

sejarah framework astro js

Astro JS adalah sebuah framework web yang dirancang untuk kecepatan dalam hal waktu load website.

Dengan Astro JS, kita bisa membuat website yang dapat mengirimkan lebih sedikit JavaScript ke browser serta mampu mengoptimalkan performa dan SEO.

Astro JS juga mendukung berbagai framework UI seperti React, Vue, Svelte dan Preact tanpa perlu menginstalnya.

Lalu bagaimana sejarah framework Astro JS? Bagaimana awal mula ide dan perkembangan framework ini hingga saat ini? Simak ulasan lengkapnya di artikel ini.

Sejarah Framework Astro Js

Ide awal dari Astro JS berasal dari Fred K. Schott, seorang mantan engineer Google yang juga dikenal sebagai pencipta Snowpack dan Skypack.

Fred melihat bahwa banyak website modern yang terlalu bergantung pada JavaScript di sisi klien (client-side), padahal sebagian besar konten statis bisa disajikan dengan HTML dan CSS saja.

Hal ini menyebabkan website menjadi lambat dan boros sumber daya.

Fred kemudian mencoba membuat sebuah prototipe framework web yang bisa menghasilkan HTML statis dari komponen UI(User Interface) berbasis JavaScript tanpa perlu menjalankan JavaScript di browser.

Prototipe ini dinamakan Astro Vite (kemudian disingkat menjadi Astro), karena menggunakan Vite sebagai bundler.

Fred kemudian merekrut beberapa developer lain untuk bergabung dalam tim pengembangan Astro, seperti Matthew Phillips (mantan engineer Adobe), Drew Powers (mantan engineer Netlify) dan Nate Moore (mantan engineer InVision).

Tim Astro mulai membangun framework ini dengan tujuan untuk membuat website yang lebih cepat, lebih ramah lingkungan dan lebih mudah dibuat.

Mereka juga ingin memberikan kebebasan bagi developer untuk memilih framework UI favorit mereka tanpa perlu khawatir tentang performa atau kompatibilitas.

Tim Astro juga terinspirasi oleh beberapa proyek open source lain seperti Eleventy, Hugo, Jekyll dan SvelteKit.

Setelah beberapa bulan pengembangan intensif, tim Astro akhirnya merilis versi beta pertama dari framework ini pada Juni 2021.

Versi beta ini mendapat sambutan positif dari komunitas web developer, terutama karena fitur-fitur unik yang ditawarkan oleh Astro seperti zero-JS frontend architecture, partial hydration, island architecture, query media css, dan built-in collections.

Fitur Awal Astro JS

Berikut penjelasan untuk fitur awal yang unik tersebut dari framework Astro saat masih versi beta:

1. Zero-JS frontend architecture

Zero-JS frontend architecture adalah fitur yang memungkinkan developer untuk membuat website tanpa mengirimkan JavaScript sama sekali ke browser.

Hal ini bisa meningkatkan kecepatan loading website secara signifikan dan menghemat bandwidth pengguna.

2. Island Architecture

Island architecture adalah fitur yang memungkinkan developer untuk membuat komponen interaktif di halaman HTML statis.

Komponen ini disebut sebagai island (pulau) karena mereka berdiri sendiri dan tidak bergantung pada komponen lain.

Island juga bisa menggunakan framework UI apapun, bahkan bisa mencampur beberapa framework dalam satu halaman.

Hal ini memberikan fleksibilitas dan kreativitas bagi developer untuk memilih alat yang paling sesuai dengan kebutuhan mereka.

Astro JS menggunakan konsep island architecture untuk menghasilkan website yang lebih cepat dan lebih ramah lingkungan.

Astro JS secara otomatis menghasilkan HTML statis dari komponen UI berbasis JavaScript tanpa mengirimkan JavaScript ke browser.

Hal ini bisa menghemat bandwidth pengguna dan meningkatkan performa loading website.

Namun jika developer ingin menambahkan interaksi klien (client-side) ke komponen mereka, Astro JS juga menyediakan fitur partial hydration.

3. Partial Hydration

Partial hydration adalah fitur yang memungkinkan developer untuk menentukan komponen mana saja yang perlu dihidrasi (dijalankan) dengan JavaScript di browser.

Hal ini bisa mengurangi jumlah JavaScript yang dikirimkan ke browser dan meningkatkan performa interaksi pengguna.

4. Media Query CSS

Astro JS juga menambahkan fitur baru untuk menyesuaikan partial hydration menggunakan media query CSS yang menghindari mengirimkan kode ke perangkat yang tidak membutuhkannya³.

Misalnya, jika developer ingin membuat sebuah komponen sidebar menu yang hanya muncul di layar mobile, mereka bisa menambahkan direktif client:media="(max-width: 600px)" ke komponen tersebut.

Dengan begitu, komponen tersebut hanya akan dihidrasi jika lebar layar kurang dari atau sama dengan 600px.

Jika lebar layar lebih besar dari itu, komponen tersebut tidak akan mengirimkan atau menjalankan JavaScript sama sekali.

Hal ini bisa menghemat bandwidth pengguna dan meningkatkan kecepatan loading website.

Selain partial hydration, Astro JS juga mendukung fitur lain untuk mengontrol kapan dan bagaimana sebuah komponen dihidrasi.

Ada beberapa direktif klien (client directives) yang bisa digunakan oleh developer untuk menyesuaikan perilaku hidrasi komponen mereka. Berikut adalah beberapa contoh direktif klien yang tersedia di Astro JS:

  • client:load : Menghidrasi komponen saat halaman dimuat
  • client:idle : Menghidrasi komponen saat thread utama kosong
  • client:visible : Menghidrasi komponen saat masuk ke viewport
  • client:media="(query)" : Menghidrasi komponen saat media query terpenuhi

Selain query media css, ada juga fitur built-in collection.

5. Built-in collections

Built-in collections adalah fitur yang memungkinkan developer untuk membuat halaman dari data secara dinamis.

Misalnya, jika developer memiliki CMS yang berisi daftar artikel blog, mereka bisa menggunakan built-in collections untuk menghasilkan rute dan halaman dari API tersebut.

Developer juga bisa mengelompokkan konten dan membuat pagination dengan mudah.

Built-in collections menggunakan properti Astro.props.collection untuk mendapatkan data dari sumber yang ditentukan oleh developer.

Developer bisa menggunakan fungsi defineCollection() untuk menentukan sumber data, filter data, sort data dan limit data.

Developer juga bisa menggunakan fungsi getCollection() untuk mendapatkan koleksi secara global.

Selain itu, developer juga bisa menggunakan fungsi getEntryBySlug() untuk mendapatkan entri tertentu dari koleksi berdasarkan slug.

Berikut adalah contoh penggunaan built-in collections untuk membuat halaman blog dari API JSON:


// src/pages/blog.astro
// Import Astro component
import Astro from 'astro/components';

// Define collection source
export async function defineCollection({ Astro }) {
  // Fetch posts from JSON API
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();

  // Return collection object
  return {
    // Data source (required)
    data: posts,
    // Route pattern (required)
    route: '/blog/[slug]',
    // Slugify function (optional)
    slugify: (post) => post.title.toLowerCase().replace(/\s+/g, '-'),
    // Pagination options (optional)
    paginate: {
      size: 10,
      permalink: ({ pageNumber }) => `/blog/${pageNumber + 1}`
    }
  };
}

// Get collection props
const { collection } = Astro.props;
<html>
    <head>
        <title>Blog</title>
    </head>
    <body>
        <h1>Blog</h1>

        <!-- Render collection items -->
        <ul>
        {collection.data.map((post) => (
            <li><a href={post.url}>{post.title}</a></li>
        ))}
        </ul>

        <!-- Render pagination links -->
        <nav>
        {collection.page && (
        <>
            <a href={collection.page.previousURL}>&lt; Previous</a>
            <span>{collection.page.current} / {collection.page.total}</span>
            <a href={collection.page.nextURL}>Next &gt;</a>
        </>
        )}
        </nav>

    </body>
</html>

Harap untuk diperhatikan! Contoh kode penggunaan `Built-In Collection` diatas mungkin di Astro versi baru sudah tidak dapat digunakan lagi, mengingat contoh kode tersebut dibuat saat framework Astro masih versi beta

Perkembangan Versi Astro JS

Saat ini, setidaknya framework astro telah merilis 3 versi, dimulai dari:

Versi 1

Di versi pertama astro, dirilis pada bulan juli tahun 2022.

Dan ini merupakan rilisnya versi final dari salah satu framework javascript terbaik berbasis SSG ini.

Mengapa dinamakan versi final? karena itu artinya menandakan bahwa kerangka kerja ini sudah stabil untuk digunakan.

Untuk fitur-fitur yang dibuat juga sudah mulai matang dengan kata lain siap untuk dipakai pada tahap Production.

Versi 2

Di versi kedua astro, dirilis pada bulan januari tahun 2023.

Dimana pada framework ini sudah mulai ditambahkan beberapa fitur baru.

Salah satu fiturnya yang sangat powerful ialah Image Optimization, dimana kita dapat dengan mudah mengoptimalkan ukurang gambar dan juga format dari gambar itu sendiri.

Selain itu salah satu fitur lainnya yang membuat framework ini semakin disukai developer adalah adanya dukungan untuk konfigurasi file MDX, serta banyaknya dukungan integrasi dengan layanan lain seperti: Cloudflare, Netlify, Vercel dll.

Versi 3

Di versi ketiga astro, dirilis pada bulan agustus tahun 2023, yang artinya ini menandakan versi terbaru daripada salah satu kerangka kerja javascript ini.

Dimana terdapat banyak perubahan yang terjadi pada versi ketiga ini, seperti ada beberapa fitur yang mulai berlaih dari versi beta ke versi alpha.

Tidak hanya itu saja, beberapa fitur lainnya juga beralih dari alpha menjadi experimental.

Selain itu ada juga beberapa fitur yang dulunya ada pada astro versi 1, di versi ke-3 ini diubah statusnya menjadi deprecated, artinya telah dihapus.

Kesimpulan

Astro JS adalah sebuah framework yang dapat membuat situs web statis dengan fitur hidrasi parsial, berbasis komponen, cepat dalam time load page website, mendukung SEO dan dapat menggunakan library/kerangka kerja populer lainnya dari javascript.

Astro JS dirilis pada Juni 2021 oleh Fred K. Schott dan timnya sebagai hasil dari proyek Snowpack dan Skypack. Astro JS memiliki slogan “Build fast websites, faster” yang menunjukkan visi dan misinya untuk membangun situs web modern dengan lebih sedikit javascript.

Dan tidak hanya itu saja, astro juga dari mulai awal dibangun(2021) hingga saat ini di tahun 2023 telah merilis setidaknya 3 versi, yang tentunya pada versi masing-masing membawa perubahan yang signifikan agar kerangka kerja ini mengikuti perkembangan pengembangan web modern saat ini.

Dengan begitu cukup sekian pembahasan kita kali ini mengenai sejarah framework astro js, semoga anda bisa memiliki pengetahuan yang baru akan lahirnya salah satu framework modern javascript ini.

Selanjutnya Belajar Apa?

Berikutnya kita akan mengenal lebih dalam mengenai framework astro js ini, dimulai dari apa itu apa itu astro, apa-apa saja perubahan fiturnya yang berubah, serta tidak lupa juga menjawab pertanyaan umum seputar kerangka kerja berbasis static site generator dari javascript ini.

Silahkan Baca : 📖 Mengenal Astro, Framework SSG dengan Banyak Kelebihan

Hai perkenalkan, nama saya adalah Moses Fahmi Pratama, penulis sekaligus programer yang menulis dan mengembangkan blog ini. Bagi anda yang merasa terbantu akan kehadiran blog ini, anda dapat melakukan donasi kepada penulis melalui tombol Nih Buat Jajan dibawah ini 🤗

Nih buat jajan

Akhir kata saya ucapkan banyak terimakasih, atas donasi anda 🙏😊

Comments