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.6k
近代フロントエンドの歴史とKuma UIの登場意義
2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料
poteboy
September 10, 2023
Tweet
Share
More Decks by poteboy
See All by poteboy
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.8k
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
poteboy
3
850
CSSパフォーマンスに関する計測結果
poteboy
4
1.8k
Kuma UIのこれまでとこれから
poteboy
6
3.8k
Other Decks in Programming
See All in Programming
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
510
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Sheets API使ってみた
toshi0383
2
160
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
Git Lint
bkuhlmann
4
760
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
460
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
44
6.8k
Web development in the modern age
philhawksworth
203
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How to name files
jennybc
65
93k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Pragmatic Product Professional
lauravandoore
26
5.8k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Gamification - CAS2011
davidbonilla
77
4.6k
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