FEDAY第二屆前端開發者大會回顧

浠ラ箍發布于2019-08-19 17:55 / 647人閱讀

摘要：使用和構建通用應用演講者是來自的，他為我們介紹了怎么樣用和等技術，建立一個通用應用或者同構應用。開發者可以使用微信的測試號來測試域名沒備案也可以測。如何提前運用下一代技術提升性能和安全主講人是陳子舜。一個常見的前端面試題時代的性能

使用React、Redux和Node.js構建通用應用

演講者是來自Facebook的Stepan，他為我們介紹了怎么樣用Node和React、React-Router、Redux等技術，建立一個通用應用(Universal APP)或者同構應用（Isomorphism APP）。

歷史

他先從2008年講起，從那時的Rails包攬路由、驗證和視圖相關的工作，而JS則只用來寫一點點貌似很酷（？）的動畫。到后來backbone、ember、angular等等技術和框架的出現，JS已經可以做到解決路由、驗證和視圖等這些以前是Rails做的工作。

同構的好處

Code Sharing（代碼模塊可以共享）

Perceived Performance（有些腳本可以放在前端來執行，體驗更好）

SEO（搜索引擎對單頁面應用的收錄還不夠好）

代碼示例

用一系列代碼示例來解決了以下問題

View共享： react-dom的ReactDOMServer.renderToString()

路由共享：client端用react-router的browserHistory, server端則使用 match 功能（服務器端做配置是為了解決瀏覽器端禁用 JS 后，頁面還能否渲染出來的問題），server端和client端可以共用一套路由的配置文件，可以參照ServerRendering

數據：可以使用redux等數據流的庫，在服務端渲染時將data賦值給window.__DATA__

初始化數據：這里提到在一些需要拉取數據的組件里，封裝一個fetchData的方法，然后在初始化應用時可以調用一個fetchAllData方法實現組件的數據初始化。介紹了一個isomorphic-fetch的庫，可以在瀏覽器端和node端使用fetch api, 這樣可以實現一個api封裝的文件可以在server端和client端共用。

一些代價

從各個平臺遷移到node+react同構還是需要做大量的工作

node是單線程的，可以考慮使用Clousure

微信Web APP開發最佳實踐

演講人是來自微信的江劍鋒

微信應用使用Web APP的情況

有微信城市，微信搜索結果等

微信JSSDK

JSSDK給開發者提供了調用微信功能和手機功能的能力。
為什么做一個靜態頁面，也需要進行服務端簽名呢，這里JF介紹說主要是為了安全。
開發者可以使用微信的測試號來測試（域名沒備案也可以測）。
小提示：
簽名失敗的原因，注意在取url加密時不要后面的hash，還有就是contentType注意設置為json

微信用戶分布

可以看出使用2G網絡用戶有8%之多

X5內核

抹平不同Android機型的webview差異，減少適配的工作量

目前的X5內核坑還是不少的：

緩存很嚴重，甚至html文件也會緩存，清理緩存有個黑科技：在聊天框輸入//triggerWebViewCacheCleanup

flex布局部分不支持，不支持flex-wrap等，可以使用老寫法

動畫卡頓，偽元素不支持動畫效果

視頻：controll控制條必須存在（產品層面考慮，防止用戶無法關閉視頻）；autoplay無效，可以用touchstarts事件觸發；currentTime不準

可能出現cookie或者localstorage失效，可能是內存不足、進程被殺、微信主動殺或用戶主動清理造成，可以多管齊下，同時啟用兩種方案

WeUI

快速打造一套微信風格的UI界面

微信調試工具

還提到了weinre

X5內核升級了

這個月底，微信X5內核將全量從webkit內核升級到blink內核，用戶無須升級客戶端版本就可以升級到最新內核，上面的坑基本沒有了~

標準緩存

支持flex

canvas支持css背景色

filter:blur()有效

動畫卡頓

偽元素支持動畫

autoplay有效

React Tips

演講人是Fackebook前端工程師黃士旗。

Container Component

Flux Store & Reduce Store

Functional* HOC高階組件

High-order Components 高階組件，本質上就是 Decorator 模式在React的一種實現，Debug友好

Composition over inheritance RxJS

強烈推薦這個網址，https://github.com/ReactiveX/learnrx，學會了Rx之后你會發現JS原來還可以這么寫。

如何提前運用下一代Web技術提升Web性能和安全

主講人是陳子舜(PuterJam)。

一個常見的前端面試題 HTPP/2時代的Web性能

GPU云服務器云服務器 FEDAY google開發者大會 js開發者大會直播 js開發者大會視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78980.html

FEDAY2016之旅

摘要：前戲補上參會的完整記錄，這個問題從一開始我就是準備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戲 2016/3/21 補上參會的完整記錄，這個問題從一開始我就是準備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 ...

red_bricks 2019-08-19 17:55 評論0 收藏0
4月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享關于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規范前端工程師手冊奇舞周刊被忽視的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 評論0 收藏0
前端學習資源匯總

摘要：建立該倉庫的目的主要是整理收集學習資源，統一管理，方便隨時查找。目前整合的學習資源只是前端方向的，可能會存在漏缺比較好的資源，需要慢慢的完善它，歡迎在該上補充資源或者提供寶貴的建議。說明平時的學習資源都比較的凌亂，看到好的資源都是直接收藏在瀏覽器的收藏夾中，這樣其實并不方便，整理在云筆記上，也不方便查看修改記錄，索性就整理在 github 上并開源出來，希望幫助大家能夠更快的找到需...

SnaiLiu 2019-08-29 16:08 評論0 收藏0
談項目中如何選擇框架和庫（FEDAY主題分享總結）

摘要：但是在不同的項目中不同的維度權重時不一樣的沒有統一的原則去解決一個問題要自身實踐來測試選擇原則妥適性原則避免過渡實現，暫時用一些，現在還可能用不到，或者用的不多庫來滿足當前需求。這個兩天看了張克軍（豆瓣前端專家、前端布道師）在FEDAY的主題分享覺得對中大型項目開發很有幫助所以在這里分享給大家后面會有視頻地址。下面介紹重點內容。這里分享的項目是指公司實際產品開發，協同人數比較多，更加...

go4it 2019-08-23 14:03 評論0 收藏0