Tanggapan pertama Astro: apa yang saya suka dan tidak suka

Baru-baru ini saya mula menggunakan Astro untuk membina semula projek sampingan yang asalnya dibina dengan WordPress, Go, Rails dan Hugo. Saya memilih Astro kerana ia mempunyai DX seperti React dengan sokongan pelayan bahasa yang baik, dan kerana ia serasi dengan platform pengehosan tanpa pelayan yang mempunyai peringkat percuma yang besar (Cloudflare, AWS Lambda, dll).

Saya tidak tahu banyak tentang Astro apabila saya mula menggunakannya. Memandangkan saya telah memindahkan berbilang tapak, saya ingin berkongsi perkara yang saya suka dan tidak suka tentang rangka kerja untuk sesiapa sahaja yang mempertimbangkan untuk menggunakannya.

Astro: apa yang saya suka

Pada terasnya, Astro ialah penjana tapak statik dengan keupayaan untuk menghasilkan halaman yang diberikan pelayan dinamik apabila diperlukan. Astro sangat sesuai untuk blog atau tapak pemasaran kecil dengan interaktiviti terhad. Rangka kerja menyediakan kebanyakan DX daripada Next.js tanpa overhed React.js.

IntelliSense dan pemformatan kod yang baik dalam bahasa templat yang diberikan pelayan

Sejujurnya: sokongan pelayan bahasa yang baik dan pemformatan kod sangat kurang dalam bahasa templat yang diberikan pelayan tradisional. Templat Go, Jinja, ERB dan EJS sangat tertinggal dengan alatan jika dibandingkan dengan rakan sejawat React/Vue/Svelte mereka. Kebanyakan bahasa templat yang diberikan pelayan tidak mempunyai cara untuk mengetahui pembolehubah yang terdapat dalam skop atau jenisnya.

Dengan Astro, semua ciri ini hanya satu sambungan Kod VS.

Di dalam templat Astro, anda menetapkan data anda di bahagian atas templat di dalam "pagar kod" yang sama ada berjalan pada masa binaan atau apabila membalas permintaan pada pelayan. Begini rupanya dalam amalan:

---
import Layout from "../layouts/Layout.astro";
import { getPosts } from "../data/posts";

