さてFrontEndHandbook 2017が公開されましたね。私もパラパラ読んでいたのですが。
https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/2017.html
このページで知らないこと多かったので訳してみると同時に知らなかったことを調べてみた。
翻訳自体には価値はないです（自分で言うのもあれですが、google翻訳以下）てかいくつか理解不能だった。。。
自主学習の記録です
以下翻訳
WebAssemblyはピークに達するかもしれません
importが<scripts></scripts>の中で使えるようになるかもしれません
一般的なJavaScriptのソリューションはサーバーサイドレンダリングにさらに敬意を払うようになります
ReactiveプログラミングはJavaScript界隈で発展し続けます（Mobx RxJS）
Reactやその概念の優位は続きます。React自身は書き直される(参照 React Fiber)もしくは進化(参照Inferno)を遂げます
AnglarはSEMVER（Semantic Versioning Specification）を設けたので、Angular 3, 4 (5でさえ)は2017のロードマップにあります
シンプルなWebサイト(レトロなweb1.0)への回帰が起きるかもしれません。2017年のツールの助けを借りてですが（例えば 静的サイトジェネレータ）
RESTful JSON APIはますます競争相手を増やします（参照 GraphQL）
Vue.jsにとっては飛躍の年になリます
静的サイトジェネレータとAPI CMS toolsの台頭によって、多くの開発者が伝統的なCMSを捨てます
多くの人がSassから PostCSS + cssnextに移行します
HTTP2とHTTPSがもっと増えます
Web Componentは重要な牽引を果たすべき、まだ見ぬ開発者を待ち続けます
フレームワークなし派、フレームワーク派の派閥争いは再び大きくなるでしょう（参照 Svelte）
オープンなWebが間違ったことを記憶しない一方で、アプリストアへの憎悪は増大し続けます（Hatred for apps store will grow, while the open web has no memory of wrong doing.）
うまくいけばJavaScriptは落ち着きます。しかしCSSが噴火して、開発者はCSSが落ち着くまで泣き疲れるでしょう
Redux は引き続き熾烈な競争を繰り広げます(参照 mobx)
YARN は多くのユーザーを獲得します
「フロントエンドアプリケーション」、「厚いクライアントアプリケーション」、「静的アプリケーション」、「バックエンドのいらないアプリケーション」、「SPA」、「フロントエンドドリブンアプリケーション」は"JAM Stack"と言われる用語・概念に集約されます
翻訳終了
原文の意味が全くわからないやつは原文のせてます。。。
あと翻訳ひどいのでしっかり読みたい人は原文を必ずご確認ください。
さてここからは知らなかったことを調べた記録です。
dynamic-import
TC39 Processは stage 3 まで来ておりES2017に入る感じでしょうか。
こんな感じでimportを関数のように利用して遅延読み込みができるようです。
<!DOCTYPE html>
<nav>
<a href="books.html" data-entry-module="books">Books</a>
<a href="movies.html" data-entry-module="movies">Movies</a>
<a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>
<main>Content will load here!</main>
<script>
const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
link.addEventListener("click", e => {
e.preventDefault();
import(`./section-modules/${link.dataset.entryModule}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
});
}
</script>
React Fiber
ReactTeam が２年以上かけて研究しているReactのコアアルゴリズムを再実装しているプロジェクトです。
Introductionだけ読むとアニメーションやレイアウトなどの適合性をより高めるために、レンダリングを複数に分割し複数のフレームに分散させてレンダリングさせるようです。
ちょっとわからないので後で読む。。。
Inferno
9kbのReact ライクなライブラリです。insanely fastと書いてある通りとにかくパフォーマンスと軽量さが売りです。
ソースコードも軽量級なのでソース確認してみようかと思いました。
Vue.js
個人的にまだ使ったことはないです。npm trendではこんな感じでした。
Reactのせいで縮尺むちゃくちゃですが増えてることは間違いないです。
CSSの噴火
BEM記法, Sass, PostCSS, CSS-in-JS, CSS Modules, styled-componentsなどCSSは混沌が続いているように感じます。
確かにこの辺はついていけてないのでもう少し落ち着くまで泣いて暮らそうかと思っています。
JavaScriptは一旦落ち着いているってのは少しながら理解（それでも流れは速く感じるが）できて、今後はWebAssemblyが一般的になってからまた色々と泣かされるかもしれません。
Svelte
Reactなどのフレームワークとは違い、ライブラリ自体を読み込むことなくJavaScriptのランタイムのみで動かせるフレームワークです。
イメージ的にはBabelのようにJSをトランスパイルしてJavaScriptを吐き出す感じです。
こうすることで余分なフレームワークを読み込むことなく動作しますので、より軽いサイズのJavaScriptが生成できます。
リンクのブログではReactTodoMVCのコードを除いた状態で45kb(zipped), Svelteは 3.6kb （zipped）らしいです。
HelloWordの変換後のJavaScript見てるとこれも面白そうです。。。
HelloWorld
https://svelte.technology/repl/?version=1.6.8&gist=0ed5146aa22c28410dfcff2050f3d2f8
JAM Stack
聞いたこともない概念だったのですが、流行(って)るのでしょうか。。。
定義がちょっとよく分からないですが、JavaScriptとAPIとMarkUpでできているアプリケーションつまりSPAのことらしいです。
SPA？あーJAMStackのことねって日が来るでしょうか。。。
JavaScriptでAPIもしくはデータベースを（直接）操作できて、裏には双方向のAPIが存在してリアルタイムなデータのやり取りをするってのが今後の（今現在も）トレンドとなるってことです。
まとめ
フロントエンドを厚めにリッチな（ブラウザ）アプリケーションのトレンドは終わらないでしょう。
これを読んでReactとWebAssemblyとサーバーサイドレンダリングとReactiveプログラミングと静的サイトジェネレータとGraphQLとVueとPostCSSと最新のCSS事情とSvelteとTC39の策定状況の確認が必要ってことが分かったので私はフロントエンドエンジニアにはなれないなぁっと改めて思いました。
ができるがきり勉強していきたいと思います。