Flutter Web在Liquid体系下的探索

每平每屋业务涉及「每平每屋App」、「每平每屋门店导购App」、「每平每屋手淘轻应用」、「每平每屋微信小程序」等多个透出渠道，存在大量的跨App复用和外投场景。

当前我们的策略是App侧重用户体验，优先使用Native开发；外投场景重灵活，优先使用前端开发。由于业务是不断变化的，遇到Native的页面需要追加外投场景时，必须再开发一套前端实现，这样不但延缓了业务上线节奏，也造成了开发资源的浪费。

在上述背景下，我们需要一种可以同时满足App场景高用户体验、外投场景高灵活性的跨端方案。

▐  整体设计

▐  Dart版本LDF SDK

1. Dart 版本的LDF SDK和Native版本在功能与实现上保持完全一致，主要是将实现语言换成了Dart。

2. 两套SDK的输入都是Liquid协议，在客户端通过现有的Native SDK渲染页面，提供最佳体验。在Web端，通过Dart SDK渲染为前端页面，为业务提供外投能力。

   

3. 在业务扩展层，我们将部分比较轻量的纯逻辑扩展库以Dart库的形式实现，在三端复用，以降低研发成本。

   

集团的前端发布平台是DEF，FFW本质上依然属于前端开发范畴，因此需要能够在DEF平台上完成编译和发布，这样可以更好的对接前端工程研发体系。

1. 实现在DEF平台编译和发布FFW工程的主要流程如下：

   

2. 其中Flutter环境镜像依赖DEF同学支持，目前部署的是最新的2.8.1稳定版

3. FFW构建器支持通过shell自定义编译实现

   #! /bin/bash                                                                                                                                                                                                                                              
   export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
   flutter build web --web-renderer=html --release --no-sound-null-safety
   rm ${BUILD_WORK_DIR}/build/web/.last_build_idrm ${BUILD_WORK_DIR}/build/web/flutter_service_worker.js
   mv ${BUILD_WORK_DIR}/build ${BUILD_DEST}
   

4. 最后需要修改FFW工程中和DEF平台对接的打包配置文件abc.json，指定通过上面定制的构建器打包。

• 代码隔离：通过foundation中的kIsWeb判断是否是web端，参考：https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html

• 文件隔离：通过dart提供的条件导入实现，参考：https://dart.cn/guides/libraries/create-library-packages#conditionally-importing-and-exporting-library-files

目前我们完成了Liquid-FFW的最小集，跑通了整套研发链路，后续将继续完善Liquid研发体系和FFW的对接以及针对FFW进行一些更深度的性能优化。