前端技术变迁史

1.洪荒时期

1995年javascript刚建立的时候，网页是无状态。此时的研发范式还是遵循着后端为主的MVC模式，即后端主导着整个研发流程，负责保存和管理数据库（Model层），处理数据和实现业务逻辑（Control层），当时还没有前端这个工种，完全是由美工负责提供切好的html模版给到后端，由后端完成jsp、php的文件渲染给到浏览器展示，jsp&php模版如下图所示：

jsp&php模版示例

这个阶段的主要问题如下：

1、用户体验不流畅：每次伴随用户的操作，都要刷新页面获取最新的状态，用户体验割裂。
2、页面加载速度慢：每次刷新页面，都要重新加载静态资源文件，页面加载速度慢。
3、前后端协作困难：前后端共同维护一套模板代码，后端需要在前端写好的代码上加上后端的动态逻辑。

2.Ajax诞生

这个阶段Ajax诞生后前端可以无需重新加载整个页面就能主动获取最新的页面状态，至此前端开始维护页面状态，这标志着前后端分离的开发模式雏形开始出现。

前端开发员为了实现页面的更新需要频繁操作dom，此时面临最大的问题就是各大浏览器标准不统一，导致的dom原生操作非常非常麻烦，业界急需一个统一的跨浏览器的处理方案。

3.JQuery 应运而生

JQuery重点解决了2大痛点：
1、完善的跨浏览器解决方案
2、简化的dom操作和事件处理

由于JQuery的出现，前端写代码难度大大降低：

jquery是如何简化dom操作的

4.现代框架出现 - MVVM

随着时代发展和前端地位的不断提升，以往的前端开发存在以下弊端：
1、随着前端应用复杂度的提升，越来越无法满足模块化开发和协作的需求。
2、MVC、MVVM等后端框架衍生的好的范式无法再前端开发中得到很好落地应用。

前端框架进入百花齐放的时代，像Backbone.js、.Ember.js、Knockout.js、Angular.js(1.0)等框架也曾流行一时，但最终三大框架登上时代舞台：

  • React
  • Vue
  • Angular(2.0)

5.持续进化中

在技术的加持和浏览器标准的不断完善下，前端的能力越来越广，能涉足的领域也越来越多：

  • 游戏开发(coco2d.js、白鹭)
  • webApp开发(RN、weex、Flutter)
  • 图像开发WebGL(three.js)
  • 小程序/快应用
  • 后端(node.js)
  • 应用开发(electron)
  • Web3开发(ethers.js、web3.js、viem、wagmi)

同时为了提高前端开发体验，配套的前端基建发展越来越快，比如：

  • webpack、rollup、vite等解决前端编译打包的问题
  • typescript解决js类型增加代码鲁棒性
  • next.js、nuxt提供了全栈开发解决方案
  • 未来更多想象…

关于React

React是meta 2013年内部推出的前端框架，是目前使用率最高的前端框架，拥有最好的社区支持和生态圈以及大量的第三方工具，海外占比极高。

1.开发思想

三个关键词：组件化、不可变、数据流。

React团队推崇开发者将一个大需求拆解，使用JSX语法来编写一个一个可复用的组件来合成需要的用户界面。
开发者只需考虑如何拆解可复用的组件，管理好每个组件的数据状态，剩下的工作交给React。

2.解决了哪些问题?

  • 使用虚拟dom和声明式编程，解决了JQuery仍需手动操作dom的问题
  • 通过单向数据流，简化了数据管理的复杂度，易于理解和维护
  • 引入组件化开发模式，满足前端工程化和模块化的趋势
  • 基于虚拟dom的思想，使得跨平台开发成为现实，推出了React Native

3.缺点

个人观点：1.由于JSX语法写法太过灵活，导致缺乏范式和最佳实践，学习曲线陡峭。学会rect写代码不难，难的事写出高性能可复用性的代码。
2.社群生态相对分散，官方没有提供一套完整可用的套件，不像Vue有全家桶，需要花更多的时间来评估和选择适合项目的第三方库和工具。
3.中文资料不如Vue，且质量不高。

4.个人建议学习路线

首先推荐官方网站作为快速入门，和demo实践，尽快熟悉和掌握React语法和开发思想。

官方文档：https://react.dev

B站和其它官网也有各种免费讲解视频可以作为辅助学习材料，也可以选择一些优秀的付费课程。

记住coding才是最好的学习方式，代码是一行一行写出来的，而不是满足于概念理解或一些简单的demo上。

最后如果还有余力，可以深入研究一下源码，甚至写一个mini-react, 更了解本质。

React与Web3

React在Web3领域有广泛的应用，在交易所、Dapp、钱包中，都可以使用React配合Wagmi、viem来实现链交互，页面框架的搭建，而且海外React岗远远高于其他前端框架，所以所学好React的收益还是蛮大的。