2017值得一瞥的JavaScript相关技术趋势

时间 2019-11-11

标签值得一瞥 javascript 相关技术趋势栏目 JavaScript 繁體版

原文原文链接

2017值得一瞥的JavaScript相关技术趋势从属于笔者的Web 前端入门与工程实践，推荐阅读2016-个人前端之路:工具化与工程化得到更多关于2016年前端总结。本文主要内容翻译自，笔者对于每一个条目进行了些许完善。css

本文中说起的这些趋势可能离大部分开发者还很远，或者说离真正的大规模工程化应用还很远，不过不妨碍咱们提早两三年了解下。本文仅表明原做者我的见解，不喜留言轻喷，译者也很好奇你们对这个列表的见解。前端

跨年前两天，Dan Abramov在Twitter上提了一个问题：react

JS社区坚决果断的抛出了它们对于新技术的预期与期待，本文内容也是总结自Twitter的回复，按照流行度降序排列。有一个还没有肯定的小点是既然函数式编程已再也不是少数派，是否要把它踢出红毯呢？webpack

WebAssembly

去年笔者就表示过了对于WebAssembly的期待，WebAssembly就是面向Web平台的底层代码。其初衷是但愿可以使全部语言都可以编译运行到Web平台，这一点对于不少函数式编程、响应式编程的粉丝充满吸引力。特别是随着这几年JavaScript社区的日新月异，不少开发者并不能跟得上这门语言衍化的速度，所以他们也很是但愿可以直接用本身习惯的语言而不是要去重头学一门从入门到直接放弃的语言。不过JavaScript目前还处于明显的上升势头，暂时还没人唱衰它。而且WebAssembly仍处于襁褓中，才进入到预览阶段，离真正的发布还有很长的距离。总结而言，笔者建议咱们都应该对WebAssembly保持必定的关注，毕竟它会对将来的JavaScript形成极大的影响。若是你对于WebAssembly有兴趣，那么推荐阅读Eric Elliott的相关博客。web

Elm

笔者我的不太意愿使用Elm，不过其特性仍是颇有借鉴价值npm

2016年很多的开发者参与到Elm的开发中，Elm不只仅是JavaScript的扩展库，而是一门能够编译到JavaScript的编程语言，对于不少热衷于函数式编程的开发者是个不错的选择。参考Elm 入门介绍，Elm提供了以下特性：编程

并不会存在运行时错误，没有null，没有undefined is not a funtion。api
很是友好的错误提示信息可以辅助你开发。浏览器
比较严格的代码规范与项目架构，保证了你的应用在快速迭代中依然保持着最佳实践。babel
自动为全部的Elm包添加语义版本描述。

总而言之，Elm为咱们提供了优秀的工具来保证编写干净、简单与碎片化的代码，而且由于Elm是能够编译到JavaScript，所以不少JavaScript开发者均可以保持下关注或者尝试下。

babili(babel-minify)

Babili最先于2016年8月份发布，它是基于Babel工具链上的支持原生ES6语法的压缩工具。Henry Zhu在这篇文章中称述了为何咱们须要另外一个压缩工具，关键点以下：
目前大部分压缩工具只能

够处理ES5代码，所以在压缩以前须要先进性编译，而Babili可以支持直接输入ES2015+。随着浏览器性能的提高，愈来愈多的浏览器支持直接运行ES2015的代码，所以咱们不须要再进行转换编译。另外Babili也能够做为Babel preset引入到现有的Babel配置中，也能够做为直接使用的命令行工具。

这里举个简单的例子，咱们编写了以下的ES6类:

class Mangler {     constructor(program) {       this.program = program;     }   }   // need this since otherwise Mangler isn't used   new Mangler();

以前，利用传统的Babel进行编译与压缩，会获得以下代码:

// 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没啥关系，不过列表接下来的两项都是基于OCaml，所以仍是要先介绍下。若是你关注了近两年来的函数式编程崛起之路，你或许听过Haskell。而得益于OCaml可以编译到就S，其之后来居上的姿态凌驾于Haskell。Facebook的很多开发者都是OCaml的粉丝，他们的Hack、Flow以及Infer都是基于OCaml构建的。

BuckleScript

BuckleScript是基于OCaml实现的服务端框架，由著名的Bloomberg团队创造而来。Duane Johnson对他们的解释以下：

BuckleScript或者bsc，是个基于OCaml编译器的相对较新的JavaScript服务端框架。换言之，你可使用优秀的函数式、自带类型的OCaml语言，同时也能继续背靠基于npm包管理器的Web生态系统。

咱们来简要的看下BuckleScript代码风格，譬如用BuckleScript实现简单的服务端：

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最大的特性就是其函数式语言特性，咱们再看下其对于不可变类型的支持，咱们使用OCaml stdlib实现的不可变类型以下:

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实现的代码为:

'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();

性能评测下，两者的执行时间对比为：

BuckleScript: 1186ms
JavaScript: 3415ms

编译后的体积为：

BuckleScript (production): 899 Bytes
JavaScript: 55.3K Bytes

ReasonML

ReasonML与React师出同门，是基于OCamel设计的语法友好、编辑器支持程度高，而且有强大的编译工具支持的语言。建议阅读Sean Grove对ReasonML的介绍。本文简单介绍几个JavaScript与Reason的语法对比：

Purescript

另外一个强类型、高性能的可以编译到JavaScript的编程语言，其定位与Elm相似，主要特性为：

没有运行时错误
严格的，相似于JavaScript的计算
支持JavaScript 对象语法
提供相较于Hashkell更强大方便的类型系统
更方便地JavaScript库集成

Webpack-blocks

Dan Abramov说过，Webpack的定位就是在相对底层，所以将配置以编程块的方式实现会更加完备。

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是个不错的REST替代查询语言，特别是对于那些拥有大量数据的公司。这个案例分析很好地阐述了从REST到GraphQL的转变之路。我可以想象2017年GraphQL会继续处于上升势头，不过要谈到真的大规模实施，还要到2018年吧。

React Storybook

相信你们对于React Storybook并不陌生了，你可以独立于应用而交互式的开发你的组件，就以下图所示：

[jQuery 3.0]()

爷爷辈的jQuery仍然处于不断的迭代更新中，可能不少开发者忽略了2016年6月份发布的jQuery 3.0版本，能够参考这里获取更多信息。

Pixi.js

若是你打算在浏览器中实现精彩的2D效果，特别是对于使用WebGL的游戏开发者，Pixi.js是个值得一看的库，能够参考这里获取更多的Demo。

Preact与[inferno]()

很是优秀的React的替代库。

Rust

Rust能够编译到JavaScript啦（经过emscripten）。

Custom Elements

Custom Elements（包括Shadow DOM）一直不被主流的开发者接受，不过看似2017这一点将会发生些许变化。变化的关键因素在于浏览器支持比例的改善。我的仍是蛮期待Custom Elements的，能够关注SmashingMag或者Google’s关于Custom Elements的解释。

WebRTC

很难相信WebRTC已经五岁了，Facebook、Slack、Snapchat以及WhatsApp都在他们的服务中集成了WebRTC。能够预见WebRTC会在2017年被更多的公司采用，蒸蒸日上。

Next.js

Next.js是个基于React、Webpack与Babel构建的，支持服务端渲染的小框架，其来源于ZEIT团队，在React社区得到了不小的关注度。