207
微信開發中的前後端之坑
本文內容來源於夏力維在HTML5夢工場 & 微軟開發者沙龍第07期-微信Web開發上的主題演講，IT大咖說為HTML5夢工場&微軟獨家視頻知識分享平台。
編輯：IT大咖說
閱讀字數：3236 用時：13分鍾
嘉賓演講視頻地址：https://t.cn/RSceycK
之前，我們團隊發現了一個問題，這個問題是編碼跟發布的過程很繁瑣。所以我們為了減輕工作量，做了以下幾件事
1、第一件事
CODE ON WEB。我們率先將類微信JSSDK的方式自己寫了一套同樣的JSSDK方式做控製。
2、第二件事
在這過程中提供了MORE APIs for實時的realtime。因為當你不停地刷開一個頁麵，為了進入下一個頁麵而去等待，這樣的等待在我們看來是浪費時間和生命。所以在realtime的強調上我們認為，在WeChat Official Accounts的過程中，提供了更多的機會。
3、第三件事
DATA和Platform。目前在市麵上的前端級跟原生級的產品中，有大量的公司在嚐試建立平台，但這樣的平台有問題。當同樣一個用戶進入了五六個不同廠家的產品，會發現它有五倍的用戶量，這樣的統計方式實際上是錯的。我們認為Personal Tool未來的情況會變得更優秀。
我們在做人工智能預測的時候，預測了幾個方向：
第一個是基於一般模型和Personal Tool可以做的個人級修正，我們認為它是一個可行的方向。
第二是目前市麵上隻能通過個人級，在smallcell的情況下，隻能通過語音這個位置進入。
還有一個DEMO。比如今天大家可以通過掃描二維碼，填一下手機號跟後台的check 驗證捆綁，依靠DEMO SHOW得到人數的數據。
所以，你會發現，產品特別是H5，一定是通過大量的場景互動式得到未來，舍棄古老的方式，用這種巧妙的方式變在整個產品策略中，不停地問一些其他問題做場景預設。在前端都是通過字符串的拚接去完成。當你問出這些問題的時候，其實全靠前端的字符串識別和分割去實現。
很多工程師做到後麵的痛點就在於，安卓的瀏覽器千變萬化，騰訊的TBS在微信內表現優秀，提供了大量的元升級的條件。其實我們可以在自己的產品內也同樣做這套東西，在產品內部讓原生團隊來兼容自己，有需要的時候重新渲染。這樣的方式交互感會變得更棒。
我們是幹嘛的？
我們在產品的體驗上認為，應該進入一個溝通的場景。當有需要的時候，可以快速進行一場演講和答複的獲得，把一些所有的曆史性的東西完成，並且在這裏麵實現語音級或者是VR級的產品，這就是我們在DEMO級產品上的思考。
無論你用什麼辦法在渲染一張全景及圖片的時候，第一是速度，第二是拚接方式。那麼問題來了，它耗不耗內存，APP會不會崩潰，圖要多大。當你真正遇到這些問題的時候會發現，iPhone用戶會出現大量的閃退，安卓用戶勉強會進入絕對的卡頓狀態。
當你把一個DOM層消掉的時候，會發現其實從內存級的角度上來說它並沒有被消除，所以要通過多次設置讓這個數據離開。很多人沒意識到DOM級別的內存管理這件事，甚至會出現多列表的狀態。我們建議一個list view隻存一百個，當進入下一個list view的時候截取出來。這一招在web view的角度上同樣適用。你可以通過JSG內存的角度或是本地存儲的方式把你要的數據存下來，這樣的話不會出現超大規模渲染時的尷尬。
這裏有另外一個DEMO，這是來自於西溪路綠城的一個項目。它的元素特別多，他能夠精細化到把這樣的場景和幕布都做到，甚至可以用第一視角在裏麵進行場景級的切換跟瀏覽。可是它很卡，細究的時候就進入了內存的考量。
前端級的交互產品往上衝量級的時候，當進入對於位算法和優化的內存級考慮，產品會變得越來越有優秀品質體驗感。
我們在圖片非絕對渲染的時候，采用的是縮略圖的策略去省流量。當遇到video級視頻的時候，采用了騰訊X5瀏覽器，這個裏麵沒有出現SRC，當點擊屏幕的時候才出現SRC再加載，這樣就省流量了。這樣就可以節省CDN高昂的費用。有些時候越省錢，就會發現前端技術在思考問題的時候特別有空間感，這件事情就變得很簡單。
微信生態提供的便利性
從代碼級的角度上，我來給大家看下微信生態提供了什麼樣的便利性。
單實例化通道
因為微信的小程序隻能保留一個實時化通道，最早期的時候原生級隻提供五個鏈接。大家在用微信小程序做post的時候，都是通過橋接級完成的，所以它的內存上隻留了這麼一個有限的量。雖然最近放開了，但是要巧妙地使用這樣的產品，讓原生和H5級產品很好的溝通和交流。而它的思想不是留在微信現有的生態內，它希望所有原生產品在H5的角度上打開一個web view的時候都能用TBS。這樣它可以實現跨APP、跨產品及跨一切產品級的內容和溝通。
協議規則數組化
微信這方麵的SDK從來沒有放出來過，但是message很早就做了。所以協議化的規則數組的格式可以提前預設，千萬不要寫死。這個位置你得留下，不要僅思考當前業務，而思考的是遠景級場景。如果前端工程師有個新的想法，在那個位置可以寫一下，看一下效果如何，前端級呈現完成。
所以在這個過程中，websocket和長鏈接級別的出現，哪怕用socket.io，我們覺得都能在產品策略上獲得更多提升。組件化並且嚐試在業務中增加即時性的可能性以及檢驗效果是否正確非常重要。
區塊鏈
當前所有級別產品在做的過程中都考慮了僅當前業務狀態，可是區塊鏈橫空出世，和我們有什麼關係呢？
區塊鏈級的產品如果通過原生級支付先完成，那麼團隊的整體成本將直線上升，因為它等於提供了一套多可能性的支付方式。而前端級通過在線即時完成的話，測試成本就極低，因為區塊鏈太慢了。在區塊鏈的過程中，你可以通過前端實時級的驗證處理，通過後端大量的httprequest，就等notify回來。所以要在自己的類IM和實時級的場景中出現更多延展性可能以增強產品的實力本身。
人工智能
人工智能也是靠數據的累積。當前的業務體量，我們認為smallcompany沒有資格介入圖像識別的領域，因為它的數據存儲量和算例代價太大。但是對語音囤積在本地化算法的過程中，在模型修正的基礎上還是有略微空間的。所以存好數據，並且可以方便地把這些曆史數據讀出來，不停地修正之前語音傳下來的識別結果，做到未來的延展力。
快速地聽取和對於片碎片化文字的能力已經被微博微信群大量的完成了。速讀是對於兩三百個文字出現的片段，有對於關鍵詞的抓取能力，已完成快速閱讀。我們曾經讀書的群體當中流行一句話：誰看的速度快，是因為他看的書多，關鍵詞在他意識中的醒目感和提煉度快。
在商業場景中會出現會有人倒賣前端級工程師的身份數據。倒賣身份數據唯一的識別點在於mobile和身份證是不是同一個人，這樣的場景我們稱之為預先級私底下的黑色交易會提前出現。已完成在部署和控製端的時候進入數據的驗證級，而這裏麵會出現大量做SDK的公司，但實際上大家可以通過自己H5交互的產品去錄段音祝賀一下，這樣交互場景都可以出現，可以在產品中考量，它不是為了現在的業務，而是去為未來做積澱。
技術時代的遷移
在我們認為的技術時代變遷過程中，作為前端級工程師可以考量的是，我們從查閱時代到訂閱時代到推送的時代到未來的特征平衡，本質上是也許每一個人的雲服務會增長，而雲服務增長的過程中，進入AR的場景的時候怎樣去介入。我們隻能用一些工具把它做出來，看到立體式的，這時你會發現上web是最快的方式，但它並沒有到絕對業務體量的交互級。所以不僅要用websocket，還要和socket混用，因為有大量的IOT設備需要這樣的場景。
從零打造一個產品特別的難，但是去改變別人的產品，增加一個個小功能的情況下，這個概率是有效和實際的。
我們在產品的過程中出現了一些這種具業務級保護的公司。這樣的產品量級在未來情況下，我們認為會變得更有優勢，也希望大家做前端的情況下，能嚐試的在websocket的角度上向公司要一個可測試的demo級場景，去快速發布產品，然後做測試。我們相信未來會在realtime的基礎上溝通過程中會變得更有優勢和優秀。
推薦文章
IBM中國軟件架構師馬達：Kubernetes 中基於策略的資源分配
京東雲產品部總經理郭理靖：雲計算的下一個時代“容器時代”
近期活動
活動 | 區塊鏈技術如何改變我們的生活
最後更新：2017-08-15 17:32:30