React Flow Proの事例紹介 - Cartoのエンドユーザー体験を向上させる

Jesús Arroyo Torrens

Cartoのリードソフトウェアエンジニア

Cartoについて少し教えていただけますか？

CARTOはロケーションインテリジェンスプラットフォームです。お客様は、当社のデータカタログと分析ツールを活用して、空間に関する問題を解決できます。これは、Google BigQuery、Snowflake、Amazon Redshiftなど、最新かつ強力なクラウドデータウェアハウスと統合された、完全にクラウドネイティブなプラットフォーム上で行われます。

Cartoでのあなたの役割は何ですか？

フロントエンド開発者として、私は当社のプラットフォームの最高のUIとUXを実現することに努めています。その結果、私たちのチームは現在、エンドユーザー向けのアプリケーション（Workflows、Builder、Workspace）と、開発者向けのツールセット（CARTO for React、CARTO for deck.gl）の両方で、Reactエコシステムを中心としたスタックで作業しています。

React Flowを使用することにした理由は、どのような問題や決定に直面していたからですか？

私たちは、エンドユーザーが空間データを使用して分析プロセスを作成、共有、実行できる、使いやすく直感的なUIを提供したいと考えていました。これは従来、空間SQLの領域に大きな知識を持つ一部の専門家と、使いにくい環境（複雑なデスクトップツール、CLIなど）によってのみ行われていました。

現在、React Flowをどのように使用していますか？

React Flowは、ノーコードワークフローアプローチでデータ準備と分析パイプラインを自動化するための主要なビジュアルツールである「Workflows」に使用しています。これは、アセット管理とマップ作成のためのWorkspaceおよびBuilderツールと統合されています。

React Flowで特に便利だと感じた例を教えてください。

いくつかのツールを評価しましたが（別のライブラリで概念実証を開始したこともありました）、React Flowの詳細な分析後、その優れた設計のAPI、フックを使用した最新のReactコード、拡張性、そしてわかりやすいドキュメントのおかげで、すぐに移行しました。また、Proの例は機能を簡単に強化するのに非常に役立つことがわかりました。

React Flowサブスクリプションの機能は、これまでどのように役立ちましたか？

すべて役立っていると言えます。私たちは常にWorkflowsのUI/UXを改善したいと考えているため、たとえば、ミニマップがリリースされた直後にそれを導入しました。「元に戻すとやり直し」のProの例も、実装のインスピレーションを得るために使用しました。そして最近では、ノード上のキーボードイベントに関する小さな、しかし煩わしい問題を報告しましたが、すぐに対応され、パッチリリースに含められました。

途中でライブラリに問題はありましたか？

フロントエンドのコードベースへの統合は、最初から非常にスムーズでした。私たちは非常に自主的に統合を行うことができました。