Flutter在腾讯企鹅辅导上的实践之路 涂金林 个人简介 - 涂金林 东南大学 腾讯企鹅辅导 & 腾讯课堂 & IMWeb团队 iOS & Flutter负责人 目录 / contents • Flutter简介 • 实践框架及页面栈管理 • 性能优化 • Flutter For Web Flutter简介 1 Flutter简介 跨平台 1 201 3 201 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 实践框架 - 手机端 实践框架及页面栈管理 2 实践框架 - 手机端 Flutter Android依赖库 MJFlutte混合栈 Flutter单 例 统一路由 动画分离 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 Live Widget Todo Widget Course Widget Tab Widget 上课页 实践框架及页面栈管理 2 腾讯企鹅辅导 Widgets CSSender Navigator MJFlutter 上课页

这是一次难得的和国内外以及腾讯前端大神面对面交流的机会。 大会介绍： 大会介绍： IMWebConf 2017 将于 2017年 年9月 月16日（周六） 日（周六）在 深圳科兴国际会议中心 深圳科兴国际会议中心 举行。届时将邀请国内外知名互联网公 司及组织（包括W3C、微软、Google、腾讯、阿里等）的前端达人为我们带来最新前端技术的分享。 关于我们： 关于我们： IMWebConf 是由腾讯IMWe 是由腾讯IMWeb团队发起的专注于Web前端领域的非营利性开发者大会。 IMWeb团队专注前端领域多年，曾负责腾讯最核心的基础海量业务QQ统一登录、QQ注册、QQ群等，目前主要聚焦 腾讯在线教育战略产品腾讯课堂及企鹅辅导的研发， 并精心打造前端工程师Next学位，开启在线教育变革之路。 我们的工程师们也多次在Qcon、Velocity等业界大会进行分享。我们有着丰富的前端经验，也热衷于技术的开源与 分享。每年，我们都会举办自己的前端大会 术之后，成功地引起并持续 性受到前端业界的关注。本 次分享将介绍 PWA 技术的 业务实践经验与问题分析。 张成文 张成文，前IMWEB团队成员，对现代前端技术 体系有较深的理解，曾参与腾讯课堂、手Q会 员，吃喝玩乐，now直播等多项业务，具有较 丰富架构经验，著有书籍《现代前端技术解 析》 React组件的运行质 量监控方案 主要讲解react组件异常日志 的捕获方式与性能问题，包

工作履历：2012硕士毕业加入腾讯公司至今 ，参与手机QQ、 NOW直播、腾讯课堂等产 品的Android客户端。 姓名：王刚 英文：Kirawang 职位：腾讯移动端高级工程师 手机QQ NOW直播 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 关于NOW直播 •腾讯出品的个人直播平台 •2016年初上线 Dart2JS 三端统一 WEB iOS Android DART Dart2JS • Dart Widget • Property => css • 精简框架代码 关于我们 • 腾讯Now直播终端团队 • 掘金社区 https://juejin.im/user/5b4ee1cfe51d45191b61307d/posts 感谢聆听

前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 ⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。

{ "plugins": ["@babel/plugin-syntax-dynamic-import"], ... } 代码分割的效果 ESLint 的必要性 2017年年4⽉月13⽇日，腾讯⾼高级⼯工程师⼩小明在做充值业务时，修改了了苹果 iap ⽀支付配 置，将 JSON 配置增加了了重复的 key 。代码发布后，有⼩小部分使⽤用了了 vivo ⼿手 机的⽤用户反馈充值⻚页⾯面⽩白屏，⽆无法在 ⼿手机使⽤用了了系统⾃自带的 webview ⽽而没有使⽤用 X5 内核，解析 JSON 时遇到 重复 key 报错，导致⻚页⾯面⽩白屏。 如何避免类似代 码问题？ ⾏行行业⾥里里⾯面优秀的 ESLint 规范实践 腾讯： Airbnb: eslint-config-airbnb、 eslint-config-airbnb-base ·alloyteam团队 eslint-config-alloy(https://github

玩转 webpack 腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 课程介绍 框架 DSL 解析 Web 应⽤用多元化 组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析

让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼

玩转 webpack 腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写

设计模式库的规范以及应用场景等，外卖 DPL 主要包括组件搭建规范以及资源一 致性两部分。DPL 的背面是技术实现，一般体现在 Android/iOS/RN 代码框架中， 比如阿里的 FusionDesign 库、腾讯的 QMUI 库等，这些封装好的代码组件面向 程序开发人员。在未建立 DPL 模型之前，开发同学拿到设计稿进行视觉还原后， 需要修改多次，才能最终通过设计师的验证，极大影响了开发效率，还降低了需求 与点评 App 中提供了服务入口，并在技术上采用了 H5 与 Native 的混合开发技术。随着业务上线，有用户反馈我们的地图性能有一些问 题，原因是我们打车地图使用的是 Web 版的地图（通过腾讯地图 JavaScript API)， 业内同类产品使用的是 Native 版的地图 SDK，Native 地图相比 Web 地图具有天 然的性能优势，所以美团打车地图从首屏地图加载到后续的地图操作体验都有一定 端同学实现，包括 iOS 与 Android。两端分别在启动 App 时设置三层内容，最上层是手势触摸事件接收层，中间是 WebView 层（背景设置透 明），最下层是 Native 地图层（如腾讯地图 SDK）。用数组记录当前热区数据，当手 势分发层有事件发生时，通过 Touch 事件获取手指位置信息，遍历热区数组判断手 前端 < 439 指位置是否与热区的矩形相交，如相交则将消息分发给