注册

前端是不是又要回去操作真实dom年代?

写在开头



  • 近期我有写两篇文章,一篇是:petite-vue源码解析和掘金编辑器的源码解析,发现里面用到了Svelte这个框架
  • 加上最近React17,vite大家也在逐步的用在生产环境中,我于是有了今天的思考

看前端的技术演进



  • 原生Javascript - Jquery为代表的时代,例如,引入Jquery只要

<script src="cdn/jquery.min,js"></script>


  • 接着便又有了gulp webpack等构建工具出现,React和Vue也在这个时候开始火了起来,随即而来的是一大堆工程化的辅助工具,例如babel,还有提供整套服务的create-react-app等脚手架
  • 这也带来了问题,当然这个是npm的问题,每次启动项目前,都要安装大量的依赖,即便出现了yarn pnpm`等优化的依赖管理工具,但是这个问题根源不应该使用工具解决,而是问题本质是依赖本地化,代码和依赖需要工具帮助才能运行在浏览器中


总结就是:现有的开发模式,让项目太重,例如我要使用某个脚手架,我只想写一个helloworld演示下,结果它让我装500mb的依赖,不同的脚手架产物,配置不同,产物也不同



理想的开发模式




  • 1.不需要辅助的工具配置,我不需要webpack这类帮我打包的工具,模块化浏览器本身就支持,而且是一个规范。例如vite号称不打包,用的是浏览器本身支持的esm模块化,但是它没有解决依赖的问题,因为依赖问题本身是依赖的问题,而不是工具的问题




  • 2.不需要安装依赖,一切都可以import from remote,我觉得webpack5Module Federation设计,就考虑到了这一点,下面是官方的解释:




    • 多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。




    • 这通常被称作微前端,但并不仅限于此。







但是这可能并不是最佳实践,目前是有import from http,例如



import lodash from 'https://unpackage/lodash/es'


  • 这里又会有人问,那你不都是要发请求吗,都是要每次启动的时候去远程拉取,还不如在本地呢。import from http我想只是解决了一个点的问题,就是不用手动安装依赖到本地磁盘
  • 前段时间我写过,在浏览器中本地运行Node.js



这个技术叫WebContainers技术,感兴趣的可以去翻翻我公众号之前的文章




  • 等等,别急。这些仅仅开了个头,新的技术往往要探索才能实现价值最大化,我想此处应该可以彻底颠覆现有的开发模式,而且应该就在3-5年内。

将几个新的前端技术理念融合?



  • vite的不打包理念:直接使用浏览器支持的esm模块化
  • WebContainers技术:让浏览器直接运行node.js
  • import from remote,从一个个远程地址直接引入可以使用的依赖
  • 现在很火的webIDE:类似remix编辑器,直接全部可以在云端搞定
  • 浏览器的优化,天然有缓存支持

会发生什么变化?



  • 我们所有的一切开始,都直接启动一个浏览器即可
  • 浏览器中的webIDE,可以直接引入远程依赖,浏览器可以运行Node.js,使用的都是esm模块化,不需要打包工具,项目启动的时间和热更新时间都非常短,构建也是直接可以在浏览器中构建


这些看似解决了我们之前提出的大部分问题,回到今天的主题





回到主题



  • 前端会不会回到操作原生dom的时代?
  • 我觉得,有这个趋势,例如petite-vue,还有Svelte


因为之前写过petite-vue源码解析了,我们今天就讲讲Svelte



Svelte



Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。




  • 与使用虚拟(virtual)DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM





  • 上面是官方的介绍,我们看看知乎这篇文章https://zhuanlan.zhihu.com/p/97825481,感觉他写得很好,这里照搬一些过来吧直接




  • React和Vue都是基于runtime的框架。所谓基于runtime的框架就是框架本身的代码也会被打包到最终的bundle.js并被发送到用户浏览器。




  • 当用户在你的页面进行各种操作改变组件的状态时,框架的runtime会根据新的组件状态(state)计算(diff)出哪些DOM节点需要被更新





可是,这些被打包进去的框架,实在太大了。



(今天还在跟同事说,前年写的登录站点,纯原生手工打造,性能无敌)



  • 100kb对于一个弱网环境来说,很要命,我们看看svelte减少了多少体积:


科普



  • 虚拟dom并没有加快用户操作浏览器响应的速度,只是说,方便用于数据驱动视图,更便于管理而已,并且在一定程度上,更慢。真正最快的永远是:

currentDom.innerHtml = '前端巅峰';


所以Svelte并不是说多好,而是它的这种理念,可能未来会越来越成为主流



React17的改变



  • 大家应该都知道,现有的浏览器都是无法直接解译JSX的,所以大多数React用户都需要使用Babel或者TypeScript之类的编译器来将JSX转换为浏览器能够理解的JavaScript语言。许多预配置的工具箱(如:Create React App 或者Next.js)内部也有JSX的转换。
  • React 17.0,尽管React团队想对JSX的转换进行改进,但React团队不想打破现有的配置。这就是为什么React团队与Babel合作,为想要升级的开发者提供了一个全新的JSX转换的重写版本。
  • 通过全新的转换,你可以单独使用JSX而无需引入React.


我猜想,或许React团队有意将jsx语法推动到成为es标准语法中去,剥离开来希望会大大提升。



重点



  • 说了这么多,大家可能没理解到重点,那就是:大家都在想着减轻自身的负重,把丢下来的东西标准化,交给浏览器处理,这也是在为未来的只需要打开一个浏览器,就可以完成所有的事情做铺垫
  • 而我,相信这一天应该不远了,据我所知已经有不少顶尖的团队在研发这种产品


链接:https://juejin.cn/post/6986613468975595556

0 个评论

要回复文章请先登录注册