資訊專欄INFORMATION COLUMN
摘要：使用和構(gòu)建通用應(yīng)用演講者是來自的，他為我們介紹了怎么樣用和等技術(shù)，建立一個通用應(yīng)用或者同構(gòu)應(yīng)用。開發(fā)者可以使用微信的測試號來測試域名沒備案也可以測。如何提前運用下一代技術(shù)提升性能和安全主講人是陳子舜。一個常見的前端面試題時代的性能
使用React、Redux和Node.js構(gòu)建通用應(yīng)用
演講者是來自Facebook的Stepan，他為我們介紹了怎么樣用Node和React、React-Router、Redux等技術(shù)，建立一個通用應(yīng)用(Universal APP)或者同構(gòu)應(yīng)用（Isomorphism APP）。
歷史他先從2008年講起，從那時的Rails包攬路由、驗證和視圖相關(guān)的工作，而JS則只用來寫一點點貌似很酷（？）的動畫。到后來backbone、ember、angular等等技術(shù)和框架的出現(xiàn)，JS已經(jīng)可以做到解決路由、驗證和視圖等這些以前是Rails做的工作。
同構(gòu)的好處Code Sharing（代碼模塊可以共享）
Perceived Performance（有些腳本可以放在前端來執(zhí)行，體驗更好）
SEO（搜索引擎對單頁面應(yīng)用的收錄還不夠好）
代碼示例用一系列代碼示例來解決了以下問題
View共享： react-dom的ReactDOMServer.renderToString()
路由共享：client端用react-router的browserHistory, server端則使用 match 功能（服務(wù)器端做配置是為了解決瀏覽器端禁用 JS 后，頁面還能否渲染出來的問題），server端和client端可以共用一套路由的配置文件，可以參照ServerRendering
數(shù)據(jù)： 可以使用redux等數(shù)據(jù)流的庫，在服務(wù)端渲染時將data賦值給window.__DATA__
初始化數(shù)據(jù)： 這里提到在一些需要拉取數(shù)據(jù)的組件里，封裝一個fetchData的方法，然后在初始化應(yīng)用時可以調(diào)用一個fetchAllData方法實現(xiàn)組件的數(shù)據(jù)初始化。介紹了一個isomorphic-fetch的庫，可以在瀏覽器端和node端使用fetch api, 這樣可以實現(xiàn)一個api封裝的文件可以在server端和client端共用。
一些代價從各個平臺遷移到node+react同構(gòu)還是需要做大量的工作
node是單線程的，可以考慮使用Clousure
微信Web APP開發(fā)最佳實踐演講人是來自微信的江劍鋒
微信應(yīng)用使用Web APP的情況有微信城市，微信搜索結(jié)果等
微信JSSDKJSSDK給開發(fā)者提供了調(diào)用微信功能和手機功能的能力。
為什么做一個靜態(tài)頁面，也需要進(jìn)行服務(wù)端簽名呢，這里JF介紹說主要是為了安全。
開發(fā)者可以使用微信的測試號來測試（域名沒備案也可以測）。
小提示：
簽名失敗的原因，注意在取url加密時不要后面的hash，還有就是contentType注意設(shè)置為json
可以看出使用2G網(wǎng)絡(luò)用戶有8%之多
X5內(nèi)核抹平不同Android機型的webview差異，減少適配的工作量
目前的X5內(nèi)核坑還是不少的：
緩存很嚴(yán)重，甚至html文件也會緩存，清理緩存有個黑科技：在聊天框輸入//triggerWebViewCacheCleanup
flex布局部分不支持，不支持flex-wrap等，可以使用老寫法
動畫卡頓，偽元素不支持動畫效果
視頻：controll控制條必須存在（產(chǎn)品層面考慮，防止用戶無法關(guān)閉視頻）；autoplay無效，可以用touchstarts事件觸發(fā)；currentTime不準(zhǔn)
可能出現(xiàn)cookie或者localstorage失效，可能是內(nèi)存不足、進(jìn)程被殺、微信主動殺或用戶主動清理造成，可以多管齊下，同時啟用兩種方案
WeUI快速打造一套微信風(fēng)格的UI界面
微信調(diào)試工具還提到了weinre
X5內(nèi)核升級了這個月底，微信X5內(nèi)核將全量從webkit內(nèi)核升級到blink內(nèi)核，用戶無須升級客戶端版本就可以升級到最新內(nèi)核，上面的坑基本沒有了~
標(biāo)準(zhǔn)緩存
支持flex
canvas支持css背景色
filter:blur()有效
動畫卡頓
偽元素支持動畫
autoplay有效
React Tips演講人是Fackebook前端工程師黃士旗。
Container Component Flux Store & Reduce Store Functional* HOC高階組件High-order Components 高階組件，本質(zhì)上就是 Decorator 模式在React的一種實現(xiàn)，Debug友好
Composition over inheritance RxJS強烈推薦這個網(wǎng)址，https://github.com/ReactiveX/learnrx，學(xué)會了Rx之后你會發(fā)現(xiàn)JS原來還可以這么寫。
如何提前運用下一代Web技術(shù)提升Web性能和安全主講人是陳子舜(PuterJam)。
一個常見的前端面試題 HTPP/2時代的Web性能文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78980.html
摘要：前戲補上參會的完整記錄，這個問題從一開始我就是準(zhǔn)備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戲 2016/3/21 補上參會的完整記錄，這個問題從一開始我就是準(zhǔn)備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 ...
摘要：建立該倉庫的目的主要是整理收集學(xué)習(xí)資源，統(tǒng)一管理，方便隨時查找。目前整合的學(xué)習(xí)資源只是前端方向的，可能會存在漏缺比較好的資源，需要慢慢的完善它，歡迎在該上補充資源或者提供寶貴的建議。 說明 平時的學(xué)習(xí)資源都比較的凌亂，看到好的資源都是直接收藏在瀏覽器的收藏夾中，這樣其實并不方便，整理在云筆記上，也不方便查看修改記錄，索性就整理在 github 上并開源出來，希望幫助大家能夠更快的找到需...
摘要：但是在不同的項目中不同的維度權(quán)重時不一樣的沒有統(tǒng)一的原則去解決一個問題要自身實踐來測試選擇原則妥適性原則避免過渡實現(xiàn)，暫時用一些，現(xiàn)在還可能用不到，或者用的不多庫來滿足當(dāng)前需求。 這個兩天看了張克軍（豆瓣前端專家、前端布道師）在FEDAY的主題分享覺得對中大型項目開發(fā)很有幫助所以在這里分享給大家后面會有視頻地址。下面介紹重點內(nèi)容。這里分享的項目是指公司實際產(chǎn)品開發(fā)，協(xié)同人數(shù)比較多，更加...
閱讀 1307·2021-10-11 10:57
閱讀 2072·2021-09-02 15:15
閱讀 1633·2019-08-30 15:56
閱讀 1230·2019-08-30 15:55
閱讀 1179·2019-08-30 15:44
閱讀 1006·2019-08-29 12:20
閱讀 1355·2019-08-29 11:12
閱讀 1093·2019-08-28 18:29
