FCC 2018 前端技術大會總結

上週末在成都舉辦了 2018 Web 前端大會，參加此次活動也是收穫滿滿，在個人分享日程中也是有這一項，因此，今天就簡單的介紹回顧一下本次大會的一些事宜。

流程

1. 高效H5動畫開發方式
2. 給 Node.js 插上 C++ 的翅膀
3. 開源項目維護
4. 敏捷中國史
5. 高可用 React 服務端渲染
6. 打造 Vue.js 組件庫

高效H5動畫開發方式

第一場分享是由騰訊 AlloyTeam 的郭林爍老師帶來的關於高效 H5 動畫開發的分享。

首先，郭老師介紹了一些常見的動畫形式，包括 GIF、APNG、Video、SVG、Canvas、JS、CSS，並介紹了這些技術的優缺點，好比 GIF 使用簡單、兼容性好、顏色少等等，具體的內容能夠到下面倉庫中去看 PPT，在這裏就不佔篇幅了。

接下來，介紹了咱們在不一樣的場景需求下該如何對動畫的實現方式進行選擇。對不一樣的開發方式進行優化，在介紹幀動畫的時候，介紹了經過 node 工具實現自動化，以及如何優化圖片資源（經過哈希算法進行圖片去重、像素複用、空白裁剪、合圖優化）。同時，介紹了許多的動畫庫幫助咱們加速開發，以及如何經過軟件導出代碼/數據生成動畫。

最後有一句話我以爲說的頗有道理，高效開發，不是把全部的場景都考慮進去，每種方式都有本身適合的場景，把每種方式都打磨好纔是高效開發。

給 Node.js 插上 C++ 的翅膀

第二場是由死月老師帶來的分享，自己我本身對 C++ 也不是很熟，全部有些地方聽的也不是很懂，有興趣的同窗能夠去看看死月老師的 PPT。

死月老師從一個故事開始提及，他們使用了阿里雲的 ONS 消息隊列，可是官方並無提供 Node 的 SDK，可是有 PHP 的 SDK，PHP 的 SDK 是 C 的擴展，因而，使用 Node.js 啓動了一個 PHP 子進程去收發消息。

這個項目就變得「髒髒的」，大神們都是想法不同的，一言不合就要用 C++ 的 SDK 封裝一個 Node.js 的 SDK，今後踏上了 C++ Addons 的不歸路。

死月老師給咱們講解了動態連接庫、與原生函數的區別，同時提醒咱們注意 C++ 的性能雖高，可是要注意入不敷出的問題，並在後面介紹了句柄、異步、事件循環、同步原語等等，我不是很熟悉就不獻醜了，有須要的同窗能夠自行去查看 PPT。

開源項目維護

在死月老師以後，給咱們分享的是來自京東凹凸實驗室的餘澈，挺喜歡他們的 logo 的。

從開源項目的配置文件開始，像咱們介紹瞭如何作好一個開源項目。也介紹了本身在作開源項目的收穫，一個靠譜的開源項目應該有什麼樣的特色呢？我在公司也是作基礎設施的，對這一套仍是比較熟悉的，深有同感。

1. 代碼規範(ESlint、stylelint、Prettier、commitlint): ESlint、stylelint 可以保證咱們代碼的規範性，prettier 可以保證咱們的代碼美觀，同時我也以爲很是重要的一步，就是對代碼提交的規範，一個好的 commit 信息就可以表達出很是多的信息了，好比加上 husky、commitlint、lint-staged 構建代碼檢查工做流。
2. 測試: 測試很是重要，一個靠譜的測試會讓使用的人放心，也會減小後期修改維護時形成的對整個代碼的傷害。測試又分單元測試、集成測試、UI 測試，作單元測試時咱們能夠經過像 mocha 的測試庫進行，集成測試像 Jest、Jasmine，而像 UI 測試可使用 NightWatch，或者是 Google 的 Puppeteer。
3. 持續集成：這方面其實要包括持續構建，持續部署，餘老師也跟咱們分享了關於如何管理版本、changelog 等等問題，我以前也是使用 lerna 作這一系列的工做來進行管理，餘老師也向咱們推薦了這個強大的工具。
4. 文檔：文檔系統也是使用的是 Docusaurus，界面比較美觀，同時它的搜索功能也很強大。

上面的這些都是項目中使用的，我以爲比較有意思的一點是 Probot 機器人，幫助咱們管理 github 的 pr、issue 等等，可是我也沒找到關於 gitlab 的實現，本身搞了一個gitlab 的機器人，可是不通用，都寫死了，準備後面再看看。

敏捷中國史

接下來分享的是一位資深的前輩，熊節老師。他從中國軟件行業開始一點一點的講述了中國敏捷開發的發展，以講故事的形式帶你一步一步走進敏捷開發的歷史，我在這兒就不給你們講故事了，講起來就有點多了，對敏捷開發有興趣的同窗能夠到 PPT 裏一探究竟。

高可用 React 服務端渲染

第五位給咱們進行分享的是上線了的 CTO 郭達峯老師，他們是 YC 第一家孵化的中國企業，在成都有公司，有興趣的同窗能夠去撩。

郭老師先帶領咱們進行服務端渲染的性能優化，從生產環境設置、到 babel 插件，將 400ms 下降到了 70ms。同時，跟我探討了如何作到高可用，好比說服務端渲染分離處理、集羣、自動擴容縮容，固然了，我比較感興趣的是 Hypernova 這個庫，它可以作到在服務端渲染失敗的時候，返回讓用戶客戶端去渲染，從而作到高可用。

打造 Vue.js 組件庫

最後一位給咱們分享的是 Zoom 前端架構師黃軼，相信你們在線上學習比較多的話，就會認識他，出版過 《Vue.js 權威指南》和《Vue.js 技術揭祕》，而且在慕課網的講師，相信有很多同窗買過他的課程。

他帶領咱們從業務出發，講解如何統一管理代碼，高效開發，保持產品一致性。從設計原則、開發規範、文檔、測試、模塊依賴、工程化等等方面一一講解了一個組件庫是如何打造的，收益頗豐，無論你會不會 Vue，咱們重要的是去學習思想，固然了，黃軼老師講的很是多，這裏就很少贅述了，有興趣的同窗能夠去看看 PPT。

總結

參加此次前端開發大會仍是頗有收穫的，每一位老師都挺有意思，與不一樣的人交流也會收穫到不同的知識，仍是要多多的參與到這些技術大會中，開拓本身的眼界。

這是 PPT 的 Github 地址: github.com/FreeCodeCam…

固然了要是你們不介意，能夠順便給我一個 Star，地址奉上：github.com/balancelove…