上海 HTML5 峯會筆記整理與總結

iWeb峯會的消息是在開場前兩天才從朋友圈看到，稍微有點匆忙，只花了不到兩個小時的時間瞭解下相關主題。發現涉及的知識仍是蠻多的，甚至一些平時也沒有接觸過。因此一些關注點，理解的層次都頗有限，甚至可能有誤區，僅供參考及知識面的拓展。

工具應用類

峯會的主題是HTML5，又分爲三個大的模塊：遊戲、工具及營銷。我主要關注的工具專場，把這個放前面總結。

web前端的實時化

由野狗聯合創始人肖光宇演講的，一開始就提出一個問題：爲何須要實時？隨後舉出一些例子加以說明：咱們平時不停的刷微博，就是想獲得實時的數據；股票軟件也須要實時展現出價格的跌漲；一個團隊進行協同開發，若是代碼能實時更新，可下降協做的成本。
web前端爲何不能實時，是由基因決定的。web 技術幾乎都經過 HTTP 協議，而其特色：無鏈接，含義是限制每次鏈接只處理一個請求，服務器處理完客戶的請求，並收到客戶的應答後，即斷開鏈接；無狀態，服務器端在處理相應請求後不會保留任何客戶端的信息。
接下來說到了基於 HTTP 實時化的嘗試：polling與long polling。
後續說到了HTML5 時代的實時技術WebSocket。
接着是實時基礎即消息訂閱模型(pub/sub)，數據同步(Data Sync)。
最後是實時web的將來，兩個技術點：WebPush和WebRTC。

涉及到的知識較多，只是有個模糊的印象。感興趣根據技術點搜索下，也能夠看下官網及 API，我的開發者可無償使用。
搜到了相關的文章，應該和分享內容差很少： Web 前端的實時化
他們的博客： https://blog.wilddog.com/
他們的公衆號：野狗

英特爾專場：HTML5技術與硬件的結合

英特爾有兩場演講，主推了他們的開源項目Crosswalk。Crosswalk 能夠簡單理解爲加強版的 webkit，用於 Hybird 項目中，可替代原生的瀏覽器。
優點描述了不少，好比多平臺支持，對 WEBGL支持，對 VR，RealSense支持，知名應用好比有道雲接入，谷歌的Mobile Chrome App團隊接入，對兼容性，對性能的處理等等。
有三種接入模式：嵌入模式，和native打包到一塊兒，做爲 HTML5頁面的 webview 使用；共享模式：不用打包到單個App中，系統只須要一個 crosswalk供全部應用去調用；還有一種下載模式：好像是應用須要依賴 crosswalk，而後自動會去 app store下載？這個沒聽很明白，我猜測是否是和PC上有些應用須要依賴 .net framework那種模式？
最後我以爲想在團隊中推廣使用的硬傷仍是體積問題，完整包還想是20M，輕
量版也有10M，爲了引入 crosswalk 安裝包多10M，產品不必定能接受。
展位現場體驗了webVR小遊戲，效果很炫，感覺很真實，不禁得想到了"刀劍神域"這部動漫。演講中還講到一項技術web for RealSense，用手隔空操做小車的移動。技術發展真的改變自身不少的認識，之前的夢想將來或許就能夠實現。

Weex

主要作了大概的介紹，Demo展現，如何調試，還有一些技術實現細節。Weex目前仍是私有項目也只有Android部分，能夠在官網經過申請獲取權限，計劃在6月份徹底開源。
和react-native 是同類型的框架，但 weex 主打的是輕量，語法簡單，上手容易。weex借鑑了 vue，而 vue 和 react 相比學習成本仍是比較低的。
weex框架也再次確定了用js開發原生的這種模式，做爲前端開發人員仍是須要去多關注下。此外，vue社區今年應該會更活躍，關注度更高。
相關的資料：
關於Weex你須要知道的一切
深度揭祕阿里移動端高性能動態化方案Weex
對無線電商動態化方案的思考
如何看待阿里無線前端發佈的Weex?

如何制定與實施ES6+代碼風格和質量標準

