今天有幸參加了 JSConf China 2017 ，作為大會(huì)第一天，我來(lái)談?wù)剛€(gè)人對(duì)大會(huì)的一些感想。至于大會(huì)講的更加詳細(xì)的內(nèi)容可以直接翻到本文末尾，我和另外一個(gè)位前端小伙伴一起寫的非常詳細(xì)的筆記，版權(quán)在掘金，感興趣的可以點(diǎn)鏈接去看看。
第一場(chǎng) Programming the Universal Future with next.js
第一場(chǎng)是來(lái)自 ZEIT 的大神，講的是 next.js。
現(xiàn)場(chǎng)演示了 React 是如何利用 next.js 進(jìn)行服務(wù)器端渲染的。
next.js 支持 static projects、package.json(node 項(xiàng)目)、Dockerfile 項(xiàng)目配置一鍵部署。
開(kāi)發(fā)中常見(jiàn)的需求：自定義 URL，服務(wù)端渲染、實(shí)時(shí)日志，這些也都只需要一個(gè) next 命令就可以搞定！
現(xiàn)場(chǎng)演示了經(jīng)過(guò) next.js 改造之后的服務(wù)器端渲染的性能，頁(yè)面首屏直接秒開(kāi)，再也沒(méi)有了 loading 半天的情況了。用戶體驗(yàn)極佳。除了這個(gè)以后還演示了懶加載 React 組件。React 組件可以按需加載，再也不用一開(kāi)始加載所有組件了，這樣提高了很多性能。演示中還展示了 next.js 的熱加載的功能，hot-reload ，極大的提高了開(kāi)發(fā)效率。
第二場(chǎng) 理解現(xiàn)代 Web 開(kāi)發(fā)
這個(gè)演講提到了太多的話題了。而且演講過(guò)程中語(yǔ)速非常快，keynote 一頁(yè)一頁(yè)的。涉及的點(diǎn)實(shí)在是廣，據(jù)說(shuō)前端沒(méi)有五到十年經(jīng)驗(yàn)是無(wú)法領(lǐng)悟到其中的精髓的。
這一講講師放出了PPT，很值得大家去學(xué)習(xí)，鏈接在這里《理解現(xiàn)代 Web 開(kāi)發(fā)》
關(guān)于講師的 GitHub 上還有一個(gè)《現(xiàn)代 Web 開(kāi)發(fā)者的魔法書 Spellbook of Modern Web Dev》 同樣非常推薦閱讀。
1. 如何看待開(kāi)發(fā)的變化
未來(lái)的開(kāi)發(fā)形式走向(移動(dòng)化 ----> AI 時(shí)代 ----> XXX時(shí)代的前夜) 這些問(wèn)題都比較值得我們深思。
2. JavaScript Fatigue
根源在于：
- 多樣性
開(kāi)發(fā)者基數(shù)大，每年增加100%，明年超過(guò) Java，任何時(shí)候都有 50% 社區(qū)成員今年才開(kāi)始寫 JS。 - 需求多
- 成本低
JS 是抽象層最高的語(yǔ)言之一，使用的API是抽象層對(duì)高的 API 。
JavaScript Fatigue 的解決辦法是：普及維護(hù)低成本，填補(bǔ)缺失的中間層。
3. Awesome List
現(xiàn)在批評(píng)了 awesome list 這種 repo，列表膨脹，無(wú)效過(guò)時(shí)的curation太多。缺少和結(jié)構(gòu)。然后安利了 spellbook，spellbook 就是對(duì) awesome list 的缺點(diǎn)進(jìn)行的改良，還提供最細(xì)粒度的類別。
4. CSS 的未來(lái)
CSS最大的趨勢(shì)，從面向文檔轉(zhuǎn)變成面向組件。
5. Web開(kāi)源生態(tài)
- Web開(kāi)源生態(tài) = npm 生態(tài)
- 五大流派
- universal JS
第三場(chǎng) 后 ES6 時(shí)代的 JavaScript 語(yǔ)言
這一場(chǎng)是由百姓網(wǎng)的 賀老 Hax 帶來(lái)的分享。前半段主要談 ES6 的新特性是如何被各大瀏覽器廠商完美支持的。中間遇到了不少困難。還有各個(gè)提案是如何一步步的從 S0 到 S4 落地的。
中間主要談 ES7 的新特性，這里談到了 JS 的單線程的問(wèn)題，這個(gè)問(wèn)題我聽(tīng)的比較認(rèn)真，畢竟客戶端開(kāi)發(fā)的同學(xué)平時(shí)都是接觸到多線程的概念。
JS 是單線程？
Worker 其實(shí)就是類似線程。Worker 的通信是消息傳遞的，message 事件傳遞的。一般多線程編程里面是共享內(nèi)存。
RTC ，run to completion，JS 函數(shù)從頭運(yùn)行到底，一般都不會(huì)被打斷的。JS 是使用 run to completion 語(yǔ)意的語(yǔ)言。在增加 Async/Await 打破了run to completion 語(yǔ)意，但是還是可控的，只在標(biāo)識(shí)了 Async/Await 的地方可能會(huì)有變量的改變，其他沒(méi)有標(biāo)識(shí)的地方還都是 run to completion 可控的。SharedArrayBuffer 也同理。
node.js 沒(méi)有 worker，不過(guò)node.js開(kāi)發(fā)組已經(jīng)考慮會(huì)加入相關(guān)的 API。
最后，賀老提到了更多的新特性，import() 動(dòng)態(tài)加載、數(shù)組和對(duì)象的展開(kāi)運(yùn)算符、正則表達(dá)式的一些特性、global 變量、Class 特性擴(kuò)展支持私有屬性、上周新提出的提案 Pattern Match、WebAssembly等等。還有更多細(xì)小的點(diǎn)，看下圖吧：
第四場(chǎng) 前端工程中的編譯時(shí)優(yōu)化
這一場(chǎng)就是尤大的演講啦！尤大的演講稿分享地址
前端 JavaScript 雖然是腳本語(yǔ)言，沒(méi)有 buildtime，但是現(xiàn)在前端工程里面一樣需要有編譯的過(guò)程。在編譯的時(shí)候可以進(jìn)行分析和優(yōu)化。V8 的實(shí)現(xiàn)中就有相關(guān)的編譯工程，會(huì)把 JavaScript 的源碼最終編譯成機(jī)器碼。
平時(shí)我們經(jīng)常會(huì)用到 JS 的 modules ，但是模塊化了以后，打包以后會(huì)難以壓縮代碼。為了解決這個(gè)問(wèn)題，就誕生了 Rollup。
webpack 3.0 以后的版本通過(guò) ModuleConcatenationPlugin 插件支持了 Treeshaking 的特性。
前端編譯的優(yōu)化方案
前端工程化發(fā)展到今天，慢慢的開(kāi)始思考編譯器能做哪些優(yōu)化，原則是：
Do more at build time，Do less at runtime。
于是在 build time 的時(shí)候，大家想出了很多優(yōu)化的點(diǎn)：
Svelte 是一個(gè)完全依賴于編譯的框架。可以不依賴任何 runtime 的 lib 就可以編譯 JS 代碼。
Relay Modern 通過(guò)靜態(tài)的預(yù)編譯擺脫昂貴的 runtime query construction。
Prepack 的思路比較清奇，它會(huì)在編譯器把能計(jì)算的東西都計(jì)算好，然后用計(jì)算好的結(jié)果直接替換源代碼。比如一個(gè)函數(shù)返回值如果是固定的。那么 Prepack 在編譯器就會(huì)直接把這個(gè)函數(shù)的返回值計(jì)算完，然后刪除掉這個(gè)函數(shù)，只留下這個(gè)返回值。
Rakt 在應(yīng)用層面進(jìn)行編譯時(shí)優(yōu)化。
最后講了 Vue 在 編譯器的8點(diǎn)優(yōu)化：
- Hoisting Static Trees
- Skipping Static Bindings
- Skipping Children Array Normalization
- SSR Optimizing Virtual DOM render functions into string concat
- SSR inferring async chunks
- SSR inlining Critical CSS
- IDEA compile away parts of vue that's not used in your app
- IDEA styletron-style atomic CSS generation at build time
我主要關(guān)注了 SSR 的3點(diǎn)優(yōu)化：
第五場(chǎng) 學(xué)習(xí) React Native 你需要知道的一切
React Native 對(duì)很多客戶端開(kāi)發(fā)的同學(xué)算比較熟悉了。
開(kāi)始分析了一下 RN 為什么會(huì)這么流行：
- 熱更新
- 使用現(xiàn)代 web 技術(shù)開(kāi)發(fā)移動(dòng)端
- 跨平臺(tái)
RN 對(duì)應(yīng)的缺點(diǎn)：
- Breaking changes 太多
- 文檔不易理解，導(dǎo)致學(xué)習(xí)成本高
- Navigation：導(dǎo)航組件問(wèn)題校對(duì)
這里重點(diǎn)談了 Navigation 的問(wèn)題，給了以下這些可選的方案：
最后談到了 State 狀態(tài)管理，分享者也談到了 Redux 比較重，推薦了另外3個(gè)庫(kù)：Mobx、Mobx State Tree、Dva。
所以 RN 的 狀態(tài)管理可以用以下這些方式了：
- Built-in state
- Redux
- Mobx
- Mobx State Tree
- Dva
第六場(chǎng) TypeScript, Angular 和移動(dòng)端的跨平臺(tái)開(kāi)發(fā)
這一場(chǎng)是一個(gè)來(lái)自 Google 的工程講 Angular。
開(kāi)場(chǎng)就安利了一波 TypeScript。
然后接著講 Angular。
Angular 筆者實(shí)在沒(méi)有用過(guò)，這里不多介紹它了。
講完 Angular 又講了 Ionic Framework。
最后又講了 Native Script。這個(gè)是 Angular 的跨平臺(tái)原生框架，對(duì)手就是 Vue 的 Weex，React 的 React Native。
下面三種圖分別是 Native Script 的介紹和跨平臺(tái)原理。
目前用到最多的就是 React Native，Weex 用的人都不是很多(還在用 Weex 的可以在文章下面留言)，筆者周圍在用 Native Script 開(kāi)發(fā)的，十個(gè)手指頭都數(shù)的過(guò)來(lái)(用 Native Script 開(kāi)發(fā)的可以在文章下面留言)。
鑒于 Native Script 使用度不是很高，這里也不多說(shuō)了。
第七場(chǎng) Ruff loT 應(yīng)用開(kāi)發(fā)
這一場(chǎng)講的是如何用 JS 去開(kāi)發(fā)硬件。軟件工程師也可以用高級(jí)抽象語(yǔ)言 JavaScript 去開(kāi)發(fā)物聯(lián)網(wǎng)了。Ruff 把底層的硬件代碼都封裝起來(lái)了。
傳統(tǒng)的硬件代碼大概像下面這樣：
GPIO.output(11, GPIO.HIGH)
這段代碼大多數(shù)的軟件工程師可能都看不是很懂。
General Purpose Input Output （通用輸入/輸出）簡(jiǎn)稱為GPIO，或總線擴(kuò)展器，人們利用工業(yè)標(biāo)準(zhǔn)I2C、SMBus或SPI接口簡(jiǎn)化了I/O口的擴(kuò)展。當(dāng)微控制器或芯片組沒(méi)有足夠的I/O端口，或當(dāng)系統(tǒng)需要采用遠(yuǎn)端串行通信或控制時(shí)，GPIO產(chǎn)品能夠提供額外的控制和監(jiān)視功能。
第一個(gè)入?yún)?1，一般人也不知道這個(gè)是干嘛的。在硬件里面有00，01，10，11這幾個(gè)值。
HIGH是高電平。在硬件編程里面會(huì)有高電平，低電平。
如果能把這些令軟件工程師費(fèi)解的硬件代碼封裝成上層軟件可讀性比較強(qiáng)的代碼，就會(huì)對(duì)軟件工程師非常的友好。
如果封裝成下面這樣：
led.turnon()
軟件工程師一眼就知道這在干什么了，可讀性非常強(qiáng)。這句話就是在打開(kāi)一個(gè) LED 燈。
Ruff 平臺(tái)就做了這些事情，把復(fù)雜的硬件代碼都封裝了成簡(jiǎn)單易用的 JS API 了。
JavaScript 工程師可以用 jQuery 給孩子寫玩具了！
最后如果想看更加詳細(xì)的筆記，請(qǐng)看掘金這個(gè)鏈接，是我和另外一個(gè)小伙伴一起記錄的。
感想
第一天講了這么多主題，其實(shí)感受的到，當(dāng)今的 JavaScript 語(yǔ)言能做的事情越來(lái)越多了，所以文章的標(biāo)題取名為 JavaScript Change The World。
全場(chǎng)聽(tīng)下來(lái)，收獲最多的可能就是尤大講的吧。這次大會(huì)其他講師有些分享可能平時(shí)開(kāi)發(fā)中也不會(huì)用到，不過(guò)聽(tīng)聽(tīng)各家對(duì)前端技術(shù)發(fā)展的不同看法也是挺不錯(cuò)的。
前端雖然近幾年發(fā)展突飛猛進(jìn)，“魔爪”向前伸向了客戶端，向后伸向的后端，向下伸向了硬件，看似無(wú)所不能。但是前端依舊還有很多可以改進(jìn)的地方，比如 JS 的 Class，多線程。這些都可以像面向?qū)ο蟮恼Z(yǔ)言學(xué)習(xí)。前端工程化也可以慢慢考慮編譯期優(yōu)化了，這塊對(duì)于客戶端開(kāi)發(fā)語(yǔ)言，天生就是編譯語(yǔ)言來(lái)說(shuō)，Clang + LLVM 里面的黑魔法般的優(yōu)化也許值得前端學(xué)習(xí)的點(diǎn)也挺多的。
GitHub Repo：Halfrost-Field
Follow: halfrost · GitHub
