Accelerating Large-Scale Test Migration with LLMs
By: Charles Covey-Brandt Airbnb recently completed our first large-scale, LLM-driven code migration, updating nearly 3.5K React component test files from Enzyme to use React Testing Library (RTL) instead. We’d originally estimated this would take 1.5 years of engineering time to do by hand, but — using a combination of frontier models and robust automation — we finished the entire migration in jus
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
デザインエンジニアの安田（@_yuheiy）です。 この記事では、社内向けに提供しているライブラリの使用状況を把握すべく作成した、プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。 ライブラリ開発の問題と使用状況の解析 弊社では、KARTEのプロダクト群全体のデザインシステムである「Sour」を開発しています。その一環として、React製のUIライブラリ「sour-react」を作成し、社内向けのnpmパッケージとして提供しています。現在、sour-reactはKARTEのいくつものプロダクトにおいて採用されており、UI開発に欠かせないものになるほど浸透しています。 作成したライブラリが広く使われるようになるのは喜ばしくもありますが、一方、それに伴って新たな問題が生じることもありま
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
CodeMirror v6によるZennのMarkdownエディタの作り方
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
Things you forgot (or never knew) because of React
Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
Working with Zustand
Global (client) state management wasn't always like it is today. I distinctly remember a time when our best option was Redux with higher order components using connect plus mapStateToProps and mapDispatchToProps. Even the context api, initially, wasn't as ergonomic to use (pun intended), as it only supported render props when it came out. Of course, everything changed when hooks were released. Not
The Basics of Remix | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. You’ve probably heard a lot of hype around one of the newest kids on the framework block, Remix. It may be surprising that it got its start back in 2019, but it was originally only available as a subscription-based premium framework. In 2021, the founders raised seed funding and open sourced the fr
textareaをカスタマイズできるReact用のライブラリを作成しました
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
Remix vs Next.js
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト アンビ（AMBI）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
Journey with Icons Continues
[[toc]] About one year ago, I wrote a blog post Journey with Icons, sharing the tools I have made for solving my needs on using icons in frontend projects. During this period, the Vite along its community has evolved quite a lot. The mindsets of Vite have inspired many projects to come up with efficient and innovative solutions. In this post, I will share the continuation of my journey with icons
React State Management Libraries and How to Choose
The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs. In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project. What is State? Just so we’re on the same page, let’s talk about state for a second. Every interactive app involves
How to Solve the Infinite Loop of React.useEffect()
useEffect() hook manages the side-effects like fetching over the network, manipulating DOM directly, and starting/ending timers. Although the useEffect() is one of the most used hooks along with useState(), it requires time to familiarize and use correctly. A pitfall you might experience when working with useEffect() is the infinite loop of component renderings. In this post, I'll describe the com
Ref objects inside useEffect Hooks
When making a custom hook that needs a reference to a DOM node, your first guess would be to use the new useRef hook. It was certainly mine. So naturally I went with that for my first implementation of Hooks in react-intersection-observer — But then an interesting issue came up, that I hadn’t considered. [Question] How would you handle conditional rendering with hooks? · Issue #162 ·… First, I'd l
preact コードリーディング
preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。 preact とは React の軽量版・サブセットです。 公式では Fast 3kB React alternative with the same modern API. Components & Virtual DOM. と説明されています。 (p)react には、 状態を持て、書き換えも可能である 状態を書き換えるとそれに対応して HTML が書き換わる という特徴があります。 それがどのようにして実現されているのかを見ていきましょう。 前提となる知識 preact のコードリーディングを進める上では VNode というオブジェクトに慣れる必要があります。 これは JSX を仮想 D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Moving Mountains: How We Migrated from Enzyme to React Testing Library
https://blog.sentry.io/2023/02/23/sentrys-frontend-tests-migrating-from-enzyme-to-react-testing-library/
How to avoid tricky async state manager pitfalls in React—Martian Chronicles, Evil Martians’ team blog