跨平台开发技术年终盘点

一直以来，效率都是互联网企业的生命线。而“经过技术升级实现三我的干五我的的活，赚四我的的工资”是企业和我的一直渴望达到的共赢局面。

随着行业竞争加重，为进一步提高开发效率，跨平台开发逐渐的成为了互联网行业的刚需。

这样的大趋势下，一些头部互联网公司基于自身技术背景和当时技术条件，推出了不一样类型的跨平台解决方案。

根据技术类型概括为如下几类：

JS+Web View渲染

课表明：PhoneGap(Adobe)

这种技术 UI 渲染彻底交给 Web View，经过 Bridge 给 Web View 增长了拍摄器、GPS、通讯录等功能。

优势：完整的 web 体验，前端同窗开发效率高。
缺点：性能跟原生有巨大差别。

JS+ 原生 UI 渲染

课表明：React Native(FaceBook)，Weex(阿里)
GItHub 地址：
https://github.com/facebook/r...

开发技术仍然使用 JS 等 Web 元素，但 UI 渲染、动画、网络等都经过原生实现。JS 到原生的调用经过 JS 桥接器实现。

优势：
1.体验跟原生保持一致，Web 开发上手门槛稍低。
2.必定程度提高了性能。

缺点：
1.Android、iOS 原生开发者学习成本高。
2.碍于 JS 虚拟机和 JS 桥接器跟原生性能差距仍然较大。

基于图形引擎渲染（抛弃原生UI）

课表明：flutter(谷歌)
GitHub 地址：
https://github.com/flutter/fl...

著名的 Cocos2d-x 也在这个阵营，该框架已经不依赖 web 技术，也不依赖原生提供的 UI 框架。经过图形引擎本身实现渲染。

优势：
1.摆脱系统 UI 约束，容易实现不一样平台代码一致性。
2.设计方案有创新性。

缺点：
1.从 Dart 学习成本到 UI 布局的复杂度，都在明显拉低开发效率。
2.不支持热更新。

基于原生 UI 渲染（差别部分图形引擎抹平）

课表明：MLN(陌陌)
GitHub 地址：
https://github.com/momotech/MLN

MLN 刚在 GitHub 开源，名字听起来还很陌生。开发语言使用在游戏领域大火的 Lua（开发了你熟悉的魔兽争霸、愤怒小鸟），具备速度快、易上手的特色。页面布局使用客户端开发熟悉的 FrameLayout、LinearLayout。

优势：
1.客户端开发上手极快。
2.性能好，贴近原生效果。

缺点：
新推出主要应用于陌陌，缺乏第三方验证。

跨平台技术该如何选择？

而这些跨平台框架的诞生，都有着本身的技术背景。只有选对了场景才能发挥出他们真正的威力。

1.作短时间运营活动页面

这种页面更像快消品，活动事后两三天就下线。运营、产品同窗更看重展现效果和如期上线。这时候 PhoneGap 类的 web 技术就是很务实的选择。这类技术由于门槛低不少公司都有本身的技术框架。

2.以 Web 程序员为主的团队

建议有实力的团队选择 React Native、Weex 类框架。这类产品能够很大程度复用 web 程序员的开发经验，可是也须要有较强技术实力的客户端开发的支持。好比性能优化，定制化开发。

3.以客户端程序员为主的团队

1）这里排除了 React Native 和 Weex。JS、VUE 这些 web 技术一般须要客户端程序员花一周左右时间上手，另外写代码思惟方式的转变，一段时间内也会继续拖慢开发效率。

JS 虚拟机和 JS 桥接器对性能的严重消耗也让这类技术性能上跟原生差距较大。

2） Flutter 也没能扛起高性能、高效率这杆大旗。并且不支持热更新让不少注重迭代效率的互联网企业没法接受。

且不说 Dart 语言学习成本和 UI 布局的复杂性，网上搜索和我本身的性能评测中 Flutter 也一直没能兑现它宣称的高性能。

3）相比之下，MLN 对客户端开发者极其友好。Lua 简洁的类 C 语法，基本不会对客户端开发者形成任何障碍。

