2017 年に注目すべき JavaScript 関連の技術トレンド-jsチュートリアル-php.cn

大晦日の 2 日前、Dan Abramov は Twitter で質問をしました:

JS コミュニティはためらうことなく新しいテクノロジーに対する期待と期待を高めました。この記事の内容も Twitter の回答から要約したものです。、人気の高い順に並べています。未決定のままの小さな点の 1 つは、関数型プログラミングがもはや少数派ではなくなった今、関数型プログラミングをレッドカーペットから追い出す必要があるかどうかです。

WebAssembly

昨年、著者は WebAssembly が Web プラットフォームの基礎となるコードであることへの期待を表明しました。その本来の目的は、すべての言語を Web プラットフォーム上でコンパイルして実行できるようにすることであり、これは関数型プログラミングやリアクティブプログラミングの多くのファンにとって非常に魅力的です。特に近年の JavaScript コミュニティの急速な発展に伴い、多くの開発者はこの言語の進化のスピードについていくことができず、そのため、使い慣れた言語を直接使用できることを強く望んでいます。新しい言語を入門から直接学ぶこと、そして諦めるという言語。しかし、JavaScript は依然として明らかな上昇傾向にあり、それについて悪く言う人はまだいません。そして、WebAssembly はまだ初期段階にあり、プレビュー段階に入ったばかりで、実際のリリースまではまだ遠いです。要約すると、著者は、WebAssembly は JavaScript の将来に大きな影響を与えるため、私たち全員が WebAssembly にある程度の注意を払うべきであると提案しています。 WebAssembly に興味がある場合は、Eric Elliott の関連ブログを読むことをお勧めします。

Elm

著者は個人的に Elm を使用するつもりはありませんが、その機能は依然として参考として非常に価値があります

2016 年、多くの開発者が Elm の開発に参加しました。Elm は単なる JavaScript 拡張ライブラリではありません。 JavaScript にコンパイルできるプログラミング言語は、関数型プログラミングに熱心な多くの開発者にとって良い選択です。 Elm の概要を参照すると、Elm は次の機能を提供します:

ランタイムエラーは発生せず、null も定義されていません。関数ではありません。
非常にわかりやすいエラーメッセージが開発に役立ちます。
比較的厳格なコード仕様とプロジェクト構造により、アプリケーションは迅速な反復中でもベストプラクティスを維持できます。
すべての Elm パッケージにセマンティックバージョンの説明を自動的に追加します。

結局のところ、Elm はクリーンでシンプルで断片化されたコードを確実に書くための優れたツールを提供しており、Elm は JavaScript にコンパイルできるため、多くの JavaScript 開発者が注目し続けるか、試し続けることができます。

babili(babel-minify)

Babili は 2016 年 8 月に初めてリリースされました。これは、ネイティブ ES6 構文をサポートする Babel ツールチェーンに基づく圧縮ツールです。 Henry Zhu は、別の圧縮ツールが必要な理由をこの記事で説明しました。重要なポイントは次のとおりです:

現在、ほとんどの圧縮ツールは ES5 コードのみを処理できるため、圧縮の前に高度なコンパイルが必要であり、Babili は ES2015+ の直接入力をサポートできます。ブラウザのパフォーマンスの向上に伴い、ES2015 コードの直接実行をサポートするブラウザが増えているため、変換やコンパイルは必要なくなりました。さらに、Babili は Babel プリセットとして既存の Babel 構成に導入することも、直接使用するためのコマンドラインツールとしても使用できます。

ここに次の ES6 クラスを記述しました:

class Mangler {
  constructor(program) {
    this.program = program;
  }
}
// need this since otherwise Mangler isn&#39;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 とは何の関係もありませんが、リスト内の次の 2 つの項目は OCaml に基づいているため、最初に導入する必要があります。過去 2 年間の関数型プログラミングの隆盛を追ってきた人なら、Haskell について聞いたことがあるかもしれません。そして OCaml は S にコンパイルできるおかげで、後から追いつく姿勢は Haskell を超えています。 Facebook の開発者の多くは OCaml のファンであり、彼らの Hack、Flow、Infer はすべて OCaml に基づいて構築されています。

BuckleScript

BuckleScript は、有名な Bloomberg チームによって作成された、OCaml に基づくサーバー側フレームワークです。 Duane Johnson はそれらについて次のように説明しています:
BuckleScript (bsc) は、OCaml コンパイラーに基づいた比較的新しい JavaScript サーバー側フレームワークです。言い換えれば、npm パッケージマネージャーに基づく Web エコシステムに依存し続けながら、優れた機能を備えた自己型型の OCaml 言語を使用できます。

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

ログイン後にコピー

コンパイルされた出力は次のとおりです。

&#39;use strict&#39;;
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 を使用してコードを実装する場合:

&#39;use strict&#39;;

var Immutable = require(&#39;immutable&#39;);
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();

ログイン後にコピー

パフォーマンス評価の下で、2 つの間の実行時間の比較は:

BuckleScript: 1186ms
JavaScript: 3415ms

コンパイルされたボリュームは:

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

ReasonML

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

元类型| JavaScript | Reason |

333.14153.1415″Hello World!”"Hello world!”‘Hello world!’Strings must use “Characters are strings’a'truetrue[1,2,3][1,2,3]null()const x = y;let x = y;let x = y;reference cellsvar x = y;No equivalent (thankfully)[x, ...lst] (linear time)[x, ...lst] (constant time)[...lst, x] (linear time)Not supported{…obj, x: y}{…obj, x: y}

表达式| JavaScript | Reason |

login ? “hi” : “bye”login ? “hi” : “bye”let res = undefined;switch (thing) { case first: res = “first”; break; case second: res = “second”; break;};`let res = switch thing {first => “first”second => “second”}; `

Purescript

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

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

Webpack-blocks

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

const { createConfig, defineConstants, env, entryPoint, setOutput, sourceMaps } = require(&#39;@webpack-blocks/webpack2&#39;)
const babel = require(&#39;@webpack-blocks/babel6&#39;)
const devServer = require(&#39;@webpack-blocks/dev-server2&#39;)
const postcss = require(&#39;@webpack-blocks/postcss&#39;)
const autoprefixer = require(&#39;autoprefixer&#39;)

module.exports = createConfig([
  entryPoint(&#39;./src/main.js&#39;),
  setOutput(&#39;./build/bundle.js&#39;),
  babel(),
  postcss([
    autoprefixer({ browsers: [&#39;last 2 versions&#39;] })
  ]),
  defineConstants({
    &#39;process.env.NODE_ENV&#39;: process.env.NODE_ENV
  }),
  env(&#39;development&#39;, [
    devServer(),
    devServer.proxy({
      &#39;/api&#39;: { target: &#39;http://localhost:3000&#39; }
    }),
    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的解释。