首先讲述几个概念:
1,原生:android + ios
2,web端:H5 + CSS + JS
3,小程序:wxml + wxss + js
4,大前端:各端融合之后的产物,采用的技术就是多端融合技术
虽然原生开发用户体验好,但是开发成本和发版成本都比较高,而单纯的web开发虽然可以跨平台,开发成本低,但是用户体验差,而且访问原生的能力受限。因此将web开发和原生开发打通融合就成为大前端新的发展趋势。比较热门的就是FaceBook公司2015年推出的跨平台移动应用开源框架React Native。
由于React Native使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此学习成本比较低,兼顾了web开发效率和原生应用性能。RN除支持移动原生外,还支持windows桌面,跨端的关键在于虚拟DOM。传统浏览器模型中DOM是性能瓶颈,浏览器大部分时间用来处理DOM的交互和更新。React框架中,构建了一个虚拟DOM的中间件,所有的操作和交互并不是立刻刷新DOM,而是由React框架来计算出虚拟DOM和正式DOM直接的diff,然后只刷新diff部分,可以达到性能最优,而React Native可以通过虚拟DOM调用原生控件进行渲染。
React Native的局限性:
1,官方不支持web端,就是说没办法将RN的代码直接放在浏览器中运行
2,官方不支持热更新,RN现阶段还达不到H5那样灵活发版在线更新,有人在用微软的 codePush,不过codePush也有一定的局限性,可以尝试自己搭建服务器实现RN的动态更新
3,原生能力有限,不支持多媒体,而且当scrollview和listview相互嵌套时也会引发手势冲突
4,复杂场景下内存性能有瓶颈
2018年Google发布了一款新的多端融合技术框架Flutter,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用Dart程序语言来编译,Dart是用预编译的方式编译多个平台的原生代码。但是Dart对开发者增加了学习成本,且UI布局复杂,不如XML可读性高。Flutter支持的库不如React Native和原生多,而且很多组件需要重新开发,不如React Native灵活。
国内一些大公司在基于React Native的基础上,结合业务需求对React Native进行深度定制,封装组件,功能扩展,在自主研发的ide里支持将RN代码一键转化为H5和小程序代码,而且可以进行双向转换,实现多端支持。
秉承 write once,run everywhere 的原则,未来肯定会有越来越多的多端融合技术将各端技术进行打通融合,提升开发人员的开发效率,降低不同平台的迁移成本。作为开发人员,我们有必要深入了解不同开发平台的基础原理,以及它们之间的差异性,为未来的技术趋势做好准备。