AI 助理
备案控制台
开发者社区 阿里巴巴终端技术 文章 正文

用 Vue.js 构建一个高性能 Flutter 应用

2021-08-19 4119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 染陌给大家带来一个用 Vue.js 开发 Flutter 应用的方案，以及 Kraken 背后的实践与思考。
来源 | Alibaba F2E
作者 | 染陌

image.png

在当下，跨端已经是前端绕不开的一个话题，随着 IoT 设备的普及越来越多的“端”涌现到我们的日常开发中。自 Hybrid 、React Native（Weex）后，Flutter 凭借其精简的渲染管线以及自绘渲染的特性，一跃成为这两年跨端的新宠。但其用 Dart + Widget 的开发模式以及与前端割裂的生态造成了研发成本过高。基于这个背景，我们探索一种基于 W3C 标准的 Flutter 应用方案，向上对接前端生态，向下通过自绘保证多端一致性。染陌给大家带来一个用 Vue.js 开发 Flutter 应用的方案，以及 Kraken 背后的实践与思考。

@染陌，阿里巴巴淘系技术部，前端架构团队成员，高性能Web渲染引擎Kraken核心开发者，《剖析 Vue.js 内部运行机制》作者。
kraken项目： https://github.com/openkraken/kraken

点击查看视频

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

image.png

文章标签：
JavaScript
前端开发
weex
物联网
移动开发
开发者
Dart
关键词：
JavaScript应用
VUE.js应用
JavaScript构建
Flutter构建
Flutter高性能
开发者小助理
目录
相关文章
蓝易云
|
6天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库：实践与优化
将Vue.js应用与Redis结合，可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略，可以充分发挥两者的优势，提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
蓝易云
37 11
蚝油菜花
|
22天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目，能够直接将 Figma 设计转换为 Vue.js 应用程序，减少设计师与开发者之间的交接时间，支持低代码渲染和数据绑定。
蚝油菜花
70 3
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
白雾茫茫丶
|
9天前
|
中间件 API
Next.js 实战 (八)：使用 Lodash 打包构建产生的“坑”？
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中，作者遇到了打包构建时的一系列报错，报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整，作者最终删除了lodash-es库，并将radash的部分源码复制到本地，解决了打包报错的问题。文章最后提供了项目的线上预览地址，并欢迎读者留言讨论更好的解决方案。
白雾茫茫丶
21 10
潜意识Java
|
6天前
|
存储 设计模式 JavaScript
Vue 组件化开发：构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
潜意识Java
38 1
RossyYan
|
16天前
|
JavaScript 前端开发
【Vue.js】监听器功能（EventListener）的实际应用【合集】
而此次问题的核心就在于，Vue实例化的时机过早，在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程，从而导致无法找到对应的DOM元素，最终致使计算器功能出现异常，输出框错误地显示“{{current}}”，并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰，便于后续的维护与管理工作，我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里，随后在HTML文件中对其进行引用。
RossyYan
38 8
白雾茫茫丶
|
4天前
|
监控 安全 中间件
Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求，比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码，以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块，能够简化HTTP请求的预处理和后处理，提高代码的可维护性，有助于创建快速、安全和用户友好的Web体验。
白雾茫茫丶
11 0
小宋1021
|
26天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
127 1
蓝易云
|
5天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路（以vue为例）
通过上述步骤，可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制，可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景，能够显著提升用户体验。
蓝易云
31 8
大树营养快线
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
106 58
阿里巴巴叫我来巡山
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
190 17

阿里巴巴终端技术

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 4
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 5
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 6
    html+js+css实现的建筑方块立体数字时钟源码
  • 7
    Node.js导入MongoDB具体操作指南
  • 8
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 9
    JavaScript字符串的常用方法
  • 10
    局域网网络管控里 Node.js 红黑树算法的绝妙运用
  • 1
    Flutter入门进阶之旅（二）Hello Flutter
    63
  • 2
    flutter实现语言的国际化
    123
  • 3
    搭建Flutter开发环境、从零基础到精通
    190
  • 4
    flutter 之 Dart 异步编程【详解】
    60
  • 5
    flutter 布局管理【详解】
    52
  • 6
    flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）
    133
  • 7
    flutter 创建项目、运行项目、项目目录
    225
  • 8
    flutter 架构、渲染原理、家族
    118
  • 9
    flutter 搭建开发环境
    50
  • 10
    Flutter实现仿微信群头像功能
    86

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • React 入门与实战

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云oss简介和如何对接使用