搜索

惯性

Mar 17, 2025 am 10:29 AM

Inertia

Jeremy 对开发者工具的分类一直让我印象深刻:

我曾提到过两种类型的 Web 开发工具,但我仍然不太确定该如何称呼这些类别。内部和外部?面向开发者和面向用户?

第一类包括构建工具、版本控制、转译器、预处理器和代码检查器。这些工具运行在你的机器上——或者服务器上——接收你编写的代码,并将其转换成 Web 的原材料:HTML、CSS 和 JavaScript。

第二类工具是由 Web 的原材料构成的:CSS 框架和 JavaScript 库。

这是一个很好的思考方式,当然也有一些细微之处。Sass 属于第一类,因为它不会直接交付给用户,它只生成交付给用户的 CSS。但它仍然会影响用户,因为它生成的 CSS 大小会根据你的使用方法而有所不同。

Jeremy 将 Svelte 称为一个库,其目标是在代码交付给用户之前尽可能多地进行编译。仍然会有一些 JavaScript 代码,但它不包含面向开发者的 API 的开销。这里的细微之处在于 Svelte 可以 以一种完全移除所有 JavaScript 代码的方式使用。例如,SvelteKit 可以完全关闭其水合功能,并对页面进行预渲染,从而创建一个完全无 JavaScript 的网站(或者至少只在你需要时才使用它)。

关于 React:

我知道有一些方法可以让 React 的行为更像第一类工具,但这绝对不是默认行为。而默认行为真的非常重要。对于 React 而言,默认行为是假设你编写的全部代码——以及你用来编写它的工具——都将发送到最终用户。

我认为这是合理的,但故事似乎也正在慢慢发生变化。我认为广泛应用还很遥远,但服务器组件在这里值得关注,因为它们来自 React 团队本身,就像 SvelteKit 来自 Svelte 团队本身一样。

关于 Astro:

[…] 与 Svelte 不同,Astro 允许你使用与现有框架 React 相同的语法。因此,如果你已经学习了 React——因为你需要学习它才能找到工作——那么你无需学习新的语法就能使用 Astro。

我知道你可能无法一键将现有的 React 网站转换为 Astro,但至少有一个明确的升级路径。

这不仅在理论上是正确的,而且在实践中也是正确的!

我刚刚将我们的小型无服务器微型网站从 Gatsby 转换到了 Astro。Gatsby 基于 React,因此所有组件都是作为 React 组件构建的。Pull Request 比较混乱,但它在这里。我将其中一部分转换成了 .astro 文件,但将许多组件基本保持不变,作为 .jsx React 组件。但 React 不会 发送到用户的网站上。网站上的 JavaScript 代码几乎完全被删除了,只保留了一些手写的原生 JavaScript 代码用于非常简单的交互。

所以这里有一些抛硬币的事情发生。硬币合并?对我来说,Astro 感觉非常像一个面向开发者的工具。它帮助。它使用 Vite 编译器,速度非常快,使用起来也很愉快(Astro 肯定还有一些不足之处,因为它还没有达到 1.0 版本,但 DX 在很大程度上已经实现了)。它对我的样式进行作用域限定。它允许我编写 SCSS。它允许我编写组件(使用许多不同的框架)。但它也帮助了用户。网站上根本没有 JavaScript 包了。

我想这意味着 Astro 没有改变类别——它是一个面向开发者的工具。它只是碰巧将原本面向用户的工具(甚至是 Svelte)变成了几乎完全面向开发者的工具。

因为我还有几个关于 Astro 的链接一直放在口袋里,Flavio 有一个很好的入门教程,这里还有 Drew McLellan 和 Matthew Phillips 在最近的 Smashing Podcast 上讨论 Astro。

这里还有 Dave 和我讨论我最近用 Astro 重做的网站:

以上是惯性的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

CSS盒装属性有什么作用?CSS盒装属性有什么作用?Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画?我们如何使用CSS动画?Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS,关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗?我们可以使用CSS向我们的项目添加3D转换吗?Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换,关键属性,浏览器兼容性和性能注意事项的讨论。(角色计数:159)

我们如何在CSS中添加梯度?我们如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度(线性,径向,重复)来增强网站视觉效果,添加深度,焦点和现代美学。

CSS中的伪元素是什么?CSS中的伪元素是什么?Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素,它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具