[已完結] TFC 2017 騰訊 Web 前端大會現場記錄

開場前的花絮

這裏就是一些會場的圖片啦

籤處處

給你們合影的小姐姐（徵得小姐姐的贊成）

會場佈置

開場致辭

By 黃希彤（騰訊雲技術總監）

主旨：知識是有半衰期的，得到安全感的惟一途徑就是不斷進步（引用王興）。

嘉賓分享

1、The Future of Writing Javascript

By Nicolas Bevacqua

每一項新特性想要最終被歸入 ECMAScript 規範中，都須要經歷 TC39 擬定的處理過程，共包含 Stage 0 - Stage 4 五個階段

Stage 0：Strawman

以自由形式提交想法以推動 ECMAScript 發展的階段，任何 TC39 成員，或者註冊爲 TC39 貢獻者的會員，均可以提交。

Stage 1：Proposal

該功能的正式提交階段

Stage 2：draft

草案是規範的第一個版本，與最終標準中包含的特性不會有太大的差異。草案以後，原則上只接受增量修改。

Stage 3：candidate

即將完成的候選階段，須要具體實現和得到用戶的反饋。此後，只有在實現和使用過程當中出現了重大問題纔會修改。

Stage 4：finished

已經準備就緒，該特性會出如今年度發佈的規範之中。

JavaScript 的將來

• npm，Javascript 包管理工具，戰勝了 bower
• webpack，JavaScript 打包工具，擊敗了 gulp，require.js
• babel，JavaScript 編譯工具
• rollup，新一代 JavaScript 的打包工具，在類庫開發中頗受歡迎
• eslint，JavaScript 代碼質量檢查工具
• prettier，JavaScript 新一代代碼質量檢查工具
• node，JavaScript V8 運行環境
• electron，JavaScript 桌面應用開發工具

2、初創公司前端工程體系建設

By 張雲龍（全民直播 CTO）

1. 組件化開發與系統拆分

• 在代碼層面分而治之（不要在意用什麼框架）
• 靜態資源管理（內嵌，依賴，定位）
  源代碼 -> 構建工具 -> 資源表 -> 加載接口（同步，異步，預加載）
• 大型網站子系統拆分
  直播間業務子系統，公共模塊子系統，首頁業務子系統 -> 構建出發佈版

2. 持續集成，交付，部署

• 使用 Gitlab—CI（好比新推一個 feature 分支，會自動產生 feature-name.www.quanmin.tv 的測試環境）
• 前端工程多環境實現原理
  a. 內網泛域名解析，把 *.www.quanmin.tv 解析到 gitlab-runner 機器上。
  b. gitlab-ci 針對推送的 git 分支生成 nginx 配置文件
  c. 隨機選擇一個系統可用端口，分配給 git 分支對應的應用，啓動 nodejs server，監聽此端口
  d. nginx 反向代理，把域名代理給對應的app端口，實現多環境效果

3. 前端自動化測試

• DOM 的 4 種差別（新增，刪除，內容改變，樣式改變）
• Dolphin 自動化測試系統
  a. 基於 page-monitor 項目創建頁面差別對比
  b. 經過設置 dom 基線創建 case，對比版本之間的 dom 差別，縮小人工的測試範圍
  c. 繼承了行爲錄製，log 輸出 diff，瀑布流分析的首屏分析等好用的功能

4. 看板，可視化你的進度（推薦使用物理看板）

• 看板原則：
  可視化
  顯示在製做品
  管理流動

• 電子看板的問題：
  信息輻射成本高
  容易造成【信息冰箱】
  缺少儀式感
  定製性較差

• 推薦一本書 - 看板實戰

5. 總結

創業不是要減小犯錯的次數，而是要儘可能減小犯錯的成本。

3、面向前端開發者的 V8 性能優化

By 迷渡

1. 動態語言如何進行快速計算

V8 中數字的表示

• 32位系統使用int30
• 64位系統使用int31

V8 中的數據類型

• Object：

  Array
  Function
  Date
  RegExp
  BooleanObject
  StringObject
  NumberObject複製代碼

• Primitive：

  Boolean
    String
    Number：複製代碼

  • Integer
  • Int32
  • Unit32

編譯器優化

• 使用 typefeedback 作動態檢查
• 通常而言，在編譯階段提早檢查
• 檢查以後，使用該類型做爲動態類型
• 若是檢查失敗，去優化
• 去優化以後，可能會使用解釋器運行中間碼

