前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 ⽀支持最流⾏行行的框架 向阳⽽而⽣生 代码即将对外开源 （ 发布平台） User Code JavaScript Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 动画和⼿手势实现 X5 内核团队提供⽀支持 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Hippy Layout iOS、Android 共享布局引擎， 纯 C 开发，只有 50kb。 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 Javascript VM，并提供 Native 相关模块； • Portable UI 层：提供基础

Vue 项目运行： 1. vue upgrade --next Vite (opens new window) 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允 许快速提供代码。 npm 命令行工具 (CLI) Vite 安装 - 8 - 本文档使用 书栈网 · BookStack.CN 构建 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 js 只包含运行时，并且需要在构建步骤期间预编译模板。 内联所有 Vue 核心内部包——即：它是一个单独的文件，不依赖于其他文件，这意味着你必须导 入此文件和此文件中的所有内容，以确保获得相同的代码实例。 包含硬编码的 prod/dev 分支，并且 prod 构建是预先缩小的。使用 *.prod.js 用于生产 的文件。 提示 全局打包不是 UMD (opens new window) rollup 和 parcel 。 TODO：将 prod/dev 分支留给 process.env.NODE_ENV guards (需要更换构建工具) 不提供最小化版本 (捆绑后与其余代码一起完成) import 依赖 (例如： @vue/runtime-core ， @vue/runtime-compiler ) 导入的依赖项也是 esm bundler 构建，并将依次导入其依赖项

作为⼩小程序应⽤用开发框架，mpvue 具有什什么特点？为开发者 带来了了是什什么？当前社区的反馈如何？ mpvue 是什什么 使⽤用 Vue.js 开发⼩小程序的前端框架 Vue.js 代码 ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue install $ npm run dev shell 使⽤用⽅方式 3 mpvue 实现思路路 ⼩小程序开发姿势各不不相同，mpvue 是如何决策的？制定规则 还是复⽤用规则，mpvue 如何通过最⼩小的代价，打通传统前端 和⼩小程序开发的壁垒？ Vue 代码 mpvue 编译器器 视图层代码 逻辑层代码 执⾏行行阶段 编译阶段 View VDom Component WXML 维护数据模型和虚拟 dom ⼩小程序负责视图层渲染 mpvue runtime 实现 事件函数 mp 对象 AppData ⽣生命周期 事件函数 Vue 对象 data ⽣生命周期 事件代理理机制 数据同步机制 ⽣生命周期关联 mpvue SDK 从 SFC 提取出 AST 从 AST 构建模板代码 AST 数据改造 mpvue-loader MINA mpvue wepy

reactive({ foo, id: 10 }) data.foo // 'bar' unref - Ref 的反操作 如果传⼊⼀个 Ref，返回其值 否则原样返回 ` ` 核⼼ 实现 function unref(r: Ref | T): T { return isRef(r) ? r.value : r } 使⽤ import { unref, ref foo = ref('foo') unref(foo) // 'foo' const bar = 'bar' unref(bar) // 'bar' 接受 Ref 作为函数参数 模式 实现 ⽤例 纯函数 function add(a: number, b: number) { return a + b } let a = 1 let b = 2 let c = add(a - World name.value = 'Hi' // Hi - World 在 VueUse 中可⽤: useTitle useTitle ` ` ⽤例 useTitle 的实现 ` ` import { ref, watch } from 'vue' import { MaybeRef } from '@vueuse/core' export function useTitle(

event」，实现了全 v-model 使用组件。 维护状态 Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无 维护，不更新了。其实只是团队在全力开发 Element Plus 而已。Element 团队的迭代速度有目共睹 可放心使用。 Ant Design Vue 是 Ant Design的 Vue 实现，UI 风格和 和 antdv 首先要搭 Vue 3 开发环境，然后再引入组件库，再按照文档的说明，根据自己的需求进行二次开发。使用 Elem nt 和 antdv 相对来说对前端技能要求较高。 卡拉云是新一代低代码开发平台，与 Element 和 antdv 相比，卡拉云的优势在于不用搭建 Vue 环境， 接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件， 一键接入包括 MySQL 卡拉云搭建的数据看板 DEMO：https://my.kalacloud.com/apps/ykxauq3u6r/published 使用卡拉云 10 分钟内搭建的「天气预报数据看板」，简单拖拽，几行代码即可快速完成，搭建即发 ，可一键分享给其他同学一起使用。立即注册使用卡拉云。 扩展阅读： ● 7 种最棒的 Vue Loading 加载动画组件测评与推荐 ● 如何在 Vue 中加入图表 - Vue

架，走向企业级开发协作。 林子杰 阿里巴巴前端开发专家，UC 浏览器内核前端 负责人，UC 内核发布知乎专栏运营者 PWA 技术实践与分 析 自从 Google Chrome 团队提 出 PWA 概念并实现相关技 术之后，成功地引起并持续 性受到前端业界的关注。本 次分享将介绍 PWA 技术的 业务实践经验与问题分析。 张成文 张成文，前IMWEB团队成员，对现代前端技术 体系有较深的理解，曾参与腾讯课堂、手Q会 经公司内部产品体验环境优化。 2014年就职于阿里巴巴B2B，负责1688商家平 台前端开发。 现在在饥人谷从事前端培训行业。 我从TJ身上学到了什 么 1. 从 Ruby 社区学习 2. 从 TJ 的代码中学习 主要涉及前端框架、工具、 社区文化等方面的知识。 jeffreyluo(罗嘉 辉) 腾讯SNG高级前端工程师，2013 加入腾讯， 先后负责微信钱包，QQ钱包相关业务，现在是 师，nconp核心开发者。 WebIM Node.js微服 务应用开发与实践 webim是腾讯企点重要消息 通路之一，它实现了无需客 户端就可以和腾讯企点客户 端进行即时沟通，node.js主 要实现了消息通路的前端接 入层服务，本次将基于 webim接入层实现架构，柔 性服务特性，监控上报等方 面的实践进行分享 springswang(王 跃) 王跃，腾讯高级前端工程师，拥有10+年前端

声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 MVP => MVVM ⼀一脉相承的演化 • MVVM是为声明式/多语⾔言量量身定做的编程模型 MVVM的数据绑定 • 数据绑定是声明式的数据与UI通讯 • ⼀一些逻辑中数据绑定不不需要命令式代码 声明式数据交换 交互的抽象 ⼿手势 时间 陀螺仪 …… 位置 透明度 颜⾊色 …… 交互的抽象 ⼿手势 时间 陀螺仪 …… 位置 透明度 颜⾊色 …… Event

Google I/O 2017 Addy Osmani presenting Vue + PWA Vue 2.3 Jojo’s Bizarre Adventure 2.3 服务端渲染改进 ● 在存在代码分割的情况下，通过分析 Webpack 服 务端和客户端的构建信息，自动推导需要在客户端 预加载的文件，生成最优的