您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    阿里集团内如何停止Flutter体系化树立?(5)
    时间:2020-04-03 12:05 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    经过将原有的端侧央求接口、组装数据并转换为 ViewModel 的逻辑都后移到了效劳端,经过字段映射与页面编排,移动端可直接获取 ViewModel 并刷新页面,经过 BinderAction 双向交互形状数据,有效屏蔽了通讯细节,提高了开发效率。

    云端一体化除了带来了研发与协同效率的提升,同时也重塑了消费关系,使端侧业务从只关注端侧体验和逻辑的开发角色,变成可以向业务全体结果担任;同时也让效劳端更专注于范围效劳的沉淀。

    Flutter 良好的跨端特性,可以屏蔽掉端差异化,配合 Flutter 容器化改造,更近一步的简化了业务的全链路研发形式。

    未来如何在 FaaS 形式下,沉淀出一套可以效劳集团业务研发的通用端侧和效劳端通讯调度框架,让集团 Flutter 开发者和业务都能共享到 Serverless 技术和云端一体化提效的红利,是需求我们共同去探求和定义的新成绩。

    ▐     提升交付效率:Flutter 静态化

    完成静态化是交付效率提升的重要方式。

    关于电商强运营强时效性特性来说,静态化简直是一个必备的诉求,但从技术上看也是一个十分敏感的需求,是一个在系统厂商平台管控下长期博弈的进程。

    在我看来,静态化技术需求处置的中心成绩,是在保证业务发布确定性的前提下,寻求技术功用、业务迭代效率与灵敏性三者之间合理的平衡点。

    下面讲讲我们在 Flutter 静态化上的两个思绪与尝试: Flutter 模板化方案与 Web on Flutter。

    Flutter 模板化方案

    静态模板化方案是集团内较为成熟的一套基于Native技术的模板化方案,专注于 UI  模板渲染,没有执行逻辑和运转时环境,目前被普遍运用于电商系的一些中心业务场景。

    同时该方案提供了配套的组件平台,支持在线模板编辑、预览、测试及发布整套流程,结合发布平台构成了一整套完善的业务开发作态闭环。

    在 Flutter 体系下,目前闲鱼团队依据标准模板协议在 Flutter 侧完成了一套 Dart 版 SDK , 经过模板下发完成了Flutter端的轻量级静态化组件编排才能;并经过一年多的迭代逐渐处置了渲染功用与渲染分歧性成绩,较好的赋能了Flutter业务的组件静态化才能。

    那么,未来 Flutter 与静态模板化方案有没有更好的结合点?

    答案是一定的。从 DSL 角度看,目前模板的写法基本下去自 Android XML ,对组件开发者尤其是非 Android 开发者不够友好,具有一定的学习成本;而 Flutter 的结构与属性均可经过 widgets 表达,可以极为灵敏且平台中立的用声明式代码构建UI并绑定数据,易于开发者编写组件并经过 Flutter 框架独立调试与测试;在移动端运转时,可以按需按场景翻译成 native 组件或 Flutter 组件。

    未来我们也将继续在这个方向上做探求。

    Web on Flutter

    相比贴近 Native 研发形式的模板组件化渲染方案,Web on Flutter 希望经过类 H5 的 DSL + JS ,借助Flutter的渲染才能,完成贴前端技术栈的静态化才能。

    目前基于 Web 渲染的小顺序方案存在启动耗时高,渲染功用距原生 UI 有较大差距等功用成绩,这些成绩很大水平上都源自于阅读器引擎的设计历史包袱(渲染管线复杂、CSS multi-pass layout及legacy完成等),以及JS到Native通讯效率低(bridge)。

    Flutter 的设计思绪源自阅读器,一方面直接吸收了前端框架近年来的演进成就,原生支持了声明式-照应式编程范式,提高了移动端的研发效率;另一方面,Flutter 紧贴 native 开发形式有限定义了 UI 结构、规划与渲染的必要元素,在满足native UI开发形式的前提下简化了才能定义与规划算法(single-pass layout与repaint boundary等概念),很大水平上简化了渲染管线的复杂度,直接为Flutter带来了接近原生的功用体验。

    同时,Flutter 的 widgets 设计巧妙,结构规划属性等基础元素均运用 widgets 表达,且可经过基础 widgets 的组合来构成复杂组件,这种细粒度+组合才能设计让 Flutter 有极强的表现力,并具有向上对接各种研发形式的能够性。

    因此,经过 widgets 组合小顺序 DSL,支持小顺序 CSS 有限集,完成渲染层交流阅读器引擎,并对接JS引擎支持JS执行才能,是一个将Flutter运用于小顺序生态的合理探求方向。

    相比把开发者惯坏了的阅读器,这种方案在 CSS 的才能支持上必然是受限的,无法满足一切 CSS3 标准的完成,更多经过紧贴 Flutter widgets 的现有才能以及必要的 widgets 扩展,在不破坏 single-pass layout 的前提下组合出 CSS 才能。

    但从 Flutter 原生开发的角度看,只需 Flutter 现有的原生才能可以满足业务需求,那么受限的 CSS 完成也一样可以提供和 Flutter 对等的才能处置业务成绩。同时,经过受限的 CSS 可以换来与 Flutter 相当的高功用,与基于 Web 的完成相比,在功用上带来了质变。

    我们在18年底经过一个外部项目完成了这个思绪的原型,经过运用 C++ 重写 Flutter 的 widgets、rendering、painting 及事情管理等 Dart framework 中的中低层才能,并在 widget 上用 C++ 完成了 CSSOM + DSL -> Widgets 的照应式框架,直接从 C++ 层提供 render 完成,将传统由 JS 承当的模板展开、tree-diff计算与渲染任务交给C++层,经过Flutter提供的Widgets tree到RenderObjects tree的diff才能完成,清楚提高了功用。

    从完成的复杂的demo看,相对小顺序的web渲染功用有了大幅的提升。这种方案的成绩在于和Google代码库分裂后的长期维护性。 “Flutter和Web生态如何对接” 这篇文章对集团内在这个方向上尝试的几种思绪做了较为片面的比照,未来我们也将继续在这个方向上做深化和继续的探求。

    总结与展望

    Flutter 体系化树立目前在淘系刚刚起步,依然有少量任务需求去做,我们在基础设备、工程化以及经过Flutter定义和收敛业务域研发形式上做的许多树立性的事情,正朝着把Flutter打造为一致移动运用基础研发框架,助力业务回归移动端研发形式这个大目的一点点迈进。

    在移动技术小组启动 AliFlutter 项目之前,闲鱼技术部曾经在 Flutter 技术树立上做了少量探求和投入。

    一方面经过 Flutter 技术赋能业务提效晋级,拿到了很好的业务成绩;

    另一方面沉淀Flutter的技术与业务处置方案,并经过开源反哺社区,在海外外Flutter技术社区中树立了清楚的技术影响力与指导力,也涌现出一众Flutter技术专家。

    (责任编辑:admin)