將來方向

• TypedArray
• WebAssembly
• SIMD

4、嘉賓致辭

By winter（程邵非，阿里巴巴前端技術專家）

1. 關於全棧

並非說會 Nodejs，就是全棧了，在生產過程當中的全棧，先後端都是要兼顧的。

2. 前端和客戶端的深度整合

前端和客戶端以前在你們的印象中，都是互相競爭的關係，可是我認爲將來前端和客戶端會有深層次的合做和整合。例如，Weex 中動畫很慢的問題，咱們就讓前端丟一個動畫包給客戶端去實現，這個過程當中咱們就用了 2 個前端，3 個客戶端的工程師（包括一個客戶端 leader）去完成，以後效果很是好。

3. 阿里的 Node

咱們要圍繞 Node 作一些中間件，以及更好的服務 Node 相關的生態，爲咱們本身也爲更多的開發者造福。

以上三點是 winner 主要想分享的點，具體內容並不是原話。

下午場預告

由於下午有三個會場，如下的四個分享前兩個來自第一會場（Web 前沿技術），後兩個來自第三會場

5、WebGL-開啓新的篇章（WebGL & Three.js 的探索之旅）

By 萬波

能作什麼？（可交互的產品展現，逼真的三維場景，沉浸式網站體驗）

1. 產品展現
2. 品牌及營銷類網站
3. 應用（衣服搭配，虛擬裝修）
4. 遊戲
5. webVR，webAR

一些疑問：

項目開發成本很高嗎？（大約爲2D網站兩倍的時間）
性能如何？（移動端還不錯，桌面端沒問題。）
瀏覽器支持的怎麼樣？（桌面端 81.2%，移動端 74.7%，可是支持速度上升很快，王者榮耀的設備統計，95% 的設備支持 WebGL）

該怎麼作？

1. 從 WebGL 框架開始
   • Three.js
   • Babylon.js
   • PlayCanvas
2. 三位場景基本概念
   • 場景：一個三維空間的容器
   • 燈光：可讓物體被看見
   • 材質：物體看起來的特質
   • 相機：從不一樣角度會看到不一樣的面
3. 三維物體的基本概念
   • 幾何體
   • 網格
   • 面
   • 頂點
4. 三位軟件製做流程
   • 建立場景
   • 添加物體
   • 設置材質
   • 渲染出來
5. Three.js 能作些什麼？
   • 建立各類幾何體
   • 設置各類材質
   • 設置各類類型的燈光
   • 建立粒子效果
   • 建立 WebVR
   • 豐富的動畫類型

工做原理

1. 工做流程
   • 頂點座標（緩存起來 -> 矩陣化 -> 座標轉換 -> 圖元裝配 -> 顯示）
   • 光柵化（由頂點生成片元 -> 光柵化）
2. 處理流程（分別處理建立流程）
3. 咱們須要儲備的知識
   • 瞭解經常使用 3D 軟件
   • 學習 Three.js
   • 第三方類庫
   • 學習 WebGL
   • openGL ES
   • 線性代數，計算機圖形學

6、一個前端工程師的機器學習之旅

By 鄧鋆（yun，二聲）（美登科技架構師）

將來的前端

1. 多元輸入
2. 因人而異
3. 信息層次豐富
4. AR / VR

五分鐘搞懂機器學習

1. 機器學習是不具體編程而使計算機找到解的過程。
2. 傳統編程與機器學習
   • 發現需求（機器，人）
   • 找到需求的規律（機器）
   • 驗證需求（機器）
   • 準備數據（人）
   • 運行（機器）
3. 淺層學習（須要提早處理數據，否則效果不好）
4. 深度學習（當數據出現偏向性時，容易產生有偏向性的過擬合，解決方法就是用更大量的數據去訓練）

咱們的嘗試

咱們想知道用戶喜歡什麼樣的字體，具體作法：

1. 數據採集
   • 記錄前端的任何動做（在 websocket 和 http2 的狀況下，這樣網絡壓力小）
   • 在移動端的採集比例比較小
   • 格式：純文本
   • 安全性（僅在有 TSL 證書的狀況下采集）
2. 數據處理，預測
   • 整理成特徵數據（csv）
   • 訓練
   • 提供預測服務（跑單個數據幾秒鐘對用戶是沒法接受的，且當用戶量大的時候對服務器負擔極大。交給前端）