const posts: { id, title }[] = await getPosts();
---
<layout pagetitle="Posts">
  <h1 id="Posts">Posts</h1>

  {post.length > 0 ? (
    <ul>
      {posts.map((post) => (
        <li>
          <a href="%7B%60/posts/%24%7Bpost.id%7D%60%7D">
            {post.title}
          </a>
        </li>
      )}
    </ul>
  ) : null}
</layout>

Oleh kerana semua data untuk templat dimuatkan dalam "pagar kod" di atas templat, pelayan bahasa boleh menyediakan pelengkapan automatik untuk sifat mana-mana objek yang ditakrifkan dalam skop. Ia juga akan menunjukkan apabila anda cuba menggunakan pembolehubah yang tidak wujud.

Fail Astro boleh menjadi "komponen"

Salah satu masalah terbesar saya dengan bahasa templat tradisional seperti templat Go, Jinja dan EJS ialah mereka tidak mempunyai "komponen" yang boleh menerima kanak-kanak. Kebanyakan tapak web saya mempunyai beberapa jenis elemen UI "bekas" lebar terhad, yang memastikan kandungan tidak terbang ke penghujung skrin pada monitor ultra lebar. Jika anda mempunyai kelas .container yang anda tambahkan secara manual pada

elemen, maka ini biasanya berfungsi dengan baik. Walau bagaimanapun, jika anda menggunakan rangka kerja CSS utiliti seperti Tailwind maka anda mungkin mendapati diri anda menambah kod berikut pada setiap templat halaman tunggal:

<div>



<p>When you eventually need to change these classes, it's an error-prone pain to update each file manually. But if your templating language doesn't have components that can accept children, it's almost inevitable. </p>

<p>Unlike those traditional templating languages, Astro templates can be used as components that accept children using a <slot></slot> tag. A long string of utility classes could be extracted into a reusable Astro component:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>The Astro component could then be consumed from another Astro file.<br>
</p>

<pre class="brush:php;toolbar:false">---
import Container from "../components/Container.astro";
---
<container>
  <h1 id="Hello-world">Hello, world!</h1>
</container>

Fail Astro tidak terhad kepada satu slot: ia boleh mempunyai berbilang.

Ciri kegemaran saya bagi komponen Astro ialah mereka boleh menerima prop dalam pagar kod. Berikut ialah contoh:

---
import Layout from "../layouts/Layout.astro";
import { getPosts } from "../data/posts";

const posts: { id, title }[] = await getPosts();
---
<layout pagetitle="Posts">
  <h1 id="Posts">Posts</h1>

  {post.length > 0 ? (
    <ul>
      {posts.map((post) => (
        <li>
          <a href="%7B%60/posts/%24%7Bpost.id%7D%60%7D">
            {post.title}
          </a>
        </li>
      )}
    </ul>
  ) : null}
</layout>

Komponen kemudiannya boleh menerima prop apabila digunakan dalam fail lain.

<div>



<p>When you eventually need to change these classes, it's an error-prone pain to update each file manually. But if your templating language doesn't have components that can accept children, it's almost inevitable. </p>

<p>Unlike those traditional templating languages, Astro templates can be used as components that accept children using a <slot></slot> tag. A long string of utility classes could be extracted into a reusable Astro component:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>The Astro component could then be consumed from another Astro file.<br>
</p>

<pre class="brush:php;toolbar:false">---
import Container from "../components/Container.astro";
---
<container>
  <h1 id="Hello-world">Hello, world!</h1>
</container>

Saluran paip aset bahagian hadapan dengan tambah nilai langsung terbina dalam

Saya telah membina integrasi sisi pelayan saya sendiri dengan Vite sebelum ini. Jika anda cuba mendapatkan sesuatu dalam talian dengan cepat, ini ialah jenis ciri komoditi yang anda mahu elakkan daripada membina sendiri. Dengan Astro, ia terbina dalam.

Jika anda ingin menambah skrip tersuai pada halaman atau komponen Astro, anda hanya perlu melepaskan teg skrip pada halaman tersebut.

---
type Props = { pageTitle: string; pageDescription: string };

const { pageTitle, pageDescription } = Astro.props;
---



  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{pageTitle}</title>
    <meta name="description" content="{pageDescription}">
  
  
    <slot></slot>
  

Astro akan menyusun fail TS dan JS secara automatik sebagai sebahagian daripada proses pembinaan tapak. Anda juga boleh menulis skrip yang menggunakan import daripada node_modules di dalam teg skrip dalam komponen Astro, dan Astro akan menyusunnya semasa masa binaan dan mengekstraknya ke failnya sendiri.

---
import Layout from "../layouts/Layout.astro";
---
<layout pagetitle="Tyler's Blog" pagedescription="I don't really post on here.">
  <h1 id="Tyler-s-blog">Tyler's blog</h1>
  <p>Sorry, there's no content yet...</p>
</layout>

Anda boleh memasukkan gaya CSS atau Scss dalam fail Astro dengan mengimportnya dalam pagar kod.

<div>
  <h1 id="This-is-my-page">This is my page</h1>
  <script src="../assets/script.ts"></script>
</div>

Astro juga menyediakan keupayaan untuk melakukan gaya berskop dengan menggunakan tag gaya dalam fail Astro. Ciri ini mungkin biasa kepada pengguna Vue.

Memandangkan fail Astro berikut:

<script>
  // This will also compile down to a JavaScript file at build time.

  import axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";

  const response = await axios
    .get<AxiosRequestConfig, AxiosResponse<{foo: string}>>("/some-endpoint");

  console.log(response.data.foo);
</script>

Mudah, bukan?

Tindakan

Tindakan menyediakan cara selamat jenis untuk menjalankan fungsi hujung belakang. Mereka menyediakan pengesahan dan boleh mengendalikan data JSON dan borang. Ia merupakan salah satu ciri pembunuh Astro dengan mudah: semua ini perlu disambungkan dengan tangan dalam apl Next.js dengan cara yang dipesan lebih dahulu. Mereka memerlukan lebih sedikit kod daripada yang boleh dimuatkan dengan kemas ke dalam contoh, tetapi ia agak elegan untuk digunakan. Saya syorkan membaca halaman dokumen tindakan.

Tiada kos JS masa jalan

Terdapat sebilangan besar pembangun Twitter yang mengatakan React adalah "cukup pantas." Untuk banyak perkara tidak.

Saya menggunakan Rasbperry Pi 4s untuk projek kecil, dan anda boleh rasa kos masa jalan React. Saya pasti ia adalah sama untuk telefon Android yang murah, kecuali dalam kes itu, overhed JS juga akan menghabiskan bateri.

Jika satu-satunya interaktiviti yang diperlukan oleh tapak saya ialah menogol menu navigasi, saya lebih suka menyambungkannya sendiri. Saya dengan senang hati akan mencapai React apabila saya memerlukannya, tetapi untuk banyak projek saya sebenarnya tidak memerlukannya.

Astro: apa yang saya tidak suka

Perkara yang saya tidak suka tentang Astro bukan unik pada rangka kerja: ia adalah idea yang dipinjam daripada alatan lain dalam ekosistem JavaScript.

Penghalaan berasaskan fail

Oleh kerana Astro menggunakan penghalaan berasaskan fail, separuh daripada fail dalam projek Astro akhirnya dinamakan index.(astro|js|ts) atau [id].(astro|js|ts). Penghalaan berasaskan fail ialah corak menjengkelkan yang melanda dunia bahagian hadapan selepas Next.js melaksanakannya dan ia datang dengan banyak kelemahan:

• Anda selalunya akan membuka 5 tab dalam editor anda dengan nama fail yang sama. Ia akan mengambil sekurang-kurangnya 3 tekaan untuk mencari tab yang anda cari.
• Pencari kabur fail editor jauh kurang berguna kerana begitu banyak fail mempunyai nama yang sama.
• Penghalaan berasaskan fail menyerakkan salah satu kebimbangan teras aplikasi merentas banyak fail dan folder, menjadikannya sukar untuk melihat semua laluan sepintas lalu dalam editor. Sebaliknya, anda mesti menelusuri beberapa folder untuk memahami halaman yang tersedia.

Saya akui: penghalaan berasaskan fail terasa hebat apabila anda membuat tapak dengan di bawah 10 halaman. Tetapi apabila tapak berkembang ia menambahkan geseran dan anda melawan ciri itu lebih daripada anda mendapat manfaat daripadanya.

Dalam ekosistem JavaScript, Remix menonjol dengan menawarkan versi penghalaan berasaskan fail yang meratakan semua laluan ke dalam satu direktori dan membenarkan pengguna untuk memilih keluar daripada penghalaan berasaskan fail sepenuhnya dengan konfigurasi laluan manual.

Penghalaan berasaskan fail ialah aduan terbesar saya tentang Astro, tetapi ia adalah ciri yang sukar untuk dilepaskan. Ia dilaksanakan dalam Next.js, Nuxt.js, SvelteKit dan lain-lain. Apa yang lebih aneh ialah rangka kerja ini sebahagian besarnya tidak mempunyai pendapat tentang nama fail untuk bahagian lain aplikasi. Berbeza dengan Ruby on Rails, kebanyakan rangka kerja JavaScript memberikan anda kebebasan yang tinggi dalam nama fail dan struktur projek–kecuali untuk penghalaan. Ia adalah kes khas dan kes khas menambah kerumitan pada perisian.

Satu komponen setiap fail (jenis)

Ciri bahasa JavaScript yang sangat saya sukai ialah keupayaan untuk mentakrifkan berbilang pembolehubah, fungsi dan kelas dalam satu fail. Ini memudahkan untuk menyusun fungsi yang berkaitan tanpa perlu mengekstraknya ke fail lain sebelum masanya kerana kekangan peringkat bahasa.

Sama seperti komponen fail tunggal Vue, fail Astro membenarkan penentuan satu komponen bagi setiap fail. Ini terasa membosankan bagi saya, tetapi Astro menyediakan penyelesaian.

Astro boleh membenamkan komponen React, Vue, Svelte, Solid dan Preact yang telah dipraperlihatkan terus ke dalam templatnya tanpa memuatkan sebarang JavaScript sisi pelanggan. Komponen Preact berpasangan secara munasabah dengan Astro kerana Preact JSX lebih dekat dengan HTML berbanding React JSX. Memang menjadi janggal menguruskan kedua-dua komponen Astro dan Preact dalam projek yang sama, dan sebaik sahaja saya mula menggunakan komponen Preact, saya mendapati diri saya mengalihkan sebahagian besar UI daripada fail Astro dan ke Preact.

Pemikiran akhir tentang Astro

Jika anda seorang pengguna tegar Next.js, Nuxt atau SvelteKit dan anda berpuas hati dengan rangka kerja anda, anda mungkin tidak mendapat banyak manfaat daripada Astro. Walau bagaimanapun, jika anda ingin menghantar lebih sedikit agihan JavaScript kepada pengguna anda sambil mengekalkan DX sesuatu seperti Next.js, maka Astro mungkin sesuai untuk anda.

Astro menjurus ke arah tapak web dipacu kandungan, dan menyediakan sokongan penurunan harga di luar kotak. Kerana tumpuannya pada kandungan, ia merupakan platform pemblogan pembangun yang ideal untuk menggantikan tapak WordPress atau Hugo. Walau bagaimanapun, ia mampu lebih daripada sekadar tapak kandungan melalui ciri seperti Actions.

Walaupun saya tidak menyukai penghalaan berasaskan fail, kebimbangan terbesar saya dengan menggunakan Astro ialah potensi untuk memecahkan perubahan yang akan memaksa saya membina semula tapak saya. Alat JavaScript jauh lebih agresif dengan memecahkan perubahan daripada alatan yang anda temui dalam ekosistem bahasa lain. Oleh kerana saya sangat baru dengan Astro, saya tidak tahu berapa banyak perubahan dari satu versi utama ke versi seterusnya. Walaupun dengan kebimbangan ini, saya bercadang untuk memindahkan 5-ke-6 tapak saya dari platform lain ke Astro supaya saya boleh memanfaatkan DXnya yang terkemuka dan mengehoskan tapak tersebut dengan murah.