Kraken是淘大科技部前端架构团队开发的一款基于Flutter的动态框架。本文将带你了解和了解Kraken，并分享Kraken的一些设计思路和Flutter与Web技术对接的实践。什么是海妖？Kraken项目诞生于2018年底，当时团队参与的是“未来商店”项目，需要提供一套展示商品信息、实时价格甚至促销信息的电子货架屏解决方案。Kraken的目标是为物联网构建动态渲染解决方案。从最初的GCanvasAPI，到使用TS实现一个完整的FlutterFramework，再到现在的方案，我们在技术方案上经过了数次彻底的重构才实现。目前一套比较满意的解决方案——基于Rax和Flutter的动态框架。Flutter一直是今年前端社区非常热门的话题，群里已经有好几个团队吃螃蟹了。作为目前流行的跨端渲染框架，与现有的主流方案（Weex/ReactNative）相比，其最大的不同在于基于自绘特性解决了多端一致性问题。同时，Flutter还拥有精简的渲染管线，提供高效的局部更新、布局和渲染算法，在长列表等场景下的表现不弱于Android/iOS原生渲染。Tips：本文是对Kraken的介绍，帮助大家了解和了解Kraken，实现原理和解决方案这里就不多说了。可以使用如下命令安装KrakenCli：$npmi@kraken-project/cli-g基于Flutter的动态框架阿里，尤其是淘宝，作为一个以电商??为主的公司，对动态App内容的需求由来已久在业务。无论是业务的快速迭代，还是线上问题的修复，基本思路只有两个：缩短客户端版本发布周期，通过云分发的方式实现业务逻辑的动态更新，而App版本发布本身的环节比较长，有时也会受到一些不可抗力因素的制约。即使上线了，用户端的更新速度又是一个问题，所以动态更新内容几乎成了App的刚需。Flutter官方没有提供动态的解决方案。社区中也有很多对Flutter进行动态探索的先行者，也有各种各样的解决方案。Kraken使用一套JSEngine抽象层来解决逻辑动态分布和执行的问题。Dart和JS处于两个独立的上下文中。幸运的是，JS引擎已经有了成熟的与C++通信的解决方案。Kraken使用DartFFI（ForeignFunctionInterface）实现JS和Dart高效的双向通信。与传统方案相比更短、更高效的传输，无需对FlutterEngine进行自定义修改。“零”学习成本1W3C标准规范（标签/样式/DOM）一切都基于互联网，W3C标准是互联网中最重要的标准。为了解放开发者，Kraken直接使用W3C标准规范进行开发，让业务同学可以“零”学习成本上手Kraken开发，同时使用web技术开发的应用也可以轻松迁移到Kraken.TodoMVC示例Demo：krakenhttps://g.alicdn.com/kraken/kraken-demos/todomvc/build/kraken/index.js使用浏览器打开网页版：https://g.alicdn.com/kraken/kraken-demos/todomvc/build/web/index.htmlTodoMVC@KrakenTodoMVC@Web2对接前端生态：100W+的npm包受益于全球最活跃的开发者群体——Web开发者，庞大的前端生态，Kraken让开发者利用社区已有的100W+npm包，帮助企业提高开发效率。以下面的视频为例。示例应用程序再现了社区JS动画引擎anime.js的官方示例。在Kraken中运行的效果与在浏览器中完全一样。一致。动画示例（使用anime.js）原始示例：https://codepen.io/juliangarnier/pen/dwKGoWDemo:krakenhttps://g.alicdn.com/kraken/kraken-demos/animation/build/kraken/index。js使用浏览器打开Web版：https://g.alicdn.com/kraken/kraken-demos/animation/build/web/index.htmlAnimation@KrakenAnimation@Web同时，在阿里内部，Rax是无线开发的首选框架。Kraken+Rax的结合也让业务开发效率更上一层楼。3成熟的前端配套开发工具工欲善其事，必先利其器。高效的开发不仅需要熟练的开发人员，还需要合适的开发工具。同样得益于拥抱W3C标准，Kraken项目的开发与前端项目的开发完全一致。可以使用VSCode和WebStrom编写代码，使用代码提示和ESLint规则检测保证代码质量，使用jest等单元测试工具。使用webpack进行代码打包等。在集团内部，Rax已经为开发者准备好了所有的开发包。4友好的调试环境（Devtools断点调试）在调试方面，Kraken支持实时JS断点调试，支持sourceMap快速定位源码位置。支持HMR的自动热重载。调试方面，除了节点树调试还没有实现外，完全符合浏览器的开发体验。未来我们也会尽快加入支持Elementbox模型高亮和节点树调试的能力。作为一个实现W3C标准的渲染引擎，将ExperienceBeyondtheWeb与浏览器进行比较是合情合理的。不可否认，目前的主流浏览器在渲染性能上并不差，但由于历史包袱，其交互体验一直被人们诟病。交互体验的问题主要体现在交互不受控、光栅化异步、布局逻辑重。1受控交互受控交互体验实际上是体验的关键。在浏览器中，有很多问题一直困扰着前端开发者，例如：父元素默认行为导致滚动导致的滚动穿透无线网页不存在下一次??点击事件默认300ms延迟的问题在Kraken中，这会影响体验。以下示例：ExampleofDraggableList(usingreact-motion)Demo:krakenhttps://g.alicdn.com/kraken/kraken-demos/dragable-list/build/kraken/index.js使用浏览器打开网页版本（注意需要切换到手机模拟器模式才能开启触摸事件）：https://g.alicdn.com/kraken/kraken-demos/dragable-list/build/web/index.htmlDraggableList@KrakenDraggableList@Web2同步光栅化在浏览器中，光栅化是异步执行的。执行惯性滚动时，会出现白屏。这是WebView无法回避的问题。借助Flutter足够高效的同步光栅化实现，Kraken可以实现长列表的无白屏快速滚动。长列表滚动示例Demo：krakenhttps://g.alicdn.com/kraken/kraken-demos/long-list/build/kraken/index.js使用浏览器打开网页版：https://g.alicdn。com/kraken/kraken-demos/long-list/build/web/index.html3比浏览器更快的布局逻辑为了实现更快的渲染链接，我们放弃了样式继承等一些低效的渲染特性，使得KrakenKraken不需要频繁的重排重绘和逐层回溯寻找样式，所以理论上Kraken可以达到比浏览器更快的渲染速度。4支持更多原生能力除了标准的Web组件和API，Kraken还根据实际业务场景定制了一些高级能力，如Camera标签、AnimationPlayer（Flare）动画标签等。未来，我们将继续定制和扩展这些高级能力，以满足日益丰富的交互场景。Flare动画示例Demo：krakenhttps://gw.alicdn.com/bao/uploaded/TB1ym1pzHH1gK0jSZFwXXc7aXXa.js更多与Web对比示例1Granule（离子运动）Kraken与Web效果一致，同时达到60FPS时间。Granuledemodemo：krakenhttps://g.alicdn.com/kraken/kraken-demos/granule/build/kraken/index.js使用浏览器打开网页版：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.htmlGranule@Web2Hello-Rax(Rax官方示例应用)Hello-Rax示例演示：krakenhttps://g.alicdn.com/kraken/kraken-demos/hello-rax/build/Kraken/index.js使用浏览器打开Web版：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html3RichTextExampleRichTextExampleDemo：krakenhttps://g.alicdn.com/kraken/kraken-demos/richtext/build/kraken/index.js使用浏览器打开网页版：https://g.alicdn.com/kraken/kraken-demos/richtext/build/web/index.htmlRichText@KrakenRichText@Web更多功能和多引擎在最新的0.3.0版本中，我们还支持适配V8+JavaScriptCore双JS引擎。由于JSA抽象层的存在，也很容易接入新的JS引擎的东西。easy-debuggingJSC模式下，可以直接使用macOS自带的safari调试能力，对运行时代码进行断点调试；V8下，我们提供了ChromeDevTools的调试能力；使您的业务发展体验更上一层楼。多平台适配凭借Flutter自身出色的跨平台能力，Kraken兼容Android、iOS、macOS、Linux……，真正做到一次开发，多端运行。下一步稳定的渲染引擎是我们的第一步。为了打下坚实的基础，我们已经提供了近千个浏览器渲染能力的测试用例，并且这个数字还在不断增长。接下来，我们会继续在智能硬件场景上进行投入，包括与IoT团队合作，探索线上线下交互的大屏业务场景等。Kraken会提供一系列标准化的API来满足智能硬件场景的能力需求.当然，借助移动设备上的Flutter，我们也在探索KrakenC端落地的场景。【本文为专栏作者《阿里巴巴官方技术》原创稿件，转载请联系原作者】点此查看作者更多好文
