Astro 1.0 Beta 版现已推出! 此版本标志着所有主要 API 的稳定,从现在到 v1.0 官方版本发布之间,不再计划有重大的破坏性变更。
此外,我们很高兴地宣布,**Astro v1.0.0 官方版将于 2022 年 6 月 8 日发布。** 我们计划利用接下来的两个月来改进文档、修复错误、收集您的反馈,并完成最后几项 Astro 改进。
我们对 Astro 迄今为止获得的支持深表感谢。数千名开发者——包括来自 Firebase、Trivago 和 The 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,因此您可以使用带顶级 await
的 fetch()
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 服务器。