さてFrontEndHandbook 2017が公開されましたね。私もパラパラ読んでいたのですが。
上記を読んで知らなかったことを調べた記録です。
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の策定状況の確認が必要ってことが分かったので私はフロントエンドエンジニアにはなれないなぁっと改めて思いました。
ができるかぎり勉強していきたいと思います。