🦜

Duolingoが公開している利用OSライブラリを分析してみた

に公開
React Native
React
Swift
idea

先日Xでこのようなポストをしたところ、ありがたいことに思いのほか多くの反響がありました。

せっかくなので、この記事では英語学習アプリDuolingo(デュオリンゴ)が公開しているオープンソースライブラリを確認して、領域毎にどのようなライブラリを活用しているのかを分析してみようと思います。

参照しているDuolingoの公開記事
https://ja.duolingo.com/attribution

1. 全体を俯瞰した時の採用ライブラリの傾向

Duolingoの各クライアントで利用しているOSSを俯瞰したところ、以下のような傾向が見えてきました。

  • WebクライアントはReact + TypeScriptエコシステムが中心。状態管理にはReduxに加えて Jotaiなどモダンなライブラリも併用している。
  • iOS/Androidではフレームワーク標準やGoogle/Firebase系のSDKが多数採用されている。
  • UI・アニメーション表現のためにRiveやLottieといったマルチプラットフォーム対応のライブラリが揃っている。
  • 計測やトラッキングのSDK（Firebase、FullStory、Sentry など）が豊富で、ユーザー行動分析にかなり注力していることが伺える。
  • ネットワーク通信、データ永続化、メディア再生など、各領域で複数のOSSを使い分けている。

2. Webで利用されているOSS

2-1. React 本体と UI 周辺

2-2. UIレイアウト・スタイリング・アニメーション

2-3. フォーム・入力補助

2-4. アニメーション・メディア・描画

2-5. スクロール・リスト・バーチャル化

2-6. 状態管理・データフロー

2-7. ネットワーク / データ通信

2-8. 可視化・グラフ描画

2-9. 日付・テキスト処理・ユーティリティ

2-10. ビルド / 言語 / Lint周り

2-11. テスト関連

2-12. アナリティクス・トラッキング

2-13. 決済・認証・セキュリティ

3. iOSで利用されているOSS

iOS クライアントは Swift/Objective-Cの標準エコシステムを中心に、UIレイアウト・アニメーション・認証・クラッシュレポートまで広範囲のOSSを採用しているようです。

3-1. UI / レイアウト / グラフィックス

3-2. 認証 / セキュリティ / ネットワーク

3-3. ログ / デバッグ / クラッシュレポート

3-4. アニメーション / メディア

3-5. データ処理 / 低レベルツール

4. Androidで利用されているOSS

Androidクライアントは Kotlin/AndroidX/Google Play Services/Firebase の標準的な構成に加え、RxJava, Retrofit, Rive/Lottieなどで機能を拡張しているようです。

4-1. UI / レイアウト / AndroidX

4-2. ライフサイクル / ロジック / アーキテクチャ

4-3. ネットワーク / 通信

4-4. RxJava / 非同期処理

  • RxJava
  • RxAndroid
  • RxKotlin
  • Adapter: RxJava 3
  • RxJava Replaying Share
  • Room RXJava3
  • Android WorkManager RxJava3 support

4-5. アニメーション・グラフィックス・メディア

4-6. Firebase / Google / 広告・計測

4-7. デバッグ / 安定性向上

4-8. データ / 低レベルツール

まとめ

こうして一覧してみると、Duolingoが「必要だから入れている」ものと「歴史的に積み上がって残っている」もの、「ユーザー体験を磨くために攻めている」ものが入り混じっているのが見えているように思えます。特に Web は React/TSの巨大エコシステムの中から相当こまかく選択していて、iOS・Androidは各プラットフォームが持つ文化に寄り添いつつも RiveやLottieのような共通表現を積極的に採り入れている。このあたり、プロダクトとしての一貫性とチーム構成のリアルさがそのまま技術選定に滲んでいる気がします。

もちろん、OSSの羅列だけでは「なぜその選択肢だったのか」までは分かりませんが、クライアント間での表現統一や計測基盤の作り込みを見ると、Duolingoがユーザー体験と改善サイクルにどれだけ投資しているかがけっこうはっきり浮かび上がってきますね。普段目にする独特なUIの軽やかさに対して、裏ではかなり雑多な技術スタックが動いているというギャップも興味深いところです。

今回の自分用メモ的な分析がどこかしら参考になればうれしいですし、また面白いプロダクトのスタックを見つけたら同じように掘ってみようと思います。綺麗にまとまってないですが、このくらいで。

Discussion