2017值得一瞥的JavaScript相關(guān)技術(shù)趨勢(shì)
2017值得一瞥的JavaScript相關(guān)技術(shù)趨勢(shì)從屬于筆者的Web 前端入門與工程實(shí)踐，推薦閱讀2016-我的前端之路:工具化與工程化獲得更多關(guān)于2016年前端總結(jié)。本文主要內(nèi)容翻譯自，筆者對(duì)于每個(gè)條目進(jìn)行了些許完善。
本文中提及的這些趨勢(shì)可能離大部分開發(fā)者還很遠(yuǎn)，或者說離真正的大規(guī)模工程化應(yīng)用還很遠(yuǎn)，不過不妨礙我們提前兩三年了解下。本文僅代表原作者個(gè)人看法，不喜留言輕噴，譯者也很好奇大家對(duì)這個(gè)列表的看法。
跨年前兩天，Dan Abramov在Twitter上提了一個(gè)問題：
JS社區(qū)毫不猶豫的拋出了它們對(duì)于新技術(shù)的預(yù)期與期待，本文內(nèi)容也是總結(jié)自Twitter的回復(fù)，按照流行度降序排列。有一個(gè)尚未確定的小點(diǎn)是既然函數(shù)式編程已不再是少數(shù)派，是否要把它踢出紅毯呢?
WebAssembly
去年筆者就表示過了對(duì)于WebAssembly的期待，WebAssembly就是面向Web平臺(tái)的底層代碼。其初衷是希望能夠使所有語言都能夠編譯運(yùn)行到Web平臺(tái)，這一點(diǎn)對(duì)于很多函數(shù)式編程、響應(yīng)式編程的粉絲充滿吸引力。特別是隨著這幾年JavaScript社區(qū)的突飛猛進(jìn)，很多開發(fā)者并不能跟得上這門語言衍化的速度，因此他們也非常希望能夠直接用自己習(xí)慣的語言而不是要去重頭學(xué)一門從入門到直接放棄的語言。不過JavaScript目前還處于明顯的上升勢(shì)頭，暫時(shí)還沒人唱衰它。并且WebAssembly仍處于襁褓中，才進(jìn)入到預(yù)覽階段，離真正的發(fā)布還有很長的距離?？偨Y(jié)而言，筆者建議我們都應(yīng)該對(duì)WebAssembly保持一定的關(guān)注，畢竟它會(huì)對(duì)未來的JavaScript造成極大的影響。如果你對(duì)于WebAssembly有興趣，那么推薦閱讀Eric Elliott的相關(guān)博客。
Elm
筆者個(gè)人不太意愿使用Elm，不過其特性還是很有借鑒價(jià)值
2016年不少的開發(fā)者參與到Elm的開發(fā)中，Elm不僅僅是JavaScript的擴(kuò)展庫，而是一門可以編譯到JavaScript的編程語言，對(duì)于很多熱衷于函數(shù)式編程的開發(fā)者是個(gè)不錯(cuò)的選擇。參考Elm 入門介紹，Elm提供了如下特性：
- 并不會(huì)存在運(yùn)行時(shí)錯(cuò)誤，沒有null，沒有undefined is not a funtion。
- 非常友好的錯(cuò)誤提示信息能夠輔助你開發(fā)。
- 比較嚴(yán)格的代碼規(guī)范與項(xiàng)目架構(gòu)，保證了你的應(yīng)用在快速迭代中依然保持著***實(shí)踐。
- 自動(dòng)為所有的Elm包添加語義版本描述。
總而言之，Elm為我們提供了優(yōu)秀的工具來保證編寫干凈、簡單與碎片化的代碼，并且因?yàn)镋lm是可以編譯到JavaScript，因此很多JavaScript開發(fā)者都可以保持下關(guān)注或者嘗試下。
babili(babel-minify)
Babili最早于2016年8月份發(fā)布，它是基于Babel工具鏈上的支持原生ES6語法的壓縮工具。Henry Zhu在這篇文章中稱述了為什么我們需要另一個(gè)壓縮工具，關(guān)鍵點(diǎn)如下：
目前大部分壓縮工具只能
夠處理ES5代碼，因此在壓縮之前需要先進(jìn)性編譯，而Babili能夠支持直接輸入ES2015+。隨著瀏覽器性能的提升，越來越多的瀏覽器支持直接運(yùn)行ES2015的代碼，因此我們不需要再進(jìn)行轉(zhuǎn)換編譯。另外Babili也可以作為Babel preset引入到現(xiàn)有的Babel配置中，也可以作為直接使用的命令行工具。
這里舉個(gè)簡單的例子，我們編寫了如下的ES6類:
- class Mangler {
- constructor(program) {
- this.program = program;
- }
- }
- // need this since otherwise Mangler isn't used
- new Mangler();
之前，利用傳統(tǒng)的Babel進(jìn)行編譯與壓縮，會(huì)得到如下代碼:
- // ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code
- var a=function a(b){_classCallCheck(this,a),this.program=b};a();
而Babili的效果如下:
- // ES2015 code -> Babili -> Minified ES2015 Code
- class a{constructor(b){this.program=b}}new a;
OCaml
OCaml本身和JS沒啥關(guān)系，不過列表接下來的兩項(xiàng)都是基于OCaml，因此還是要先介紹下。如果你關(guān)注了近兩年來的函數(shù)式編程崛起之路，你或許聽過Haskell。而得益于OCaml能夠編譯到就S，其以后來居上的姿態(tài)凌駕于Haskell。Facebook的不少開發(fā)者都是OCaml的粉絲，他們的Hack、Flow以及Infer都是基于OCaml構(gòu)建的。
BuckleScript
BuckleScript是基于OCaml實(shí)現(xiàn)的服務(wù)端框架，由著名的Bloomberg團(tuán)隊(duì)創(chuàng)造而來。Duane Johnson對(duì)他們的解釋如下：
BuckleScript或者bsc，是個(gè)基于OCaml編譯器的相對(duì)較新的JavaScript服務(wù)端框架。換言之，你可以使用優(yōu)秀的函數(shù)式、自帶類型的OCaml語言，同時(shí)也能繼續(xù)背靠基于npm包管理器的Web生態(tài)系統(tǒng)。
我們來簡要的看下BuckleScript代碼風(fēng)格，譬如用BuckleScript實(shí)現(xiàn)簡單的服務(wù)端：
- let port = 3000
- let hostname = "127.0.0.1"
- let create_server http =
- let server = http##createServer begin fun [@bs] req resp ->
- resp##statusCode #= 200;
- resp##setHeader "Content-Type" "text/plain";
- resp##_end "Hello world\n"
- end
- in
- server##listen port hostname begin fun [@bs] () ->
- Js.log ("Server running at http://"^ hostname ^ ":" ^ Pervasives.string_of_int port ^ "/")
- end
- let () = create_server Http_types.http
編譯輸出為:
- 'use strict';
- var Pervasives = require("bs-platform/lib/js/pervasives");
- var Http = require("http");
- var hostname = "127.0.0.1";
- function create_server(http) {
- var server = http.createServer(function (_, resp) {
- resp.statusCode = 200;
- resp.setHeader("Content-Type", "text/plain");
- return resp.end("Hello world\n");
- });
- return server.listen(3000, hostname, function () {
- console.log("Server running at http://" + (hostname + (":" + (Pervasives.string_of_int(3000) + "/"))));
- return /* () */0;
- });
- }
- create_server(Http);
OCaml***的特性就是其函數(shù)式語言特性，我們?cè)倏聪缕鋵?duì)于不可變類型的支持，我們使用OCaml stdlib實(shí)現(xiàn)的不可變類型如下:
- module IntMap = Map.Make(struct
- type t = int
- let compare (x : int) y = compare x y
- end)
- let test () =
- let m = ref IntMap.empty in
- let count = 1000000 in
- for i = 0 to count do
- m := IntMap.add i i !m
- done;
- for i = 0 to count do
- ignore (IntMap.find i !m)
- done
- let () = test()
而如果要用Facebook Immutable實(shí)現(xiàn)的代碼為:
- 'use strict';
- var Immutable = require('immutable');
- var Map = Immutable.Map;
- var m = new Map();
- function test() {
- var count = 1000000;
- for(var i = 0; i < count; ++i) {
- m = m.set(i, i);
- }
- for(var j = 0; j < count; ++j) {
- m.get(j);
- }
- }
- test();
性能評(píng)測下，二者的執(zhí)行時(shí)間對(duì)比為：
- BuckleScript: 1186ms
- JavaScript: 3415ms
編譯后的體積為：
- BuckleScript (production): 899 Bytes
- JavaScript: 55.3K Bytes
ReasonML
ReasonML與React師出同門，是基于OCamel設(shè)計(jì)的語法友好、編輯器支持程度高，并且有強(qiáng)大的編譯工具支持的語言。建議閱讀Sean Grove對(duì)ReasonML的介紹。本文簡單介紹幾個(gè)JavaScript與Reason的語法對(duì)比：
Purescript
另一個(gè)強(qiáng)類型、高性能的能夠編譯到JavaScript的編程語言，其定位與Elm類似，主要特性為：
- 沒有運(yùn)行時(shí)錯(cuò)誤
- 嚴(yán)格的，類似于JavaScript的計(jì)算
- 支持JavaScript 對(duì)象語法
- 提供相較于Hashkell更強(qiáng)大方便的類型系統(tǒng)
- 更方便地JavaScript庫集成
Webpack-blocks
Dan Abramov說過，Webpack的定位就是在相對(duì)底層，因此將配置以編程塊的方式實(shí)現(xiàn)會(huì)更加完備。
- const { createConfig, defineConstants, env, entryPoint, setOutput, sourceMaps } = require('@webpack-blocks/webpack2')
- const babel = require('@webpack-blocks/babel6')
- const devServer = require('@webpack-blocks/dev-server2')
- const postcss = require('@webpack-blocks/postcss')
- const autoprefixer = require('autoprefixer')
- module.exports = createConfig([
- entryPoint('./src/main.js'),
- setOutput('./build/bundle.js'),
- babel(),
- postcss([
- autoprefixer({ browsers: ['last 2 versions'] })
- ]),
- defineConstants({
- 'process.env.NODE_ENV': process.env.NODE_ENV
- }),
- env('development', [
- devServer(),
- devServer.proxy({
- '/api': { target: 'http://localhost:3000' }
- }),
- sourceMaps()
- ])
- ]);
GraphQL
GraphQL是個(gè)不錯(cuò)的REST替代查詢語言，特別是對(duì)于那些擁有大量數(shù)據(jù)的公司。這個(gè)案例分析很好地闡述了從REST到GraphQL的轉(zhuǎn)變之路。我能夠想象2017年GraphQL會(huì)繼續(xù)處于上升勢(shì)頭，不過要談到真的大規(guī)模實(shí)施，還要到2018年吧。
React Storybook
相信大家對(duì)于React Storybook并不陌生了，你能夠獨(dú)立于應(yīng)用而交互式的開發(fā)你的組件，就如下圖所示：
[jQuery 3.0]()
爺爺輩的jQuery仍然處于不斷的迭代更新中，可能很多開發(fā)者忽略了2016年6月份發(fā)布的jQuery 3.0版本，可以參考這里獲取更多信息。
Pixi.js
如果你打算在瀏覽器中實(shí)現(xiàn)精彩的2D效果，特別是對(duì)于使用WebGL的游戲開發(fā)者，Pixi.js是個(gè)值得一看的庫，可以參考這里獲取更多的Demo。
Preact與[inferno]()
非常優(yōu)秀的React的替代庫。
Rust
Rust可以編譯到JavaScript啦(通過emscripten)。
Custom Elements
Custom Elements(包括Shadow DOM)一直不被主流的開發(fā)者接受，不過看似2017這一點(diǎn)將會(huì)發(fā)生些許變化。變化的關(guān)鍵因素在于瀏覽器支持比例的改善。個(gè)人還是蠻期待Custom Elements的，可以關(guān)注SmashingMag或者Google’s關(guān)于Custom Elements的解釋。
WebRTC
很難相信WebRTC已經(jīng)五歲了，F(xiàn)acebook、Slack、Snapchat以及WhatsApp都在他們的服務(wù)中集成了WebRTC?？梢灶A(yù)見WebRTC會(huì)在2017年被更多的公司采用，蒸蒸日上。
Next.js
Next.js是個(gè)基于React、Webpack與Babel構(gòu)建的，支持服務(wù)端渲染的小框架，其來源于ZEIT團(tuán)隊(duì)，在React社區(qū)獲得了不小的關(guān)注度。
