Kuma UIのこれまでとこれから

by poteboy

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 2023 THECOO inc. 1. SPAフレームワーク群の台と共に、Webアプリケーション開発⼿法が所謂 Page Based から Component Based な開発が主流になった 2. それに伴い、Webアプリケーションにおける「関⼼の分離 (Separation of Concern)」がHTML/CSS/JavaScriptなどの技術単位から機能単位にシフトした 3. 関⼼の分離が機能単位にシフトしたことで、スタイリング⼿法がクラス名⾃体が意味を持つSemantic CSSに対して単⼀の機能を組み合わせるUtility Firstが⽣まれた How Kuma UI was born Webアプリケーションとスタイリングの歴史

Slide 5

Slide 5 text

© 2023 THECOO inc. TailwindのUtility Firstがユーティリティクラスを組み合わせる技術とするならば、ユーティリティプロパティを組み合わせる CSS-in-JS技術が⽣まれる。代表どころは - Chakra UI - Styled System - xstyled ユーティリティクラスな⼿法と⽐較して型安全かつより表現⼒のある⼿法だったしかし、この⼿法には重⼤な問題があった How Kuma UI was born Utility FirstなCSS-in-JS

Slide 6

Slide 6 text

© 2023 THECOO inc.. Chakra UIに代表される⾃分の好きだったUtility First CSS-in-JS技術はランタイムでCSSをDOMに突っ込む必要がありパフォーマンス問題を抱えていた。また、React Server Componentsが台頭したことによりサーバーコンポーネントで軒並みランタイムCSS-in-JSが機能せず、⼈気が下⽕になりはじめた⾃分の好きだった技術が廃れるのは悲しい。。😥 それなら「RSC互換でパフォーマンスに優れたCSS-in-JSを⾃分で作ればいいのでは？」こうしてゼロランタイムかつUtility FirstなCSS-in-JS「Kuma UI」の開発に着⼿する。これが2023年3⽉終わりの出来事 How Kuma UI was born Kuma UIの登場

Slide 7

Slide 7 text

© 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった ②認知度の問題 - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した２つの困難

Slide 8

Slide 8 text

© 2023 THECOO inc. The hard things ①技術的な問題開発を続けて⾏く中でTaishi NaritomiさんとKotaro Sugawaraさんと⾔う超強⼒なお⼆⼈がKuma UIの思想に共感してくださり、コアメンバーとしてJoinしてくれた。 Naritomiさんはご⾃⾝でもゼロランタイムCSS-in-JSライブラリを作られていてドメイン知識が豊富だった。 KotaroさんはReact Hook Formのコアメンバーでもあり、経験に裏打ちされた推進⼒があった。

Slide 9

Slide 9 text

© 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった - 👉NaritomiさんとKotaroさんというスタープログラマの加⼊により⼀気に前進！ ②認知度の問題 - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した２つの困難

Slide 10

Slide 10 text

© 2023 THECOO inc.. OSSが流⾏る順序は先に英語圏の海外で話題になってその後天下り的に⽇本でも話題になるケースが⼤半。ボトムアップ的に国内ローカルで話題になって世界進出というのは基本的に無い（と思っていた）。 👉よって、⽇本国内で伸ばすためにもまずは海外をターゲットに伸ばす必要がある海外にリーチするためにMediumに英語で記事を書いてみたり、Redditに投稿したり、Hackernews で投稿したり、他OSSのIssueにコメントしたり⾊々試してみたけど全然伸びない The hard things ②認知度の問題

Slide 11

Slide 11 text

© 2023 THECOO inc.. そんな中、追い討ちをかけるようにKuma UIと似たようなコンセプトのUtility First Zero Runtime CSS-in-JSであるPanda CSSというOSSが発表され話題になる名前も似ている(🐼󰴜)上に機能もほぼ同じ、これではKuma UIの差別化ポイントが無い...? ...⼤ピンチ！！ Panda CSS joins the race Panda CSSの登場

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2023 THECOO inc.. - 俺たちが本当に欲しかったかったのは、ランタイムCSS-in-JSの書き味でパフォーマンスや互換性に優れたCSS-in-JSでは？ - ゼロランタイムかランタイムかの⼆項対⽴ではなく、静的に抽出可能なスタイルはゼロランタイムで、それ以外はランタイムで漸進的に切り替え得よう。 - これをHybrid CSS-in-JSと名付け、メジャーバージョンに向けて開発を進める...! Hybrid CSS-in-JS ⽬⽟機能、Hybrid CSS-in-JS誕⽣

Slide 14

Slide 14 text

© 2023 THECOO inc.. 技術的な部分は信頼できる最強メンテナのお2⼈に任せて、⾃分は技術以外の部分をやることにした - 公式ドキュメントの作成 - プロモーション動画の作成 - 公式Twitter, Discordの整備 - 冒頭でお話しした⾃分がコアコントリビュータを務める他のOSS（Million.js）のメンテナであるAiden⽒へのRT依頼 - 以前KumaをRTしてくれた海外のインフルエンサーに連絡 - Kotaroさんにご依頼してReact Hook Form作者にも連絡 - Zennの記事を執筆全ては来るべきリリース⽇に向けて.... End of Hibernation リリースに向けて

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 2023 THECOO inc. Looking back 振り返って思うこと OSSの良いところは、普段出会うことのない⾊々なプログラマが気軽にコントリビュートしてくれること。それがきっかけで⾊々な出会いがあったり、⾃分の学びにもなる。あとシンプルに楽しい。だから、気軽にやってみて良いと思う。敷居を必要以上に上げる必要はないし、殆どのOSSのメンテナはPRを投げてくれたら嬉しい。それに、⽇本の開発者コミュニティは温かい。もちろん批判する⼈もいるけど、多くの⼈は頑張っていれば応援してくれる。

Slide 20

Slide 20 text

© 2023 THECOO inc. The future of Kuma UI Kuma UIのその後新メンテナの加⼊その後、Chakra UI⽤のESLintプラグインを作っていてChakraのコントリビュータでもあるYuku Kotaniさんが新たにコアメンバーに加⼊していただけて、デザインシステム構築ツールとしてより盤⽯な体制になった Pandaチームとの交流 Panda CSS作者のSage⽒からKumaチームと Pandaチームのコラボレーション案も出た今後協⼒する可能性があるかも