Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
近代フロントエンドの歴史と Kuma UIの登場意義 poteboy
Slide 2
Slide 2 text
- Poteboy (@_poteboy_)といいます。 フロントエンドエンジニアです。 - Kuma UIというOSSの作者で、有難 いことに先日GitHubで1000 Star獲 得しました🎉
Slide 3
Slide 3 text
本日の流れ - 近代フロントエンドアプリケーションのざっくりとした歴史 - その上で、Kuma UIの登場意義は何だったのか、利点につい て紹介
Slide 4
Slide 4 text
フロントエンド = 本質的にはHTML + CSS + JavaScript しかし現在は色々なツールが存在する React, Webpack, ES Modules…って一体何?
Slide 5
Slide 5 text
HTML + Inline Script
Slide 6
Slide 6 text
HTML + Script Tag
Slide 7
Slide 7 text
既存の方法の問題点 - グローバルの名前空間が汚染される - モジュールの依存順番が重要となり、コードのメンテ性・再利 用性が低下する - 特に後述するSPA(シングルページアプリケーション)のように 複数ページ間で単一HTMLを共有するアーキテクチャではこ の問題はより顕著
Slide 8
Slide 8 text
モジュールシステムの登場 - モジュールシステムとは、複数のパッケージやリソースを1つにまとめる仕組み - Node.jsの登場に付随してCommonJSというモジュールシステムが制定される - `require`や`module.exports`の文法で異なるファイル間でコードをインポート・エク スポートできるようになる - しかし、CommonJSはブラウザの実行環境ではネイティブサポートされていない
Slide 9
Slide 9 text
モジュールバンドラーの登場 - `require`構文を使っているJavaScriptをブラウザで動作可能な単一のファイルにま とめ上げるモジュールバンドラーが生まれた - 初期にはBrowserifyというツールが生まれ、その後webpackと呼ばれるバンドラが 覇権を握った - webpackはES Modulesと呼ばれるモジュールシステムも解釈できた。 - また、JSだけでなくCSSや画像も解釈できた
Slide 10
Slide 10 text
トランスパイラ - JavaScriptには先述のようにCommonJSやES Modulesといったモ ジュールシステムがあったり、ES5やES6など複数のバージョンが存在 する。 - そして、先述の通りブラウザはCJSを解釈できないし、すべてのブラウザ が最新のバージョンをサポートしているわけではない。 - 新しい構文で書かれたJSを環境差異なく動かすために、新しい構文を 古い構文に変換する必要がある。これをトランスパイル(またはDown Level Compiling)と呼ぶ。代表的なものにBabel。
Slide 11
Slide 11 text
要するに、モジュールバンドラーとトランスパイラ のお陰で我々開発者はめんどくさい制約を無視 してアプリケーションを書くことに集中することが できる
Slide 12
Slide 12 text
SPAとReact SPAとは、先述の通り単一Webページ内で、ユーザーからのアクションに基づいて HTML構造を動的に更新し、優れたUXを提供するアーキテクチャ 代表的なものにReactがある。ReactではJSXという構文を使用し、JavaScript内で HTMLを書く事ができる。そしてこの関数群をコンポーネントという
Slide 13
Slide 13 text
一般的なフロントエンドの世界では、右図 のように複数のコンポーネントを組み合わ せて画面を作る - コンポーネントは複数画面で再利用したい (a.jsで定義したコンポーネントを b.jsやc.jsで も使いたい) 👉モジュールシステム の出番 - ブラウザはモジュールシステムを解釈できな いから単一JSにまとめる必要がある 👉モジュールバンドラの出番 - JSXは一種のDSLのようなもので、ブラウザ はそのままだと解釈できないから JSに変換 する必要がある 👉トランスパイラの出番
Slide 14
Slide 14 text
ところで、JSXはJavaScriptの中にHTMLを書く事ができる技術 👉それならCSSもJavaScriptの中で書けると嬉しい! 👉それを実現するCSS-in-JSという技術が開発される
Slide 15
Slide 15 text
CSS-in-JSの問題点 従来のCSS-in-JSはJavaScriptの実行時にJSに埋め込まれたCSSを解析する必要があ り、パフォーマンスのオーバーヘッドがある 👉そこでKuma UIの出番
Slide 16
Slide 16 text
Kuma UIの意義 Kuma UIは先ほど紹介したモジュールバンドラとトランスパイラを活用したライブラリ アプリケーションのトランスパイル時にコードのAST(抽象構文木)にアクセスして、JS内 に書かれたCSSを抽出する そして、モジュールバンドラを利用して、抽出したCSSをアプリケーションのバンドルに出 力する 👉これにより、パフォーマンスを大幅に向上することができる!
Slide 17
Slide 17 text
ご清聴ありがとうございました! よかったらGitHubでスターよろしくお願いします! https://github.com/kuma-ui/kuma-ui