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
5.1k
近代フロントエンドの歴史とKuma UIの登場意義
2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料
poteboy
September 10, 2023
Tweet
Share
More Decks by poteboy
See All by poteboy
現代CSSフレームワークの内部実装とその仕組み
poteboy
10
5.1k
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
poteboy
4
2.2k
CSSパフォーマンスに関する計測結果
poteboy
4
2.2k
Kuma UIのこれまでとこれから
poteboy
7
4.8k
Other Decks in Programming
See All in Programming
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
AIでLINEスタンプを作ってみた
eycjur
1
230
AI時代のUIはどこへ行く?
yusukebe
18
9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
OSS開発者という働き方
andpad
5
1.7k
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
210
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Speed Design
sergeychernyshev
32
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Code Reviewing Like a Champion
maltzj
525
40k
Designing Experiences People Love
moore
142
24k
Thoughts on Productivity
jonyablonski
70
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Invisible Side of Design
smashingmag
301
51k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Gamification - CAS2011
davidbonilla
81
5.4k
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