超越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

相关文章
|
4天前
|
开发框架 前端开发 Go
【GoGin】(0)基于Go的WEB开发框架,GO Gin是什么?怎么启动?本文给你答案
Gin:Go语言编写的Web框架,以更好的性能实现类似Martini框架的APInet/http、Beego:开源的高性能Go语言Web框架、Iris:最快的Go语言Web框架,完备的MVC支持。
89 1
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
26天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
3月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
179 13
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
97 1
|
4月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
4月前
|
开发框架 安全 前端开发
Go Web开发框架实践:模板渲染与静态资源服务
Gin 是一个功能强大的 Go Web 框架,不仅适用于构建 API 服务,还支持 HTML 模板渲染和静态资源托管。它可以帮助开发者快速搭建中小型网站,并提供灵活的模板语法、自定义函数、静态文件映射等功能,同时兼容 Go 的 html/template 引擎,具备高效且安全的页面渲染能力。
|
6月前
|
JavaScript 前端开发 API
|
4月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。