大家好,我是hub哥,又到了本期分享。这期我们来聊聊多端统一框架。
目前市面上端的形态多种多样,Web、App 、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,根源在于传统网页开发受浏览器能力限制太大,尤其是各家浏览器的不同实现、离线能力和性能上的缺陷导致 App 很难满足用户体验的需求。
“跨端”是目前前端界比较流行的一个词汇。跨端框架本质上是将终端能力以一种形式提供业务开发使用,可以无限制地使用所有终端能力的同时,尽量让业务开发只编写一套代码,这样既能满足性能需求,又能减少开发成本。
但纵观整个社区内的跨端开发框架,仍旧存在两个主要问题:
1.跨端框架对前端开发者来讲难度较高,如果不具备移动终端开发能力,很难上手;
2.平台差异大,相同功能甚至要为不同的平台使用不同的接口编写大量平台相关代码。
出现上述问题的原因,是因为目前业内的跨端框架,大部分由终端开发者主导开发,并不是从前端开发者角度出发的,所以对于前端开发者来说不够友好。
于是,市面上先后出现了不少跨端技术:uni-app 、Flutter、 WePY、 React Native
而本文主要介绍的,是国内几个大厂推出的解决方案:Hippy、Chameleon 、Taro、Weex
腾讯跨端框架- Hippy
当前star:4.5k
Github :https://github.com/Tencent/Hippy
去年2月20日,腾讯QQ浏览器部门发起的开源跨端框架 Hippy。在腾讯内部,Hippy 已运行3年之久,跨 BG 共有 18 款线上业务正在使用 Hippy,日均 PV 过亿,且已建立一套完整生态。相较于其他跨端框架,Hippy 对前端开发者更友好:紧贴 W3C 标准,遵从网页开发各项规则,使用 JavaScript 为开发语言,同时支持 React 和 Vue 两种前端主流框架。
Hippy 实现了类似 Flutter 的引擎直通架构(在 React Native 中的 Fabric 架构),通过 C++ 开发的模块直接插入 JS 引擎中运行,绕过了前终端通讯编解码的开销,有效提升了 JS 前端代码和终端的通讯性能。在此基础之上,Hippy 正在实现高性能自绘,以提供更强的性能和更好的用户体验。
hippy-react 从语法上更加接近终端底层,某种程度上语法接近 React Native,同时通过官方提供了 hippy-react-web 组件库,也可以方便地生成 Web 版网页。
特征:
为传统 Web 前端设计,官方支持 React 和 Vue 两种主流前端框架。
不同的平台保持了相同的接口。
通过 JS 引擎 binding 模式实现的前终端通讯。
提供了高性能的可复用列表。
皆可平滑迁移到 Web 浏览器。
完整支持 Flex 的布局引擎。
项目架构:
例:全民 K 歌:react + hippy-react + hippy-react-web