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

相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
66 9
|
2月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
33 0
|
24天前
|
开发框架 前端开发 JavaScript
React 框架的优点和缺点是什么?
React框架作为当前主流的前端开发框架之一,具有诸多优点,同时也存在一些缺点
|
24天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
24天前
|
移动开发 前端开发 JavaScript
React框架
React是一个用于构建用户界面的JavaScript库,由Facebook开发并于2013年开源,目前在前端开发领域得到了广泛的应用。
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
79 10
|
2月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
97 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
57 5
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
35 4
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。