Sejarah Framework Astro JS: Dari Awal Hingga Sekarang

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

Dengan Astro JS, Anda bisa membuat website yang mengirimkan lebih sedikit JavaScript ke browser dan mengoptimalkan performa serta 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 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 dan built-in collections.

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.

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.

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.

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.

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

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>

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.

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.