Flutter技术解析与实战——闲鱼技术演进与创新-第1章(9)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......

1.5 使用混合栈框架开发

1.5.1 为什么需要混合方案

      具有一定规模的App 通常有一套成熟通用的基础库,尤其是阿里巴巴App,一般需要依赖很多体系内的基础库。使用Flutter 重新开发App 的成本和风险都较高。所以,在Native App 进行渐进式迁移是稳健型方式。闲鱼在实践中沉淀出一套自己的混合技术方案。在此过程中,闲鱼跟GoogleFlutter 团队进行密切的沟通,听取了他们的一些建议,同时也针对自身业务情况进行方案的选型以及具体的实现方法。

1.5.2 Google 官方提出的混合方案

1.基本原理

      Flutter 技术链主要由C++实现的Flutter Engine 和Dart 实现的Framework 组成。Flutter Engine 负责线程管理、Dart VM 状态管理和Dart代码加载等工作。而Dart 代码所实现的Framework 则是业务接触到的主要API,如Widget 等概念就是在Dart 层面的Framework 内容。

      一个进程里面最多只会初始化一个Dart VM。然而,一个进程可以有多个Flutter Engine,多个Engine 实例共享同一个Dart VM。

      我们来看具体实现方法,在iOS 中,每初始化一个FlutterViewController就会有一个引擎随之初始化,也就意味着会有新的线程(理论上线程可以复用)去运行Dart 代码。Android 中的Activity 也有类似的效果。如果启动多个引擎实例,此时Dart VM 依然是共享的,只是不同Engine 实例加载的代码运行在各自独立的Isolate 中。

2.Google 官方给出的建议

      (1)引擎深度共享

      在混合方案方面,Flutter 官方给出的建议是从长期来看,应该支持在同一个引擎支持多窗口绘制的能力, 至少在逻辑上做到FlutterViewController 共享同一个引擎的资源。换句话说,希望所有的绘制窗口共享同一个主Isolate。

      但Google 官方给出的长期建议目前来说没有很好的支持。

      (2)多引擎模式

      在混合方案中,我们解决的主要问题是如何处理交替出现的Flutter 和Native 页面。Google 工程师给出了一个Keep It Simple 的方案:对于连续的Flutter 页面(Widget),只需要在当前FlutterViewController 中打开即可,对于间隔的Flutter 页面,选择初始化新的引擎。

      例如,进行下面一组导航操作:

Flutter Page1 -> Flutter Page2 -> Native Page1 -> Flutter Page3

      只需在Flutter Page1 和Flutter Page3 中创建不同的Flutter 实例即可。

      这个方案的好处是简单易懂,逻辑清晰;但也有潜在的问题,如果一个Native 页面和一个Flutter 页面一直交替进行,那么Flutter Engine 的数量会呈线性增加,而Flutter Engine 本身是一个比较重的对象。

      (3)多引擎模式的问题

  • 冗余的资源问题。多引擎模式下,每个引擎之间的Isolate 是相互独立的。在逻辑上这并没有什么坏处,但是引擎底层其实是维护了图片缓存等比较消耗内存的对象。想象一下,若每个引擎都维护自己的一份图片缓存,则内存压力将非常大。
  • 插件注册的问题。插件依赖Messenger 传递消息,而Messenger 是由FlutterViewController ( Activity ) 实现的。如果有多个FlutterViewController,插件的注册和通信将会变得混乱、难以维护,消息传递的源头和目标也会变得不可控。
  • Flutter Widget 和Native 的页面差异化问题。Flutter 的页面是Widget,Native 的页面是VC。从逻辑上来说,我们希望消除Flutter 页面与Naitve页面的差异,否则在进行页面埋点和其他一些统一操作的时候,都会遇到额外的复杂度。
  • 增加页面之间通信的复杂度。如果所有Dart 代码都运行在同一个引擎实例中,它们共享一个Isolate,则可以用统一的编程框架进行Widget之间的通信,多引擎实例也增加复杂度。

      因此,综合多方面考虑,闲鱼并没有采用多引擎混合方案。

