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

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

2021-08-19 3811
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 染陌给大家带来一个用 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应用
JavaScript构建
JavaScript构建应用
VUE.js构建应用
VUE.js构建
开发者小助理
目录
相关文章
余生H想飞的雪糕
|
5天前
|
前端开发 机器人 API
前端大模型入门（一）：用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型（LLM）的HTTP API流式调用机制及其在前端的实现方法。通过流式调用，服务器可以逐步发送生成的文本内容，前端则实时处理并展示这些数据块，从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误，以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景，能够显著减少用户的等待时间，增强交互性。
余生H想飞的雪糕
51 2
Star时光
|
5天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页：从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页：从基础到实践
Star时光
22 1
chnjames
|
5天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南：in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令，但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似，但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异，你将能够编写更加高效、简洁的 Vue.js 代码，灵活应对各种数据结构的遍历需求。
chnjames
40 6
chnjames
|
6天前
|
JavaScript 前端开发 UED
Vue 组件设计：构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点，提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点，展示出丰富的视觉效果。组件还支持动态布局和缩放，确保灵活的界面展示和用户体验。文章提供了详细的代码实现，包括 HTML、JavaScript 和 SCSS，帮助开发者快速集成和定制自己的树形结构组件。
chnjames
27 0
Vue 组件设计：构建生动多彩的树形结构组件
一缕微风绕指柔
|
5天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包：原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包：原理、应用与代码演示
一缕微风绕指柔
9 0
Star时光
|
5天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
Star时光
6 0
G0518
|
6天前
|
监控 JavaScript 前端开发
深入了解Vue.js：构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js：构建现代前端应用的利器
G0518
10 0
开发者小助理
|
开发者 知识图谱
重磅首发｜如何构建Flutter企业级应用开发？闲鱼技术实战白皮书帮我解答
《Flutter企业级应用开发实战手册》重磅升级！本书由浅入深、娓娓道来地讲述 Flutter 核心知识点，更囊括进阶与深度内容。全书结合知识点，配以相关案例与实践进行讲解，通过思路引导，举一反三。
开发者小助理
5104 1
重磅首发｜如何构建Flutter企业级应用开发？闲鱼技术实战白皮书帮我解答
游客zi3qmblbcdexu
|
16天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
游客zi3qmblbcdexu
69 2
zacksleo
|
5天前
|
开发者
鸿蒙Flutter实战：07-混合开发
鸿蒙Flutter混合开发支持两种模式：1) 基于har包，便于主项目开发者无需关心Flutter细节，但不支持热重载；2) 基于源码依赖，利于代码维护与热重载，需配置Flutter环境。项目结构包括AppScope、flutter_module等目录，适用于不同开发需求。
zacksleo
18 3

阿里巴巴终端技术

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 3
    docker nginx 部署 vue项目
  • 4
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 5
    浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
  • 6
    解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
  • 7
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 8
    Vue Antdv a-form 表单中使用自定义组件，并支持 v-decorator 效验
  • 9
    vue2 el-select 改造成下拉树，支持数据回显
  • 10
    vue的slot-scope显示后端传来的数据
  • 1
    python如何解决js逆向混淆?
    120
  • 2
    JS中浅拷贝和深拷贝的区别，浅拷贝的危害
    33
  • 3
    原生JS如何实现验证码
    55
  • 4
    原生JS实现一键复制，一键粘贴
    57
  • 5
    JavaScript 继承的方式和优缺点
    29
  • 6
    JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
    36
  • 7
    js添加、删除、替换、插入元素的方法
    91
  • 8
    JS实现键盘事件（回车）的登录
    34
  • 9
    JS实现网页页面的框架（demo）
    32
  • 10
    JS生成登录验证码
    38

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片