LoginSignup
123
112

More than 5 years have passed since last update.

2017年のフロントエンド。。。を見て

Last updated at Posted at 2017-02-02

さて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 が2年以上かけて研究しているReactのコアアルゴリズムを再実装しているプロジェクトです。
Introductionだけ読むとアニメーションやレイアウトなどの適合性をより高めるために、レンダリングを複数に分割し複数のフレームに分散させてレンダリングさせるようです。
ちょっとわからないので後で読む。。。

Inferno

9kbのReact ライクなライブラリです。insanely fastと書いてある通りとにかくパフォーマンスと軽量さが売りです。
ソースコードも軽量級なのでソース確認してみようかと思いました。

Vue.js

個人的にまだ使ったことはないです。npm trendではこんな感じでした。

Screen Shot 2017-02-02 at 22.03.25.png

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の策定状況の確認が必要ってことが分かったので私はフロントエンドエンジニアにはなれないなぁっと改めて思いました。
ができるかぎり勉強していきたいと思います。

123
112
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
123
112