Kuma UI はどのように React Server Components をサポートしているのか
はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App Router 非対応等の理由から、ゼロランタイム CSS ライブラリへの移行を検討しています。このような背景から、ゼロランタイム CSS に関する話題が社内で頻繁に取り上げられています。 そこで本記事では、その中でも私がメンテナとして関わっている Kuma UI がどのように React Server Components をサポートしているかを詳しくご紹介します。 Kuma UI とは? Kuma UI は、新しい手法であ
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
和製CSS-in-JSライブラリの Kuma UI はHybrid Approachという新たな手法によって、優れたパフォーマンスを実現しています。この手法の仕組みから、「なぜKuma UIが速いのか」を紹介します。 Hybrid Approach とは Hybrid Approach とは一言で言うと、EmotionやChakra UIのような従来型のランタイムCSS-in-JSの書き味を完全に保ちながら、できる限りゼロランタイムに変換する手法です。 具体例を見てみましょう。Kuma UI では、クリックすると文字色が変わるボタンを以下のようにChakra UIっぽく書くことができます。 import { Box } from "@kuma-ui/core"; export default function App() { const [colored, setColored] = us
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
