VIPKid 曹斌&袁弋洋 在线教育C端跨平台框架的设计与实现

CodeWarrior

2019/07/08 发布于 编程 分类

GIAC2019 

文字内容
1. 在线教育业务场景下的 跨平台应用框架设计与实践 VIPKID 曹斌 & 袁弋洋
2. 01 VIPKID在线教室跨平台技术演进 02 VIPKID应用层跨平台技术演进
3. 01 VIPKID在线教室跨平台技术演进 02 VIPKID应用层跨平台技术演进
4. 什么是跨平台? 可以在多种操作系统或不同硬件架构的电脑上工作
5. 如何实现跨平台? 跨平台语言 “一次编写,到处运行” — Java ”一次编写,到处编译“ — C++ 跨平台中间件 Socket、OpenGL Asio、CEF 跨平台开发套件 Qt、Electron React Native、Flutter
6. 实际工作中该怎么选择
7. 跨平台技术选型思路 业务场景推演 业务场景和目标平台 人员结构评估 现状、市场行情、影响力 分层抽象 自顶向下
8. VIPKID在线教育场景概览 学习中心 在线教室、辅助学习 Windows、macOS iPad、APad Dino Home 学生端 教师端 VIPKID Teach 在线教室、课程管理、备课、教师招募 Windows、macOS iPad Android、iOS 管理端 监课、回放 Android、iOS 家长端 VIPKID 英语 约课、监课、回放、学习报告 Android、iOS
9. 人员结构评估 在线教室初期 快速上线
10. 跨平台方案 + Electron Djinni
11. Djinni /genie/ 自动生成跨语言桥接代码 Java proxy class & JNI marshaling Obj-C interface and Obj-C++ marshaling C++ abstract base class 使用IDL描述接口和数据结构
12. Djinni /genie/ photo = record { # server id of the photo id: i64; filename: string; } photo_model = interface +c +j +o { # returns the currently sync'd photos get_photos(): list<photo>; }
13. 上线后遇到的问题 Crash率飙高 Electron贡献了大部分崩溃 多Vendor接入 解除音视频能力单点依赖 教室场景丰富 更多的平台能力依赖接入
14. 跨平台方案改进 + + Djinni
15. 如何设计跨平台内核?
16. 如何设计跨平台内核 适度选取、自顶向下 分层和抽象
17. 业务场景分层抽象
18. 业务场景分层抽象 业务组件层 客户端产品功能快速迭代开发 业务中台层 围绕在线教室相关场景进行能力抽象 提供平台友好的接口供业务组件层进行调用
19. 业务场景分层抽象
20. 业务中台分层抽象 在线教室基础逻辑 不同平台和网络环境下构建一个稳定、高质量的在线教室最小单元 在线教室音视频内核 抽象音视频、信令传输能力
21. 业务中台分层抽象
22. VIPKID在线教室跨平台整体架构
23. VIPKID应用层跨平台方案
24. 应用层跨平台的方案 方案 传统Web+WebView 开发效率 高 开发语言 HTML+CSS+JS JS(React/Vue) Dart 社区生态 很成熟 稳定发展了一段时间(RN>Weex) 刚起步,但是发展迅速 渲染性能 低 上手成本 低 中 高 发版成本 低 中 高 适合场景 快速试错和迭代,人力紧张的团队 在满足业务快速迭代的前提下,追求 更好的性能和体验 追求更高的性能,开发资源充裕的团队 RN/Weex Flutter 一般(需要特定的开发和调试工具) 一般(需要特定的开发和调试工具) 高于WebView(取决于JSC的效率) 高(自建的平台统一渲染引擎)
25. 应用层跨平台的方案—业务决定架构 终端渠道 业务需求 周期短 持续交付 动态化 技术栈 纯Web前端 X 纯Native开发
26. VIPKID跨平台方案—应用容器化 业务场景 课程详情 约课 Web页面 原生页面1 上课 原生页面2 WebView WebView 基础模块1 App 基础模块2 微信(公众号) Before 2017 其他业务场景
27. VIPKID容器化方案—业务带来的挑战 课堂内 快 速 增 长 的 业 务 课堂外 更丰富的学习场景 新平台 数字图书馆 新内核 全客户端适配 新课件 动态交互式课件 外教带你看世界 Web+客户端 更好的学习效果、更佳的用户体验 微信小程序 Web+客户端
28. VIPKID跨平台方案演进 CASE 1: 如何将师生在动态课件中的操作同步给对方 构建容器统一通信框架 CASE 2: 课后作业加载慢、流程易中断,如何优化 从UI和性能两方面打造接近于原生页面的体验 容器化 ︒ ︒ ︒ 平台化
29. VIPKID平台化方案—构建统一通信框架 JS业务层 约课 课程详情 数字图书馆 课件 容器层 iOS WKWebView Android Mac/Windows WebView UIWebView JSSDK Electron CEF JSSDK JSSDK 桥接层 业务桥组件1 业务桥组件2 基础桥组件1 基础桥组件2 支付 埋点 端能力层 音视频 分享 容 器 通 信 框 架
30. VIPKID平台化方案—构建统一通信框架 动态课件 容器/JS SDK Hybrid Bridge 在线教室内核 信令流
31. VIPKID平台化方案—UI体验 样式不一致 H5 UI层级带来交互问题 iOS Native Native UI WebView UI
32. VIPKID平台化方案—UI体验 构建与原生页面一致的UI风格 UI桥组件 NavigationBar TabBar Dialog Loading DatePicker Toast Others…
33. VIPKID平台化方案—加载提速 系统资源预热 首页展示 App启动 启动服务编排 网络库初始化 容器预热 其他启动服务 重要页面提前加载 首页展示 约课页提前加载 页面跳转 约课页展示 约课页加载完毕
34. VIPKID平台化方案—页面离线化 离线包 html js css images fonts audios others Router.json 页面加载 页面URL URL预处理 加载URL 拦截WebView请求 加载原URL 容器路由 容 器 渲 染 资 源 内 容
35. VIPKID平台化方案—WKWebView Tips 页面及资源加载方式 file:///协议加载页面 NSURLProtocol WKURLSchemeHandler 1. 无请求拦截 2. 会存在很多跨域问题 1.配合私有API拦截 2. POST请求Body丢失 1.自定义scheme请求拦截 2. POST请求Body丢失 问题 Cookie AJAX请求跨域 POST Body丢失 解决方案 1. 同步有延迟 2. WKHTTPCookieStore iOS11才能用 HookXHR.js Hybrid桥接口 HookCookie.js Native Network Module
36. VIPKID平台化方案—工程化建设 小程序 Agile 前端发布系统 Web线上包 离线包 根据配置拉取最新内置离线包 推送离线包相关信息至配置中心 TeaCI App组件装配平台 IPA安装包 配置中心 APK安装包 推拉相结合的配置更新机制 各应用市场 AppStore Delivery App测试分发平台 QA 内测用户 Running App
37. VIPKID应用层跨平台方案—总结 2017 2019 H5 X 基本容器 H5 X 组件/平台 Web容器化阶段 组件化+平台化阶段 App逐步形成H5容器 H5与App之间极少交互 H5与App之间交互极多 编译工具链和发布平台逐步完善 各平台各端保持一致的风格和体验 ?
38. VIPKID应用层跨平台方案—展望 更好的性能 复杂页面频繁的JS通信依然存在性能瓶颈,在低端设备上表现尤其明显 更强的生产力 多端共用一份UI设计稿,能否让多端也共用一份UI代码呢? 让原生工程师能更专注于客户端的业务逻辑以及性能表现 更好的开发体验 配套开发、调试工具 热加载 Try Flutter!
39. Flutter—机遇与挑战并存 机遇 iOS、Android及Web使用同一套codebase 声明式UI带来新的开发体验 新的平台,建立技术影响力 挑战 与原生代码的混编,工程化建设 包大小 可能面临的未知问题
40. 欢迎关注msup微信公众账号 关注大会微信公共账号,及时了解大会动态、 日程及每日更新的案例! 关注公众号获得 更多案例实践