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 平台 [百度--林溪]

应用：商品卡片、业务逻辑活动、代金券 / 红包、购物车

早期的可视化编辑系统：组件扩展方式不好；不能复用不够灵活；开发新组件效率低

需求：首先搭建一个面向开发者的页面可视化编辑平台，其次是运营人员

• 组件复用的实现：组件允许嵌套，这样一来就有了无穷的组合方法。

1. 每个组件有相对应的 JSON 数据（存储属性、子节点等信息，跟 Vue 差不多）
2. 拖拽组件到可视化编辑区域时，会在外层包裹一层容器，容器处理 drag&drop 事件并更新对应节点（应该是父节点）的 JSON 数据。
3. 组件的添加、插入、移动、删除都是反映到（JSON 数据生成的）组件树对象上，最后后序遍历组件树，逐层向上渲染。
4. 父子节点的关联渲染和通信是通过访问 $parent、$children 实例和修改 JSON 对象实现的。

• 组件扩展的实现：扩展后组件的编译问题

1. 可选方案的优缺点：①脚手架线下扩展，也就是使用脚手架工具开发组件扩展，把编译后的代码上传到平台。②在线扩展，也就是把组件源代码上传到平台，不需要脚手架，开发约束较少，但是解决第三方组件库依赖就比较麻烦。
2. 组件扩展规范：主组件传递属性值给（扩展的）属性组件；属性组件在属性更改时，通过 dispatchPropertyChange() 发送事件和属性值给主组件。原则：无侵入，少约束。
3. 把两种方案结合：组件实时编译。组件上传，使用 Webpack 编译，输出 umd 模块，前端用 requireJS 加载。
4. 整体流程：前端上传组件源码 -> 实时编译（缓存？） -> 页面配置 -> 发布组件 -> 组件源码拷贝 -> 编译 -> 静态文件集群 -> 写入数据库

• 瘦客户端的实现：用户端获取 JSON，再根据需要加载组件资源，这样每次发布就业务无关，基本上0维护。（应该是这样理解吧…）

笔记5： Nrails中后台应用可视化开发平台 [阿里--王鹏]

Nrails(Node on Rails)的简称，是由天猫营销平台事业部(原聚划算)前端团队研发，面向中后台应用的可视化开发平台。

组件化是实现可视化的核心。

Nrails 技术选型：React

Nrails 的组件通信：单个组件里面统一用一个 store 来管理更新数据，多个组件的 store 也用一个更高层的 store 来管理更新数据。

转载于:https://www.cnblogs.com/ppJuan/p/7056307.html