Astro 1.0 Beta 版发布

作者
Nate Moore
Fred Schott

Astro 1.0 Beta 版现已推出! 此版本标志着所有主要 API 的稳定,从现在到 v1.0 官方版本发布之间,不再计划有重大的破坏性变更。

此外,我们很高兴地宣布,**Astro v1.0.0 官方版将于 2022 年 6 月 8 日发布。** 我们计划利用接下来的两个月来改进文档、修复错误、收集您的反馈,并完成最后几项 Astro 改进

我们对 Astro 迄今为止获得的支持深表感谢。数千名开发者——包括来自 FirebaseTrivagoThe Guardian 的团队——今天已经将 Astro 应用于生产环境。如果您一直在等待尝试 Astro,现在是最好的时机。

**访问 astro.new,直接在浏览器中试用 Astro v1.0 beta 版。** 您也可以运行 npm init astro 在本地启动。阅读我们的入门指南迁移指南了解更多信息。

为庆祝此版本发布,本文将探讨 Astro 的背景以及驱动我们项目的 3 项核心原则

背景

在过去十年中,开发者工具主要针对单一类型的项目进行优化——JavaScript 应用程序,通常是单页应用(SPA)。SPA 框架彻底改变了我们在 Web 上构建软件的方式,主导了过去十年的 Web 开发。

但即使是最好的 SPA 也伴随着权衡,其中一些在较少状态、基于内容的网站中意义不大。Thoughtworks 技术雷达对此做了最好的阐述

“我们常常看到团队即使在业务需求无法证明其合理性的情况下,也盲目地**默认接受 SPA 的复杂性**。” — Thoughtworks 技术雷达

这让我们开始思考……一个专为内容型网站设计的 Web 框架会是怎样的?一个优先考虑性能的工具会如何改变我们的方法?如果我们放弃 SPA 总是更好的观念,我们能否像近 10 年前 JSX 那样推动 Web 发展?

我们在 Astro 中找到了答案。

1. 卓越的网页性能应是常态,而非例外。

在 Astro 中构建一个缓慢的网站应该是不可能的(或至少是非常困难的)。

默认情况下,Astro 帮助您构建向**浏览器发送零 JavaScript** 的网站。Astro 内置的组件语法会尽可能生成静态 HTML,仅将 JavaScript 发送到您页面的交互部分。当您构建第一个 Astro 网站时,您会惊讶于实际所需 JavaScript 的量是如此之少。

Astro 也允许您**自带框架**。Astro 支持 React、Svelte、Vue、Solid 以及所有流行的 Web UI 框架。您可以在页面上混合搭配这些组件,同时仍享受 Astro 的自动 JavaScript 缩减功能。如果一个组件是 100% 静态的,Astro 会完全移除 JavaScript,仅将其作为 HTML 发送。

这种独特的 JavaScript 方法(被称为部分选择性注水)解锁了一些真正引人注目、细粒度的优化功能。组件独立加载和注水,因此我们可以根据每个组件定制和控制加载行为

<!-- client:load -- high priority, load this component on the page ASAP -->
<MyCriticalBuyButton client:load />
<!-- client:visible -- low priority, only load when visible on the page -->
<MyHeavyReactImageCarousel client:visible />

这种级别的控制在 Next.js 或 SvelteKit 等 SPA 框架中极其困难,并且对 Astro 来说是独一无二的。

2. 简洁直观的 API 是我们的超能力。

我们将 Astro 的语言语法设计得十分简洁,希望无论背景或技能水平如何,任何人都能轻松上手。即使您只使用过前端 JavaScript 框架、习惯了更传统的后端工具,或者只是在学习 HTML 和 JavaScript 的基础知识,Astro 也会让您感到熟悉。

关于 Astro 组件语言,最重要的一点是它是**HTML 的超集**。一个有效的 HTML 片段就是一个有效的 Astro 组件。没有要导出的渲染函数、要返回的 JSX 或要管理的钩子。事实上,根本没有 JavaScript!

<!-- This is a valid Astro component! HTML is the best :) -->
<p>Hello, World!</p>

您会惊讶于仅用 HTML 就能在 Astro 中走多远!

随着您经验的增长,您将学习 Astro 如何通过类似 JSX 的表达式和组件属性来支持动态模板。您还会对我们用来与模板一同运行服务器端代码的“frontmatter”组件脚本越来越熟悉。不久,您就能编写出更强大的 UI 组件,例如这样

---
// Run JavaScript code in your component frontmatter.
// This all runs at build time, so no JS on the client!
const message = "Hello, " + Astro.props.name
---
<p>{message}</p>

我们将 Astro 的其余部分设计得同样直观:我们尽可能支持 Web 标准 API,因此您可以使用带顶级 awaitfetch() API 从外部源获取数据。使用显式的 ESM import 从您的项目中读取本地数据,而不是使用不可见的隐式数据瀑布流。

3. Web 应该拥有一个与框架无关的基础。

前面我们提到,Astro 支持所有流行的 UI 框架——React、Vue、Svelte、Solid、Preact 和 Lit。Astro 与框架无关的设计意义深远,也是我们在设计 Astro 新功能时始终积极考虑的因素。

举个例子:SolidJS 于 2021 年发布时,并没有像 Solid Start 这样的官方全栈 Web 框架。当然,您可以在新项目中使用 SolidJS,但许多工具使得在不完全重写到新的、与 Solid 兼容的 Web 框架的情况下,无法在您的代码库中逐步尝试 SolidJS。

**框架锁定**可能是一个大问题,尤其是在考虑技术决策时比我们其他人时间尺度更长的大型组织中。在更广阔的开源生态系统中,框架锁定只会让像 SolidJS 这样的新框架更难获得关注。

考虑到这一点,我们将 Astro 设计为完全与框架无关。我们的重点是为长期项目**构建最佳基础**,使组织能够灵活地随时间更改技术和框架。像 Google 这样的大型组织也可以从将基础设施和支持简化到单个工具 (Astro) 中受益,同时仍赋予其前端团队使用他们喜欢的 UI 框架的灵活性。

如果您正在为 Web 构建新的 UI 框架,请考虑在您的项目中集成 Astro 支持。

Astro 的下一步计划是什么?

本周是 Astro 总部的**发布周**,因此本周剩余时间我们还有一些激动人心的公告。

  • 4 月 5 日,星期二:**超越静态站点**
  • 4 月 6 日,星期三:**主题、组件、集成**
  • 4 月 7 日,星期四:**贡献者日**
  • 4 月 8 日,星期五:**回顾(以及一个额外的惊喜……)**

除此之外,您可以查看我们的公开路线图,了解我们为 **2022 年 6 月 8 日** Astro v1.0.0 官方发布而努力的最新进展!🎉

如果您有兴趣参与或分享任何反馈,我们邀请您访问我们的 GitHub 仓库并加入我们的 Discord 服务器