3. 把預測功能對前端開放
   • GPGPU with WebGL（前端 GPU 計算）
   • 三個網絡（當前兩個網絡都預測不了時，再使用最後一個網絡）
     你要什麼網絡（偏見少節點）
     你不要什麼網絡（偏見少節點）
     全節點網絡
4. 把功能作到前端應用中
5. 經常使用函數與網絡結構
   • softmax
   • k-means
   • t-SNE（降維方法）
   • CNN（處理計算機視覺）
   • RNN-LTSM
   • Deep Q Learning
   • Autoinput，Autooutput

6. 一些奇奇怪怪的優化

   • 預訓練與組合網絡
   • 規則化調整與網絡簡化

7. 實際業務

   • 語義搜索
   • 功能推薦
   • 智能推薦
   • 流失防止&轉化
   • 自動化兼容性測試
   • 智能創做

關於創做，一個計算機網絡創做，一個計算機網絡判斷是人創做仍是機器創做，而後兩個相互影響，最後一個越判斷越準確，一個越創做越像人。

7、富途的工程化實踐之路（組件與構建）

By 王運國（富途前端開發工程師）

歷史問題

• 難以維護
• 質量堪憂
• 效率低下
• 交互各異

模塊化和組件化

• AMD 模塊化規範
• i18n 插件
• 標準化和靈活化

構建

• require.js
• gulp

問題：

• 構建耗時(15 - 20 分鐘)
• 構建不可控(嚴重的依賴配置文件，構建可能會出錯)
• 低效的緩存管理(由於全站只有一個版本號，因此每發一個版本以前的資源所有失效)
• 組件跨項目複用難

初步成型

• 組件項目化
• 構建變革
  • require.js -> webpack (支持指定非目錄尋址)
  • 速度提高(1020s -> 300s，webpack 只打包，壓縮和增量另外實現）
  • 本身實現 webpack-amdi18n 插件

新的問題

• 構建環境差別 -> 使用 JenKins：
  參數解析
  拉取代碼
  安裝依賴
  構建
  提交入庫
• 人的不可靠性
• 開發者的困擾

組件 2.0

• 私有 NPM(registry.npm.oa.com)
• 命名空間 @futuweb
• semver 語義化版本
• 去 jQuery，適配多框架
• 添加文檔

展望

• 會有適應多框架的組件方案或工具出現嗎？
• 會迎來比肩客戶端工程化的方案嗎？

分享者但願出現一款一統前端開發的大一統的工具。

8、解密實時協做文檔

By 許海浩（石墨文檔前端團隊負責人）

編輯器介紹

1. 富文本編輯器

   • 開源編輯器：UEditor，Simditor
   • 原理：利用contenteditable 特性以及 execCommand 接口

2. 富文本編輯器使用場景

   • 撰寫博客，長文

3. 缺陷：

   • HTML 層級展示不嚴謹
   • 不支持多人同時對同一版本編輯

如何知足多人協做？

設計一種代碼層級的 text model 來表示編輯器的 HTML 內容

HTML 轉化爲 model 來存儲並處理變化 -> Data
Data -> 轉化爲 HTML 進行顯示

總結：支持協做的條件

1. 編輯器的內容要與 Text Model 相互轉換
2. Text Model 可以處理多人的改動

方案一：從頭造輪子

參考對象：Google Doc，QUIP
原理：監聽鍵盤事件，以 canvas 或其餘方式來展示內容

方案二：藉助開源（咱們對選擇）

參考對象：Etherpad
理由：市面上極少的，實現了 text model 與 HTML 互通的編輯器之一

Text Model 如何處理多人改動

關鍵點：Operational Transformation
藉助 OT 算法的思想，使得 Text Model 可以：

1. 與 HTML 的改動互相轉換
2. 處理多個改動的衝突

Operation

• Operation 類型：
  insert（插入）
  delete（刪除）
  retain（保留）

• Operation 長度：
  Text Model應用到編輯器的機理：
  從座標爲 0 的位置開始，依次執行 Operation

Transform - OT 算法的重要方法

當有兩個基於相同版本的改動而生成的 model 時
咱們能夠改變一個model 將其轉換爲基於另外一個modlel應用以後的model

總結：

1. 以 Operation 來表示文檔內容與更改
2. 以 Transform 來解決多人改動的衝突

多端同步

流程圖示

今天全部的分享到這裏就結束了，手機電腦也都沒電了，感謝你們看到這裏。