XCore开发体验

2019年5月8日 134次阅读 来源: 妖怪来了

背景

XCore 是一个动态跨平台框架。类似 RN，Weex。一次编写，多端运行是我们的目标。

技术方案

选型

  1. 客户端使用 js 解析引擎，对加载过来的js进行解析，并绑定原生的代码，通过原生代码来实现界面的绘制，事件的传递等。
  2. 说说选型。
    1. 前端基础库，我们选择了 Vue。Vue 非常适合移动界面的开发，现在已经越来越普及。选择 Vue，可以减少前端同学的学习成本。
    2. 安卓端解析引擎，使用谷歌提供的 V8 引擎。chrome 浏览器就在使用 V8 引擎对js进行引擎，解析速度很快。
    3. iOS端，没有选择，只能使用jscore。这个是由于平台所限制的。
  3. 谈谈排版。我们选择了 flex 排版。不了解的同学可以先行谷歌。flex排版方式，非常适合native端解析，而且容易使用。所需要支持的特性较少，但是功能强大。
  4. 功能实现。我们是标准 web api 的一个子集。一个为特定业务场景而生的微浏览器内核。

架构

最上层我们提供Web标准的子集，DOM操作的子集，CSS的子集，H5API的子集，以及所需的事件

我们使用的是标准的CSS规范，在Web端是直接使用的。Native端，在DOM Tree，每个Node有自己的Style属性，当Node被创建或者变成dirty的时候，会触发排版计算。
排版计算主要输出就是元素的位置和大小，随后元素的位置和大小的信息会被同步到Shadow Tree上，Shadow Tree在适当的时机将位置与大小的信息设置的Native Tree上对应的Native View的属性上，最终一次布局完成。

  • 为什么是在合适的时机，而不是立即的设置Native Tree呢？因为Native View的场景不是在DOM node创建的时候立即创建的。普通的Node是在attach时候才创建Native View，而在ListView的场景，是在对用Item系统通知需要创建的时候创建的

  • 好处是，内核更加灵活。因为都是标准的Web API，能相对容易的接入各种前端框架，不用被单一的开发框架限定死。

  • 理论上，我们可以接入任何前端框架，当然我们不是一个大而全的浏览器内核，不能提供完善的API，所以接入的改造成本还是难免。

渲染层面我们支持一份代码三端运行，在web和native端我们都有不同的实现

  • Native的渲染模型，三棵树，两个线程：这个渲染模型分为三棵树，DOM Tree, Shadow Tree，Native Tree。

    • DOM Tree：可以理解为标准浏览器中的DOM Tree，前端可以通过标准的API进行构建、操作。DOM Tree分两部分：在JS虚拟机里面有一层JS DOM的wrapper，方便我们对DOM的操作管控。
      在Native层面是真正的DOM Tree实现，JS DOM Wrapper与Native DOM是严格的一一映射
      排版在Native DOM上执行，这样能保证DOM的API操作都是实时的。
    • Shadow Tree可以理解为DOM Tree在 UI线程的映射，用于同步数据与操作到UI线程；为了提高性能，对数据同步我们是有批处理的。
    • Native Tree：对应的是Native UI组件构建出来的Tree，负责真正的渲染；在Android和iOS分别使用相应的UI Framework。

  • 优势

    • Web上，由于我们是标准的子集，可以直接运行。
    • Native端，我们是复用系统原生的渲染能力，这样才能保证页面达到原生级别的体验。
扩展能力的建设。提供扩展机制，方便native开发人员提供对应的native组件

我们提供常用的基础标签，如 view, label, image, input 等。在基础标签的基础上我们提供扩展组件的能力：

  • 一类就是自定义组件，用于弥补基础标签的不足。这个要求要有三端实现。自定义组件适合去复用已有的相对通用的Native组件，比如轮播图。对性能实时性要求较高的场景也个很好的弥补，如下拉刷新。
  • 另外一类扩展是插件，我们完整的支持Cordova插件，复用原有的40+Cordova插件
调试工具

由于不断的推广，使用人员也越来越多，调试问题亟待解决。在安卓和iOS端通过对对应的js解析引擎的调研，发现其都有自己对应的调试协议。我们通过封装调试协议，在本机通过一个nodejs脚本开启调试服务，将解析引擎的信息通过这个服务进行中转，服务将消息统一处理为浏览器使用的调试协议，通过websocket发送给浏览器，然后在浏览器的操作会发送到此服务上，再进行转换，发送到对应的解析引擎，实现调试功能。目前已经具有：断点调试，console输出，dom实时高亮，浏览器展示设备界面，变量输入等功能。

基础功能复用

我们大量复用了以后App架构的基础设施，如果图片，网络，日志统计等等，Web版的页面在App也是使用Web容器，其他离线化，开关，数据收集等都是复用Web容器的功能。同时，我们还提供了配套的编译、集成的工具。

总结

个人经历的第一个框架开发，框架开发确实需要考虑诸多因素。在高速的迭代中，也成长了许多。

    原文作者：妖怪来了
    原文地址: https://www.jianshu.com/p/d7cc1c7c2ed1
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