超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?

简介: 超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?

说到Web框架,大家最先想到的可能是 Vue、React,或者是Next.js。但不得不提,有个后起之秀“来势汹汹”,1.0版本发布至今仅一年,就出尽风头。它就是Astro。

Astro 是什么?一个现代化的静态站点生成器和前端框架。它允许开发人员使用组件化的方式构建内容优先的网站。2022 年,Astro在JavaScript明星项目中排名第七,一年新增了15k star!

顺带一提,Astro 的作者也非无名之辈,而是Snowpack的作者 Fred K. Schott,这位可以说是Unbundle 构建工具的祖师爷。

有人说,Astro是2023年最好的Web框架。事实真的如此吗?且听我逐一道来。

1、问题:JavaScript太多了

在web开发世界中,事情变化很快,特别是对于JavaScript前端开发人员。

如此之快,以至于我们有时忽略或忘记了我们到底在为谁创建网站和web应用程序:用户

自从BackboneJS和AngularJS在2011/2012年变得非常流行以来,网络上就充斥着spa。

不要误解我的意思,spa是很棒的,只要你想创建一个web应用程序,而不是一个只有少量JavaScript交互的网站。

但是,因为AngularJS是由Google开发的,而且用UI框架做JavaScript比用jQuery更漂亮,客观上也更容易维护,所以人们开始为一切都创建spa。

是的,一切,即使是简单的基于内容的网站……

这在当时导致了两个大问题:

第一,后端框架开始针对REST API响应进行优化,不再呈现HTML。因此,我们使用模板引擎的后端框架越来越少。特别是在NodeJS中。

第二,SEO(搜索引擎优化)。

spa是在客户端渲染的,这意味着当像谷歌这样的搜索引擎爬虫进入索引内容时,它们什么都没有看到。

所以我们找到了解决办法,SSR。

基本上,就是在后端执行前端代码以进行初始渲染。

问题是:你需要一个NodeJS服务器,因为只有NodeJS后端可以执行客户端的JavaScript语言。

如果你有一个基于内容的网站,这是一笔很大的开销。

因此,我们为这些网站找到了一个解决方案:SSG和预渲染。

SSG代表“静态站点生成器”。在spa出现之前,它们就已经存在了,但在上述问题提出后,它们变得流行起来。

但是,他们也有两个大问题:

  • 它们要么是用JavaScript以外的另一种语言编写的,这使得在不同项目之间共享UI片段变得非常困难。
  • 或者它们是基于Vue、React或Svelte等前端框架使用JavaScript编写的,因此,由于我们所说的Hydration(水化),发布了太多JavaScript。

现实是:有时你只需要一点点JavaScript来进行微交互。而且,不是每一页都写!

这就是Astro的用武之地。

Astro开发团队最初的设计目标就是:用 Astro 建立一个缓慢的网站几乎是不可能的。测试显示,与React Web 框架构建的相同网站相比,Astro 网站的加载速度可以提高 40%,而JS代码的体积可以减少90% 。

2、解决方案:Astro

Astro最初是一个基于JavaScript语言的SSG,但在客户端默认不生成JavaScript。

它在构建时执行JS代码,就像SSR框架一样,但它不会hydration(水化),因为大多数基于内容的网站不需要JS。

但是当你需要JS的时候,你该怎么办呢?

在需要时选择加入JavaScript

你可以像以前那样使用JavaScript,使用命令式DOM操作或者……

使用像AlpineJS或Vue-petite这样的东西,它们是即插即用的,只提供少量JS。

对于高级场景,或者当你需要重用来自其他项目的UI组件时,Astro创建了:Islands。

Astro Islands是你可以从Vue、React、Svelte甚至更多前端框架中引入的独立组件!

这些组件将被单独渲染并注入到最终的HTML中。静态(没有hydration)或动态(使用JS)。

以下是Astro最终HTML页面的样子:

在像Nuxt或NextJS这样的框架中,页面加载后没有任何内容是静态的,因为它会对整个页面进行hydration,从而注入不必要的JavaScript。

之前提到,Astro最初是一个SSG,如今,它不止于此。

现在Astro也支持SSR,这意味着它也可以像一个简单的后端框架一样,使用最好的模板引擎。

3、结论:为什么Astro是2023年最好的web框架?

在一个人们很容易分心的世界里,在我们用手机浏览互联网的地方,速度和页面加载是关键。

Astro是一个Web框架,你可以将其用作静态站点生成器(SSG)或简单的后端来呈现不需要作为SPA的页面。

Astro拥有最通用的模板引擎:

  • 它支持来自Vue、React、Svelte、Lit、Preact和Solid JS的外部组件。你可以轻松地重用表示组件。
  • 它具有基于文件的URL参数路由和查询支持
  • 它有图像优化和转换,支持Markdown,支持 .md和 .mdx,支持frontmatter
  • 它支持CSS作用域,支持SASS
  • 它具有脚本标记作用域和绑定
  • 它可以很容易地集成自定义元素,也就是web组件
  • 它对图像甚至组件都有延迟加载
  • 它具有静态API端点支持
  • 它支持多种运行时:Node、Deno和Bun!
  • 它可以轻松部署在主要的网络主机上,包括边缘:Netlify, Vercel, Cloudflare, Firebase, Surge, Render, Heroku 等等!

所有这些都使Astro成为最好的创作工具:

  • 活动网站
  • 清单的网站
  • 教程的网站
  • 投资组合的网站
  • 营销网站
  • 视频网站
  • 定制电子商务网站
  • 展示、博客或新闻网站

要创建简单的spa,比如一个带有固定音频播放器的网站,你可以使用Hotwire的Turbo和Astro。

现在,你甚至可以使用Astro对“视图转换”的新支持,它可以在页面导航期间保持状态。

我希望以上这些都能让你更好地理解为什么要创建Astro,以及为什么它是2023年基于内容的网站的最佳web框架。

4、相关内容拓展:(技术前沿)

开发语言作为软件搭建的底层,长久以来一直使用英文编程,Java、C 等语言对于专业程序员来说并不难,然而许多非 IT 专业的人,希望搭建出适合自己使用的软件,却被晦涩难懂的英文编程阻拦在外。

所幸的是,自 2000 年以来,低代码领域虽然在夹缝中艰难生存,但是经历 20 年风雨,如今却已柳木成荫,相关领域企业超过百家,近年如火如荼的“JNPF 平台”更是低代码界的一匹黑马。

JNPF 平台由具备 10 多年系统开发经验和企业项目交付经验的技术团队倾力打造而成的企业级低代码平台。支持多国语言切换搭建界面,业务流程只需要“拖拉拽”方式、少量或完全不需要编写代码即可搭建,操作起来就像搭积木一样简单,会玩电脑就可以开发软件。

核心功能:表单引擎、可视化引擎、BI引擎、流程引擎、权限引擎、门户引擎、大屏引擎、接口中心、物联平台

如果那你未曾尝试过这个领域,你或许可以试试看!官网:https://www.jnpfsoft.com/?csdn

相关文章
|
14天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
73 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
147 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
存储 前端开发
在React框架中,如何使用对象来管理组件的状态
在React中,组件状态通过`state`对象管理,利用`setState`方法更新状态。状态变化触发组件重新渲染,实现UI动态更新。对象结构清晰,便于复杂状态管理。
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
100 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2

热门文章

最新文章