Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
近代フロントエンドの歴史とKuma UIの登場意義
Search
poteboy
September 10, 2023
Programming
4
4.8k
近代フロントエンドの歴史とKuma UIの登場意義
2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料
poteboy
September 10, 2023
Tweet
Share
More Decks by poteboy
See All by poteboy
現代CSSフレームワークの内部実装とその仕組み
poteboy
9
4.6k
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
poteboy
3
1.2k
CSSパフォーマンスに関する計測結果
poteboy
4
1.9k
Kuma UIのこれまでとこれから
poteboy
7
4.3k
Other Decks in Programming
See All in Programming
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
630
Jakarta EE meets AI
ivargrimstad
0
370
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
190
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
The Shape of a Service Object
inem
0
510
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.9k
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Some more adventure of Happy Eyeballs
coe401_
2
180
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
130
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
160
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
Featured
See All Featured
KATA
mclloyd
27
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Designing with Data
zakiwarfel
98
5k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Debugging Ruby Performance
tmm1
72
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Designing the Hi-DPI Web
ddemaree
278
34k
Transcript
近代フロントエンドの歴史と Kuma UIの登場意義 poteboy
- Poteboy (@_poteboy_)といいます。 フロントエンドエンジニアです。 - Kuma UIというOSSの作者で、有難 いことに先日GitHubで1000 Star獲 得しました🎉
本日の流れ - 近代フロントエンドアプリケーションのざっくりとした歴史 - その上で、Kuma UIの登場意義は何だったのか、利点につい て紹介
フロントエンド = 本質的にはHTML + CSS + JavaScript しかし現在は色々なツールが存在する React, Webpack,
ES Modules…って一体何?
HTML + Inline Script
HTML + Script Tag
既存の方法の問題点 - グローバルの名前空間が汚染される - モジュールの依存順番が重要となり、コードのメンテ性・再利 用性が低下する - 特に後述するSPA(シングルページアプリケーション)のように 複数ページ間で単一HTMLを共有するアーキテクチャではこ の問題はより顕著
モジュールシステムの登場 - モジュールシステムとは、複数のパッケージやリソースを1つにまとめる仕組み - Node.jsの登場に付随してCommonJSというモジュールシステムが制定される - `require`や`module.exports`の文法で異なるファイル間でコードをインポート・エク スポートできるようになる - しかし、CommonJSはブラウザの実行環境ではネイティブサポートされていない
モジュールバンドラーの登場 - `require`構文を使っているJavaScriptをブラウザで動作可能な単一のファイルにま とめ上げるモジュールバンドラーが生まれた - 初期にはBrowserifyというツールが生まれ、その後webpackと呼ばれるバンドラが 覇権を握った - webpackはES Modulesと呼ばれるモジュールシステムも解釈できた。
- また、JSだけでなくCSSや画像も解釈できた
トランスパイラ - JavaScriptには先述のようにCommonJSやES Modulesといったモ ジュールシステムがあったり、ES5やES6など複数のバージョンが存在 する。 - そして、先述の通りブラウザはCJSを解釈できないし、すべてのブラウザ が最新のバージョンをサポートしているわけではない。 -
新しい構文で書かれたJSを環境差異なく動かすために、新しい構文を 古い構文に変換する必要がある。これをトランスパイル(またはDown Level Compiling)と呼ぶ。代表的なものにBabel。
要するに、モジュールバンドラーとトランスパイラ のお陰で我々開発者はめんどくさい制約を無視 してアプリケーションを書くことに集中することが できる
SPAとReact SPAとは、先述の通り単一Webページ内で、ユーザーからのアクションに基づいて HTML構造を動的に更新し、優れたUXを提供するアーキテクチャ 代表的なものにReactがある。ReactではJSXという構文を使用し、JavaScript内で HTMLを書く事ができる。そしてこの関数群をコンポーネントという
一般的なフロントエンドの世界では、右図 のように複数のコンポーネントを組み合わ せて画面を作る - コンポーネントは複数画面で再利用したい (a.jsで定義したコンポーネントを b.jsやc.jsで も使いたい) 👉モジュールシステム の出番
- ブラウザはモジュールシステムを解釈できな いから単一JSにまとめる必要がある 👉モジュールバンドラの出番 - JSXは一種のDSLのようなもので、ブラウザ はそのままだと解釈できないから JSに変換 する必要がある 👉トランスパイラの出番
ところで、JSXはJavaScriptの中にHTMLを書く事ができる技術 👉それならCSSもJavaScriptの中で書けると嬉しい! 👉それを実現するCSS-in-JSという技術が開発される
CSS-in-JSの問題点 従来のCSS-in-JSはJavaScriptの実行時にJSに埋め込まれたCSSを解析する必要があ り、パフォーマンスのオーバーヘッドがある 👉そこでKuma UIの出番
Kuma UIの意義 Kuma UIは先ほど紹介したモジュールバンドラとトランスパイラを活用したライブラリ アプリケーションのトランスパイル時にコードのAST(抽象構文木)にアクセスして、JS内 に書かれたCSSを抽出する そして、モジュールバンドラを利用して、抽出したCSSをアプリケーションのバンドルに出 力する 👉これにより、パフォーマンスを大幅に向上することができる!
ご清聴ありがとうございました! よかったらGitHubでスターよろしくお願いします! https://github.com/kuma-ui/kuma-ui