https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/Recent content in 跨平台动态化框架 on Chen's NotesHugozh-CNWed, 15 Feb 2023 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/crocess-platform-solution/Sat, 21 Sep 2019 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/crocess-platform-solution/<h1 id="概述">概述<a class="anchor" href="#%e6%a6%82%e8%bf%b0" aria-label="Link"></a></h1> <table> <thead> <tr> <th style="text-align: left">方案</th> <th style="text-align: left">性能</th> <th style="text-align: left">动态性</th> <th style="text-align: left">能力集</th> <th style="text-align: left">维护成本</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">H5</td> <td style="text-align: left">低</td> <td style="text-align: left">高</td> <td style="text-align: left">全</td> <td style="text-align: left">低</td> </tr> <tr> <td style="text-align: left">小程序</td> <td style="text-align: left">中</td> <td style="text-align: left">高</td> <td style="text-align: left">部分</td> <td style="text-align: left">中</td> </tr> <tr> <td style="text-align: left">WEEX/RN</td> <td style="text-align: left">中高</td> <td style="text-align: left">高</td> <td style="text-align: left">部分</td> <td style="text-align: left">高</td> </tr> <tr> <td style="text-align: left">Flutter</td> <td style="text-align: left">高</td> <td style="text-align: left">低</td> <td style="text-align: left">全</td> <td style="text-align: left">低</td> </tr> </tbody> </table> <p>其中，前3个基本是面向前端生态的解决方案，而Flutter更像是面向native生态的解决方案。</p> <p>当然也有基于这几种方案之上，各种各样的魔改方案</p>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/compose/Wed, 15 Feb 2023 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/compose/<h1 id="背景">背景<a class="anchor" href="#%e8%83%8c%e6%99%af" aria-label="Link"></a></h1> <p><a href="https://developer.android.com/jetpack/compose?hl=zh-cn">Jetpack Compose</a> 是Google推出的一个使用kotlin语言、声明式的UI框.</p> <ul> <li>针对框架的PreCompose优化方案</li> <li>通过PreCompose方案，深入compose的源码: 介绍有哪些模块, 有什么作用, 未来能做些什么</li> </ul>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-iot/Fri, 15 Jul 2022 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-iot/<h1 id="背景">背景<a class="anchor" href="#%e8%83%8c%e6%99%af" aria-label="Link"></a></h1> <p>iot有着很广阔的场景: <a href="https://pdf.dfcfw.com/pdf/H3_AP202202071545436398_1.pdf">艾瑞咨询-积基“数”本、重塑产业：中国物联网行业研究报告-220129</a>. 智慧城市、车联网、智慧零售、智能家居、智能工厂.</p>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/tools-androidx/Mon, 25 May 2020 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/tools-androidx/<h1 id="概要">概要<a class="anchor" href="#%e6%a6%82%e8%a6%81" aria-label="Link"></a></h1> <p><a href="https://mp.weixin.qq.com/s/VXNbqxpoVDJeOPkBt5_88A">Flutter 1.17 | 2020 首个稳定版发布！</a> 全线迁移到AndroidX,现有app迁移成本巨大(几乎不可能迁移)</p> <ul> <li>改造Flutter engine、工具链，1.17支持support库</li> <li>跟一下工具链<code>flutter create</code>的源码实现方式</li> </ul>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-hybrid/Wed, 25 Dec 2019 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-hybrid/<h1 id="概览">概览<a class="anchor" href="#%e6%a6%82%e8%a7%88" aria-label="Link"></a></h1> <p>解决2个问题</p> <ul> <li>容器和engine的对应关系</li> <li>路由管理</li> </ul>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-engine-startup/Sun, 15 Dec 2019 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/flutter-engine-startup/<h1 id="核心点">核心点<a class="anchor" href="#%e6%a0%b8%e5%bf%83%e7%82%b9" aria-label="Link"></a></h1> <p>主要分为3个部分</p> <ul> <li>启动Engine前的准备(Platform端<code>Android</code>)</li> <li>Engine的启动(创建DartVM、相关线程、初始化相关配置)</li> <li>Engine加载Dart产物，直到执行<code>main.dart</code>中的<code>main</code>方法</li> </ul> <p>给官方提交了<a href="https://github.com/flutter/engine/pull/18047">相关PR给官方</a>，支持engine异步初始化</p> <blockquote class=''> <p>Engine创建流程不是很合理，底层在做异步任务的时候，主线程会wait阻塞，非常影响体验。</p> </blockquote>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/weex-architecture/Wed, 21 Nov 2018 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/weex-architecture/<h1 id="weex架构原理">Weex架构原理<a class="anchor" href="#weex%e6%9e%b6%e6%9e%84%e5%8e%9f%e7%90%86" aria-label="Link"></a></h1> <ul> <li>JSFRAM 负责和JS框架(<code>VUE/RAX</code>)交互，生成DomTree，将数据传给WeexCore</li> <li>WeexCore 有3部分 <ul> <li>JSSide: 运行在JS进程中，负责jsbinding、创建、管理js的vm、context</li> <li>CoreSide: 运行在主进程中，负责layout以及将<code>RenderTree</code>以命令形式交给Platform绘制</li> <li>IPC: 跨进程通信</li> </ul> </li> <li>Platform(Android/iOS) <ul> <li>将<code>RenderTree</code>转化为平台对应的<code>ViewTree</code>,进行渲染</li> <li>native能力调用提供</li> </ul> </li> <li>JSRuntime: 底层封装<code>JSC/V8</code>接口，<code>WeexCore</code>使用<code>JSRuntime</code>和<code>jsengine</code>通信</li> </ul> <p>Weex架构图如下</p>https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/rn-init/Wed, 21 Sep 2016 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/cross_platform/rn-init/<h1 id="概述">概述<a class="anchor" href="#%e6%a6%82%e8%bf%b0" aria-label="Link"></a></h1> <p>就像大多数框架一样,ReactNative(简称RN)启动需要初始化依赖的环境和资源,抛开繁复的细节,概括为以下几点:</p> <ol> <li>初始化通信接口表,表中保存 <em>java</em> 端和 <em>js</em> 端的接口信息。</li> <li>初始化ReactBridge,作为 <em>js</em> 和 <em>java</em> 通信的桥梁，在 <em>java</em> 端开启两个线程 <em>native_modules</em> 和 <em>js</em> ,加上 <em>ui</em> 线程，总共三个线程。</li> <li>加载JSbundle文件</li> </ol>