3.现状与思考

      考虑到多引擎存在的一些实际问题,所以闲鱼目前采用的混合方案是共享同一个引擎。这个方案基于这样一个事实:在任何时候最多只能看到一个页面,当然对于些特定的场景,可以看到多个ViewController,但是这些特殊场景我们这里不讨论。

      可以这样简单地理解这个方案:把共享的Flutter View 当成一个画布,然后用一个Native 的容器作为逻辑的页面。每次在打开一个容器的时候,通过通信机制通知Flutter View 绘制成当前的逻辑页面,然后将FlutterView 放到当前容器里面。

      老方案在Dart 侧维护了一个Navigator 栈的结构,如图1-20 所示。栈数据结构的特点是每次只能从栈顶操作页面,每一次在查找逻辑页面的时候,如果页面不在栈顶,则需要往回退栈。如此会导致中途被退栈的页面状态丢失,这个方案无法支持同时存在多个平级逻辑页面的情况,因为在切换页面的时候必须从栈顶操作,无法在保持状态的同时进行平级切换。

      举个例子:有两个页面A 和B,当前页面B 在栈顶。切换到页面A需要把页面B 从栈顶Pop 出去,此时页面B 的状态丢失,如果想切回页面B,只能重新打开,页面B 之前页面的状态无法维持住。这也是老方案最大的一个局限。

      如在Pop 的过程中,可能会把Flutter 官方的Dialog 误杀,这也是一个问题。

      而且基于栈的操作,我们依赖对Flutter 框架的一个属性修改,让这个方案具有了侵入性的特点,这是另一个问题。

20.jpg

图1-20

相关文章
|
2月前
|
存储 缓存 算法
HashMap深度解析:从原理到实战
HashMap,作为Java集合框架中的一个核心组件,以其高效的键值对存储和检索机制,在软件开发中扮演着举足轻重的角色。作为一名资深的AI工程师,深入理解HashMap的原理、历史、业务场景以及实战应用,对于提升数据处理和算法实现的效率至关重要。本文将通过手绘结构图、流程图,结合Java代码示例,全方位解析HashMap,帮助读者从理论到实践全面掌握这一关键技术。
113 14
|
27天前
|
运维 Shell 数据库
Python执行Shell命令并获取结果:深入解析与实战
通过以上内容,开发者可以在实际项目中灵活应用Python执行Shell命令,实现各种自动化任务,提高开发和运维效率。
55 20
|
1月前
|
供应链 搜索推荐 API
深度解析1688 API对电商的影响与实战应用
在全球电子商务迅猛发展的背景下,1688作为知名的B2B电商平台,为中小企业提供商品批发、分销、供应链管理等一站式服务,并通过开放的API接口,为开发者和电商企业提供数据资源和功能支持。本文将深入解析1688 API的功能(如商品搜索、详情、订单管理等)、应用场景(如商品展示、搜索优化、交易管理和用户行为分析)、收益分析(如流量增长、销售提升、库存优化和成本降低)及实际案例,帮助电商从业者提升运营效率和商业收益。
186 20
|
2月前
|
物联网 调度 vr&ar
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙技术分享:HarmonyOS Next 深度解析 随着万物互联时代的到来,华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点,并通过跨设备笔记应用实战案例,展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手,体验高效、灵活的开发过程。 239个字符
242 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
|
2月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
196 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
2月前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
299 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
1月前
|
数据采集 XML API
深入解析BeautifulSoup:从sohu.com视频页面提取关键信息的实战技巧
深入解析BeautifulSoup:从sohu.com视频页面提取关键信息的实战技巧
|
2月前
|
安全 API 数据安全/隐私保护
速卖通AliExpress商品详情API接口深度解析与实战应用
速卖通(AliExpress)作为全球化电商的重要平台,提供了丰富的商品资源和便捷的购物体验。为了提升用户体验和优化商品管理,速卖通开放了API接口,其中商品详情API尤为关键。本文介绍如何获取API密钥、调用商品详情API接口,并处理API响应数据,帮助开发者和商家高效利用这些工具。通过合理规划API调用策略和确保合法合规使用,开发者可以更好地获取商品信息,优化管理和营销策略。
|
2月前
|
数据采集 DataWorks 搜索推荐
阿里云DataWorks深度评测:实战视角下的全方位解析
在数字化转型的大潮中,高效的数据处理与分析成为企业竞争的关键。本文深入评测阿里云DataWorks,从用户画像分析最佳实践、产品体验、与竞品对比及Data Studio公测体验等多角度,全面解析其功能优势与优化空间,为企业提供宝贵参考。
166 13
|
2月前
|
容器
Flutter Widget 解析
Flutter Widget 解析

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 推荐镜像

    更多
    AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等