2017 iWeb 峰会上海站 笔记（二）
下午的工具专场比上午的泛泛而谈要深入一点 ^_^
笔记1：企业级 IoT（物联网） 应用开发 [Ruff--杨杰]
Ruff OS 是一个支持用 JavaScript 开发应用的物联网操作系统。
笔记2：HTML5 弹幕播放器的探索实践 [Biliblili 谭兆歆]
现在 Bilibili 使用的播放器有两种：Flash 播放器和 HTML5 播放器，基于以下原因，正在全部转型为 HTML5 播放器：
- Flash 播放器加载比较慢，而且会有抖动现象，弹幕量大的时候性能较差
- HTML5 音视频标准日趋成熟
- Chrom 开始屏蔽 Flash
HTML5 弹幕播放器技术：
- 模块：基础+内核+弹幕+业务
- 技术栈：ES5 / ES6 / TypeScript / React
- 内核模块：讲了如何通过前端封装解决网站不支持 Flash 使用的视频源格式的问题，具体没懂，就不摘抄 PPT 了…
- 弹幕模块：GPU加速；CSS3 （CSS3 动画设置运动轨迹）和 Canvas （逐帧处理坐标绘制）两种渲染方式；
笔记3：手淘互动动效探索 [淘宝--大漠]（此大漠非彼大漠）
（扩展阅读热身：http://www.sohu.com/a/126363608_465959）
- “互动，是连接用户的桥梁”，使用场景有：引流、氛围、橱窗、抽奖、视频、游戏、提醒
- “动画，是展现页面的灵魂”，类型有：Gif、视频、Flash、CSS Animation、SVG、Canvas、JS-Driven Animation
- CSS 动画痛点：沟通成本高；开发成本高；还原度低；可控性低；交互性弱；日渐无法满足业务场景
- JS-Driven Animation：市面上有 GreenSock、CreateJS 等，但是由于不好扩展等原因，他们选择自己造轮子 —— AFT
- Animation Flow Tool （AFT）：具体架构图和细节图也不摘抄了，我自己的理解是：视觉设计师将完成的设计稿通过某一种编辑器，生成一种结构描述语言，动画攻城狮只需要专注于动效管理层面的实现，不必掺和到具体的视觉设计过程中，这样两者开发就可以并行和解耦了。AFT 负责描述元素、描述动效、描述动画、管理动画，然后交付渲染引擎（aft-engine、hilo-adapter、weex-adapter、Three.js）进行渲染。
- 可量化和数据驱动：Animate cc、CreateJS
笔记4：通用 H5 平台 [百度--林溪]
应用：商品卡片、业务逻辑活动、代金券 / 红包、购物车
早期的可视化编辑系统：组件扩展方式不好；不能复用不够灵活；开发新组件效率低
需求：首先搭建一个面向开发者的页面可视化编辑平台，其次是运营人员
- 组件复用的实现：组件允许嵌套，这样一来就有了无穷的组合方法。
- 每个组件有相对应的 JSON 数据（存储属性、子节点等信息，跟 Vue 差不多）
- 拖拽组件到可视化编辑区域时，会在外层包裹一层容器，容器处理 drag&drop 事件并更新对应节点（应该是父节点）的 JSON 数据。
- 组件的添加、插入、移动、删除都是反映到（JSON 数据生成的）组件树对象上，最后后序遍历组件树，逐层向上渲染。
- 父子节点的关联渲染和通信是通过访问 $parent、$children 实例和修改 JSON 对象实现的。
- 组件扩展的实现：扩展后组件的编译问题
- 可选方案的优缺点：①脚手架线下扩展，也就是使用脚手架工具开发组件扩展，把编译后的代码上传到平台。②在线扩展，也就是把组件源代码上传到平台，不需要脚手架，开发约束较少，但是解决第三方组件库依赖就比较麻烦。
- 组件扩展规范：主组件传递属性值给（扩展的）属性组件；属性组件在属性更改时，通过 dispatchPropertyChange() 发送事件和属性值给主组件。原则：无侵入，少约束。
- 把两种方案结合：组件实时编译。组件上传，使用 Webpack 编译，输出 umd 模块，前端用 requireJS 加载。
- 整体流程：前端上传组件源码 -> 实时编译（缓存？） -> 页面配置 -> 发布组件 -> 组件源码拷贝 -> 编译 -> 静态文件集群 -> 写入数据库
- 瘦客户端的实现：用户端获取 JSON，再根据需要加载组件资源，这样每次发布就业务无关，基本上0维护。（应该是这样理解吧…）
笔记5： Nrails中后台应用可视化开发平台 [阿里--王鹏]
Nrails(Node on Rails)的简称，是由天猫营销平台事业部(原聚划算)前端团队研发，面向中后台应用的可视化开发平台。
组件化是实现可视化的核心。
Nrails 技术选型：React
Nrails 的组件通信：单个组件里面统一用一个 store 来管理更新数据，多个组件的 store 也用一个更高层的 store 来管理更新数据。
