以前,与后端开发相比,前端开发并不总是得到应有的重视。但是时代变了,Web应用正在快速增长,这主要是由于开源工具的发展。如今,前端正以令人难以跟上的速度前进。

Svelte越来越受欢迎

Svelte是一个相对较新的工具,理论上它起步太晚,无法有机会对抗React、Vue 和 Angular。但它正以前所未有的速度稳步普及。

但是Svelte不仅仅是这些。它是一个构建优化前端的编译器。

Svelt不像其他流行的框架那样导入到应用程序中。相反,用Svelte编写的代码会被编译成纯JavaScript。这使得Svelte能够在速度方面战胜React或Vue等框架。

React、Vue和Angular将继续存在

这三个框架中的每一个从一开始就越来越受欢迎。

来源:Npm 趋势

看一下上面的图表。请注意,Angular的受欢迎程度增长了十倍以上。React和Vue增长更快。所有三个框架都支持几乎相同的用例。这意味着无论你选择这三个框架中的哪一个,你都可以期待它在未来的几年中得到使用和支持。

框架需要支持静态和动态页面

让我们确定什么是实际的静态页面和动态页面。

当用户打开动态页面时,动态页面获取并处理内容。静态页面是在构建时预定义的。它们成为光盘上单独生成的文件。它们看起来和动态的一样,但是用户的浏览器需要做的工作更少。

如果你有一个商店,你可以有一个单一的动态产品页面,或数以千计的静态产品页面,每个产品一个。这意味着静态页面对用户来说性能更好,但是构建起来要花更长的时间。

放弃静态页面的原因是React和Vue类型的单页面应用程序(SPA)框架的普及。他们还恢复了他们的青睐。SPA生成的动态内容比用HTML编写的现成内容要慢得多。当页面从服务器获取数据时,这种差异尤其明显。动态页面通常必须下载并处理这些数据。这导致了spa中静态页面的诞生。Gatsby通过在React中为静态页面构建一个框架和基础设施来解决这个问题。

专注于第一次内容绘制的时间会产生大量用于在其他框架(例如Vue或Svelte)中生成静态页面的解决方案。

另一方面,静态页面很难扩展到几百万个页面。如果你正在开发一个有很多动态内容的应用,比如用户资料,你最好使用动态页面。这两种处理内容的方式都会存在。

前端优化是关键

近年来,前端已经完成了一个完整的循环。轻型站点变成了渲染时间长的重型平台。加快 SPA 速度的趋势已经存在多年,但势头仍在增强。

  对性能产生负面影响的库,如Moment.js,被更轻、高性能的库所取代,如Day.js。其他的则被重构以减小包的大小。示例包括Material UI和Lodash。

在整个前端生态系统中,越来越强调使用延迟加载,在服务器端渲染前端,或者使用CSS文件而不是使用JavaScript为应用程序设置样式,例如styled- 成分。

Tailwind最近广受欢迎,到2022年,它肯定会继续流行,它可以像几乎没有其他CSS工具一样处理减少应用程序加载时间。话虽如此,它有一个陡峭的学习曲线。Tailwind代码通常很难阅读。

建议也尝试Linaria。Linaria结合了样式组件的优点和使用静态CSS文件的速度。

注意如何在样式中使用JavaScript。也可以重用样式,因为它们是常规的JS常量。代码在构建过程中被编译成CSS文件。

这结合了出色的开发人员体验和超快的前端。

结论

很多创新正在发生,前端也在快速发展。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部