<small id='Ns2V0u6xn'></small> <noframes id='mGSMWgvqBJ'>

  • <tfoot id='MDopT6'></tfoot>

      <legend id='brHxFWos'><style id='WKS2ykV'><dir id='Ban7KTFeR2'><q id='nNFo4Y'></q></dir></style></legend>
      <i id='LqXCQrU'><tr id='hZOmnJjo7'><dt id='Y7d1z'><q id='9pRtrKe3GI'><span id='CAMsRGvlZ'><b id='JBMf3wC'><form id='dUpSbVeTZ'><ins id='E456gqPm'></ins><ul id='cAWyeFQk0'></ul><sub id='FVLPQjU'></sub></form><legend id='eDGNmn2Rf'></legend><bdo id='CS7Q'><pre id='mCT8'><center id='n5Wdbp8FBs'></center></pre></bdo></b><th id='ApKNXV'></th></span></q></dt></tr></i><div id='cTO5lZ'><tfoot id='s2df'></tfoot><dl id='K1OLjc'><fieldset id='a8NvZ'></fieldset></dl></div>

          <bdo id='C9l5Pn'></bdo><ul id='LXm1uk6'></ul>

          1. <li id='6B4dEAr'></li>
            登陆

            GMTC2019|闲鱼-根据Flutter的架构演进与立异

            admin 2019-06-27 342人围观 ,发现0个评论

            2012年应届结业参加阿里巴巴,主导了闲鱼根据Flutter的新混合架构,一同推进了Flutter在闲鱼各事务线的落地。未来将继续重视终端技能的演化及趋势

            Flutter是Google开源的跨端便携UI工具包,除了具有十分优异的跨端烘托一致性,还具有十分高效的研制体会,丰厚的开箱即用的UI组件,以及跟Native比美的功能体会。因为它的许多优势,也使得Flutter成为了近些年来抢手的新技能。

            经过以上的特色能够看出,Flutter能够极大的加快客户端的研制功率,与此一同得到优异的功能体会,根据我的考虑,Flutter会为以下团队带来较大的收益:

            闲鱼在以上的场景中归于第一种场景,服务3亿用户的闲鱼App的背面,开发资源投入很少,与竞对比较,咱们是一只再小不过的团队,在这种场景下,Flutter为闲鱼事务的安稳发展以及供给更多的立异产品给予了很大的协助。

            但与此一同,Flutter在规划上带来的优势一同又会带来新的问题。一切的新技能都是脱胎于老技能的,Flutter也不破例,其身上带有许多Chrome的影子。咱们再做一层简化,假如咱们以为Flutter是一个运用Dart言语的浏览器容器,请咱们考虑一下两个问题怎么处理。

            带着上面两个问题,咱们来到闲鱼场景下的详细Case以及处理计划的演进进程。

            在这种状况下,闲鱼需求考虑的是首先要考虑引进Flutter容器后的内存压力,确保不要发生更多的内存溢出。GMTC2019|闲鱼-根据Flutter的架构演进与立异与此一同咱们期望能让Flutter和Native之间的页面切换是顺利的,对不同技能栈之间的同学通明。因而咱们有针对性的进行了屡次迭代。

            在没有任何改造的状况下以iOS为例,你能够经过创立新的FlutterViewController来创立一个新的Flutter容器,这个计划下,当创立多个FlutterViewController时会一同在内存中创立多个Flutter Engine的Runtime(尽管底层Dart VM仍然只要一个),这对内存耗费是相当大的,一同多个Flutter Engine的Runtime会形成每个Runtime内的数据无法直接同享,形成数据同步困难。

            这种状况下,闲鱼挑选了大局同享同一个FlutterViewController的方法确保了内存占用的最小化,一同经过根底结构Flutter Boost供给了Native栈与Flutter栈的通讯与办理,确保了当Native翻开或封闭一个新的Flutter页面时,Dart侧的Navigator也做到主动的翻开或封闭一个新的Widget。现在Google官方的供给的计划上便是参阅闲鱼新近的这个版别进行的完结的。

            但是在这种状况下电脑黑屏怎么办,假如呈现如闲鱼图中所示多个Tab的场景下,整个仓库逻辑就会发生紊乱,因而闲鱼在这个根底上对Flutter Boost的计划进行了晋级并开源,经过在Dart侧供给一个BoostContainerManager的方法,供给了对多个Navigator的办理才能,假如打比方来看这件事,就相当于,针对Flutter的容器供给了一个相似WebView的OpenWindow的才能,每做一次OpenWindow的调用,就会发生一个新的Navigator,这样开发者就能够自在的挑选是在Navigator里进行Push和Pop,仍是直接经过Flutter Boost新开一个Navigator进行独立办理。

            Flutter Boost现在已在github开源,因为闲鱼现在线上版别只支撑Flutter 1.2的版别,因而需求支撑1.5的同学等稍等,咱们会在近期更新支撑1.5的Flutter Boost版别。

            因为闲鱼是一个搁置买卖社区,因而图片和视频相对较多,对图片视频的线上功能以及内存占用有较严厉的GMTC2019|闲鱼-根据Flutter的架构演进与立异要求。现在Flutter已供给的几种计划中(Platform View以及Flutter Plugin),不论是对内存的占用仍是整个的线上流通度上还存在必定的问题,这就形成了当大部分同学跟闲鱼相同完结一个杂乱的图文Feed引荐场景的时分,十分简单发生内存溢出。而实际上,闲鱼在以上的场景下有针对性的做出了较大的优化。

            在整个的Native UI到Flutter烘托引擎桥接的进程中,咱们选用了Flutter Plugin中GMTC2019|闲鱼-根据Flutter的架构演进与立异供给的FlutterTextureRegistry的才能,在上一年上半年咱们优先针对视频的场景进行了优化,优化的思路主要是针对Flutter Engine底层的外接纹路接口进行修正,将原有接口中有必要传入一个PixelBuffer的内存方针这一约束做了扩展,添加一个新的接口确保其能够传入一个GPU方针的TextureID。

            如图中所示,优化后的整个链路Flutter Engine能够直接经过Native端现已生成好的TextureID进行Flutter侧的烘托,这样就将链路从Native侧生成的TextureID->copy的内存方针PixelBuffer->生成新的TextureID->烘托,GMTC2019|闲鱼-根据Flutter的架构演进与立异转变为Native侧生成的TextureID->烘托。整个链路极大的缩短,确保了整个的烘托功率以及更小的内存耗费。闲鱼在将这套计划上线后,又测验将该计划应用于图片烘托的场景下,使得图片的缓存,CDN优化,图片裁切等计划与Native归一,在享用已有集团中间件的功能优化的一同,也得到了更小的内存耗费,计划落地后,内存溢出大幅削减。

            现在该计划因为需求合作Flutter Engine的修正,因而暂时无法供给完好的计划至开源社区,咱们正在跟google活跃交流整个修正计划,信任在这一两个月内会将试验性的Engine Patch开源至社区,供有爱好的同学参阅。

            将以上两个问题处理今后,闲鱼开端了Flutter在事务侧的全面落地,但是很快又遇到新的问题,在多人协作进程中:

            在计划的前期,咱们运用了社区的Flutter Redux计划,因为最早落地的概况,发布等页面较为杂乱,因而咱们有针对性的对View进行了组件化的拆分,但因为事务的杂乱性,很快这套计划就呈现了问题,关于单个页面来说,State的特点以及Reducer的数量都十分多,当发生新需求堆叠的时分,修正困难,简单发生线上问题。

            针对以上的状况,咱们进行了整个计划的第二个迭代,在原有Page的根底上供给了Component的概念,使得每个Component具有完好的Redux元素,确保了UI,逻辑,数据的完好阻隔,每个Component单元下代码相对较少,易于保护和开发,但随之而来的问题是,当页面需求发生数据同步时,整个的杂乱性飙升,在Page的维度上失去了一致状况办理的优势。

            在这种状况下闲鱼换个视点看端侧的架构规划,咱们参阅React Redux结构中的Connect的思维,移除掉在Component的Store,随之而来的是新的Connector作为Page和Component的数据联通的桥梁,咱们根据此完结了Page State到Component State的转化,以及Component State改动后对Page State的主动同步,然后确保了将杂乱事务有用的拆解成子问题,一同享用到一致状况办理的优势。与此一同根据新的结构,在一致了咱们的开发规范的状况下,新结构也在底层有针对性的供给了对长列表,多列表拼接等case下的一些功能优化,确保了每一位同学在依照规范开发后,能够得到相对现在市面上其他的Flutter事务结构比较更好的功能。

            现在这套计划Fish Redux现已在github开源,现在支撑1.5版别,感爱好的同学能够去github进行了解。

            闲鱼在上一年阅历了事务的快速生长,在这个阶段上,咱们一同进行了许多的Flutter的技能改造和晋级,在测验新技能的一同,怎么能确保线上的安稳,线下的有更多的时刻进行新技能的测验和落地,咱们需求一些新的思路和作业方法上的改动。

            以咱们日常作业为例,Flutter的研制同学,在每次开发完结后,需求在本地进行Flutter产品的编译并上传到远端Repo,以便对Native同学通明,确保日常的研制不受Flutter改造的搅扰。在这个进程中,Flutter侧的事务开发同学面临着许多打包上传更新同步等繁琐的作业,一不小心就会犯错,后续的排查等让Flutter前期的开发变成了开发5分钟,打包测验2小时。一同Flutter到底有没有处理研制功率快的问题,以及同学们在落地进程中有没有Follow事务架构的规范,这一切都是不知道的。

            在痛定思痛今后,咱们以为数据化+主动化是处理这些问题的一个较好的思路。因而咱们首先从源头对代码进行管控,经过commit,将代码与后台的需求以及bug逐个相关,关于不符合要求的commit信息,不答应进行代码兼并,然后确保了后续数据报表剖析的数据源头是健康的。

            在完结代码和使命相关后,经过webhook就能够比较轻松的完结后续的作业,将每次的commit有用的相关到咱们的继续集成渠道的使命上来,经过闲鱼CI作业渠道将日常打包主动化测验等流程变为主动化的行为,然后极大的削减了日常的作业。大略计算下来,在上一年主动化系统落地的进程中单就主动打Flutter包上传以及触发终究的App打包这一流程就让每位同学每天节约一个小时以上的作业量,作用十分显着。别的,根据代码相关需求的这套系统,能够相对简单的构建后续的数据报表对整个进程和成果进行细化的剖析,用数据驱动进程改善,确保新技能的落地进程的收益有理有据。

            回忆一下上下文

            除了本文提及的各种计划外,闲鱼现在还在多个方向上发力,并对针对Flutter生态的未来进行继续的重视,共享几个现在在做的作业

            让工程师去从事更多创造性的作业,是咱们一向尽力的方针。闲鱼团队也会在新的一年更多的完善Flutter系统的建造,将更多已有的沉积回馈给社区,协助Flutter社区一同健康生长。

            本文作者:闲鱼技能-宗心

            原文链接:https://yq.aliyun.com/articles/706408?utm_content=g_1000064186

            本文为云栖社区原创内容,未经答应不得转载。

            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP