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 來管理更新數據。