賀前輩講的，找到了演講用的原版資料：http://johnhax.net/2015/es6-code-style/#0
在現場有印象的幾個點：Eslint具備高度可配置、預置大量規則、可共享複用(git搜索 eslint-config)等等優點，能夠在團隊中推廣使用起來。規則分爲：多是錯誤，最佳實踐，變量聲明等等，賀前輩的建議是能用的規則都用上。ES6+的整體原則：儘可能用Es6的語法，好比：ajax => promise,Class工廠 => 原生 Class 語法，arguments => ...args，|| => 函數默認參數，回調函數 => 剪頭函數等等。
接着討論了space和tab 問題，並分享賀老寫的一個Atom插件: elastic-tabstops。已經親自嘗試，灰常好用。同時推薦下Atom編輯器，據說 PC 上比較卡，本身Mac上使用很流暢，插件很豐富，容易定製，顏值高。使用中碰到一個問題：插件不生效，解決方法：在設置中將Tab type這一項選擇爲hard,而後重啓。插件生效後發現若是製表符太明顯，不美觀，可自行定製樣式（入口文件：Atom -> Stylesheet）。方法是commond+option+i調出調試工具，找到相應的class，而後在樣式文件中重寫。好比我是用的是Seti，代碼以下：

atom-text-editor::shadow {
    span.hard-tab {
         box-shadow : inset -1px 0;
         display    : inline-block;

         &:not(.indent-guide) {
            color: rgba(255, 255, 255, .1);
         }

        &.indent-guide:first-child {
             box-shadow : inset 1px 0, inset -1px 0;
        }
    }
}

atom-text-editor::shadow span.hard-tab{
    color: rgba(255, 255, 255, .1);
}

天貓電商利器-Hilo 引擎&TidaSDK

Hilo是一款輕量的遊戲開發引擎，主要解決渲染問題，用於電商項目的快速開發，好比淘寶的雙11中不少小遊戲。界面構建仍然可使用原生的canvas和css。其中分享中講到一個技術點：將flash動畫自動轉成css動畫，工具名好像叫作Tahiti，但網上未找到相關資料。
感興趣能夠看下官網，還有這篇文章： 揭祕天貓雙11晚會與狂歡城背後的技術

如何打造靠譜的前端團隊

是由去哪網的開發總監杜瑤演講，簡單說下本身有印象的幾個點。
從自身出發，對內：思考本身在團隊中的扮演的角色，所起到的做用以及自身的影響力；對外:推進能力，資源的協調能力及判斷力。
從團隊出發：盡本身的能力爲團隊多爭取利益，提升團隊的穩定性。
發揮團隊成員的最大能力
人員組成與技術棧：招團隊目前須要的人才，好比推進react-native可能須要招一個原生開發人員；招到不一樣性格的成員協調搭配；
每一個項目指定負責人，調動主人翁精神
重要性優先策略，若是某段時期團隊人員知足不了業務需求，根據重要性選擇進行開發工做

有一位嘉賓問到一個很普篇的問題，我以爲頗有參考意義。大概是這樣：團隊中新入職的員工能力欠缺，手頭任務比較多又緊急。若是本身一人承擔，不利於團隊成員的成長；而若是任務分給新員工作，可能用在指導方面的時間更多，並且怕影響項目進度？
回覆是這樣的：將項目的架子搭好，讓新同事作些業務方面的工做，慢慢熟悉，而本身也要在初期多加引導。其實也體現上面說到的調動主人翁精神，調動團隊成員的積極性，提升他們的成就感，也更有利於其自身的成長。

關於HTML5遊戲

遊戲我平時不太關注，但上午場是混在一塊兒的，因此也稍微聽了下。
首先是蝴蝶互動的CEO凌海講解了"HTML5遊戲的質量與服務"。蝴蝶互動好像是國內HTML5遊戲的老大哥，旗下的"傳奇世界"網頁版月流水2000萬。我感受整個演講都給整個 HTML5遊戲行業帶來了一些但願與憧憬。

其餘：
寫的很糾結，演講中不少點可能沒get到，但與畢業第一次參加D2相比仍是多了一些收穫，記錄下來年再進行對比。
還有幾點經驗和你們分享下：

當初以爲去上海麻煩想看現場直播的，去了以後感受現場氛圍很是好，看直播不必定能堅持下來；
參加分享會包括本身公司的內部分享，事先必定要作一些準備。由於演講者確定想將本身學到的最核心的東西分享給聽衆，也花費了不少精力，而聽衆沒有基礎可能很難理解；有了一些基礎，聽分享時多思考，才能提出一些比較有價值的問題，不浪費機會。
若是聽不懂也不要緊，總體把握下前端技術發展的趨勢，或者就漲漲見識。說不定某個技術框架或解決方案就比較適合本身的團隊。

峯會中獎品挺多的，惋惜與我擦肩而過。不過也有一個小禮品是coding發的勺和叉，上面印了coding這個單詞。總感受很詭異，是吃飯的時候提醒：若是很差好寫代碼就沒飯吃的意思？