线性布局、frame 布局，让客户端开发者以为使用 MLN 只是给本来熟悉的UI框架换了个命名规则。原来的开发经验能够直接迁移过来。

infoView = LinearLayout(LinearType.VERTICAL)
infoView:setGravity(Gravity.CENTER_VERTICAL)
contentView:addView(infoView)

热重载功能方便实用，随时看到代码执行效果对提升 UI 开发效率帮助很大。经过官方 demo 作的性能测试，MLN 也是全部框架中性能最接近原生的。

MLN 从一线互联网公司、一线开发人员的真实需求出发，务实的解决了一系列开发中的性能、效率问题。值得向你们推荐。

性能对比

到了性能对比这个相互伤害的环节了：

以上数据能够看到，MLN 跟其余主流产品相比有显著的性能优点。一方面得益于 Lua 虚拟机的高性能。另外 MLN 的懒加载、基于 mmap 的缓存等设计也起到了明显效果。

在安卓低端手机 oppo A3 上调用 1000 次 Lua 桥接器耗时 60 多毫秒，而 1000 次 JS 桥接器一般要 1400 毫秒左右。Lua 的高性能给了 MLN 更多的设计空间。

同时值得称赞的是，MLN 的懒加载模式很是实用。不少功能可能 UI 展现部分只有几 K 代码量，而背后的控制状态切换、用户信息 merge、数据获取等复杂业务逻辑却有几10、几百 K 代码。代码结构处理很差很容易拖慢页面展现速度。

MLN 懒加载功能，在单独的 Loop 循环里优先处理让用户看到的内容。能够作到无论业务逻辑多复杂，页面都能飞快展现。

另外，MLN 的 KV 存储模块 MLNKV 也单独开源了（https://github.com/momotech/M...）。MLNKV 经过 mmap、双缓存策略、记录偏移量的value存储等技术实现了高性能和低内存占用并存。从多项性能指标统计来看，MLNKV算得上业内最高效的KV存储模块。

技术选型+精心设计造就了MLN的高性能。

MLN将来技术规划

MLN 刚刚开源，在工具链支持和功能丰富程度上跟一些老牌跨平台框架相比仍有缺失。可是从 GitHub 上 MLN 的规划设计看，不少功能正在开发中。从不少计划里能够看出厂商很有诚意。

1.继续保持性能领先

1）支持无侵入性异步 measure (in progress)
2）列表控件加入无侵入性智能预加载(backlog)
3）近期加入声明式 UI 给开发者更多选择(in progress)

以上这些完成后 MLN 性能可能会超过大多数原生应用。

2.功能丰富才能真正提升开发效率

提供丰富的类库支持才能真正帮助业务开发提升开发效率，不然跨平台框架极可能沦为少数极客的玩具。MLN 计划官方支持：

网络、svga 动画、分享、图片异步加载等业务开发经常使用类库的桥接，之后会逐步加入更多功能。

工具链支持（如下功能会集成在插件中）：

1）模拟器(in progress)
2）代码测试覆盖率（in progress）
3）性能检测（backlog）
4）升级断点调试（in progress）

3.支持到位的技术才有生命力

MLN 正在把陌陌内部社区迁移到 GitHub，对内外部的 issue 等提供一致的支持。

总结

以上是对跨平台开发技术的年底盘点。放大到行业层面来看，一是国内的互联网行业竞争激烈，企业须要不断创新、快速试错，敏捷应对市场的变化和需求；另外一方面，端的融合已经成为一个愈来愈明显的趋势，统一的开发模式和开发体验已是大前端发展的明确方向。

正由于我国的特殊市场环境，也给了咱们一个技术发展弯道超车的机会。而可否把握住这个机会，离不开每一位开发者的参与、每一家技术厂商的投入付出。

SegmentFault 做为国内新一代的技术社区，但愿能够和国内的开发者、技术厂商一块儿，共同营造一个属于中国开发者最好的时代。

---

点击连接，抢先体验 MLN ：https://github.com/momotech/MLN