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

相关文章
|
7天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
81 44
|
3天前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP是一种流行的服务器端脚本语言,自诞生以来在Web开发领域占据重要地位。从简单的网页脚本到支持面向对象编程的现代语言,PHP经历了多次重大更新。本文探讨PHP的现代演进历程,重点介绍其在Web开发中的应用及框架创新,如Laravel、Symfony等。这些框架不仅简化了开发流程,还提高了开发效率和安全性。
9 3
|
2天前
|
前端开发 JavaScript 开发工具
从框架到现代Web开发实践
从框架到现代Web开发实践
8 1
|
6天前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP 自发布以来一直在 Web 开发领域占据重要地位,历经多次重大更新,从简单的脚本语言进化为支持面向对象编程的现代语言。本文探讨 PHP 的演进历程,重点介绍其在 Web 开发中的应用及框架创新。自 PHP 5.3 引入命名空间后,PHP 迈向了面向对象编程时代;PHP 7 通过优化内核大幅提升性能;PHP 8 更是带来了属性、刚性类型等新特性。
14 3
|
11天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
35 10
|
7天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
26 3
|
10天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
24 5
|
8天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
22 3
|
8天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
26 2
|
13天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
17 4

热门文章

最新文章