- Original: Crunchbase And Angular: Why We Made The Transition - Crunchbase
- Written by: Justin Appler, Director of Engineering, Applications at Crunchbase
- Translated at: 2021-03-04
2017 年 11 月、Crunchbase.com は新しいウェブプラットフォームでリニューアルしました。何百万人もの Crunchbase ユーザーを新しいサイトに移行しましたが、ダウンタイムはほとんどなく、SEO への悪影響もありませんでした。新しいウェブプラットフォームは今後数年にかけてサイトとプロダクト、そして会社の成長を可能にするために構築されました。
その過程で下した数多くの決定の中で、最も重要だったのは新しいウェブプラットフォームのフロントエンドをAngularで構築することでした。私たちは自由に使える優れたフレームワークを評価し、いくつかの重要な理由からここにたどり着きました。私たちは今でもこの決断は正しかったと信じています。また、同じような決断を迫られている人たちが私たちの経験と見識を活用できるように、その理由も共有したいと思います。
Crunchbase の歴史をちょっとだけ
2017 年以前、Crunchbase.com は Ruby on Rails のモノリシックアーキテクチャで構築されていました。最初の頃はこれが非常に役立っていて、Crunchbase は月に数千人のユーザーしかいなかったものを数百万人のユーザーにまで成長させることができました。
2015 年、Crunchbase は AOL/Verizon から分離独立し、あらゆるバックグラウンドのイノベーターにビジネスチャンスへのアクセスを民主化するというコアミッションのもと、民間企業としての冒険に乗り出しました。この新しいミッションの一環として、Crunchbase は少なくとも 2 つの部分で構成されなければならないことがわかっていました。ひとつは高性能かつ SEO にも配慮し、多くの人に知られ愛されるウェブサイト。そしてもうひとつは人々の仕事を手助けする場所となる、プロフェッショナルなビジネスアプリケーションのためのプラットフォームです。
この 2 つの部分は、Crunchbase が同時に多くのことをしなければならないことを意味しています。高速で、インデックス化が可能で、アクセスしやすいだけでなく、リッチなビジネスアプリケーションや人々が期待するモダンなウェブ体験をサポートする必要がありました。
Angular の道へ
私たちが Angular プラットフォームを選択した最大の理由の一つは、それがまさにプラットフォームであるということです。HTTP、ルーティング、フォーム管理、ローカリゼーション、そして Angular Material を使ったコンポーネントライブラリまでテスト済みのものがすぐに用意されています。これらはすべてクリーンで一貫して動作することが保証されているだけでなく、アップデートも並行して行われるため、各依存関係の互換性を評価する必要がなく、新しいバージョンに簡単に移行することができます。
小さなチームにとって、これは大切な機能です。はじめの頃、私たちはたった 2 人のフロントエンドのエンジニアしかいませんでした！メジャーバージョンのアップグレードには数週間、数ヶ月、あるいは数年かかることもありましたが、Angular CLI と “ng update” のおかげで、最新のメジャーバージョンのアップグレードには数時間しかかかりませんでした。
私たちのアプリケーションは、パフォーマンスの高いパブリックなウェブサイトとビジネスアプリケーションの 2 つの部分から構成されているため、マルチページとシングルページアプリケーションの両方の利点を必要としていました。当時は成長中のコミュニティプロジェクトだった Angular Universal が解決策を提供してくれました。私たちは、Node.js とブラウザの両方で動作するひとつのアプリケーションを TypeScript で構築することができました。
両方のプラットフォームの API をどのように使うかを意識していれば、プラットフォームに依存しない方法でアプリケーションを構成し、Angular 組み込みの依存性注入フレームワークを利用してそれぞれの環境で「正しいことをする」ことができました。私たちがアイソモーフィックなアプリケーションの初期バージョンを構築したときから比べると、他のフレームワークでこの種の作業を行うことは簡単になりましたが、Angular チームと大きな Angular コミュニティからの早期のコミットメントと認知により、わずか数週間でこの機能を構築することができました。
私たちがサーバーサイドレンダリングを必要とした主な理由のひとつは SEO です。Crunchbase には何百万もの企業や個人のプロフィールがあり、ページがインデックスされやすく検索しやすいことが重要です。また、完全にセマンティックな HTML を提供することで、検索エンジンが数週間ではなく数時間以内にコンテンツの最新版を入手できるようになります。パフォーマンスも SEO の重要な要素です。サーバーサイドレンダリングには、ウェブサイトの知覚的なパフォーマンスの重要な指標である First Contentful Paint を向上させるという付加的な利点があります。ページロード時間は直帰率と非常に高い相関関係があるため、ページロードパフォーマンスを改善することで、プロダクトの品質を向上させることができます。
チームが Angular を愛用している技術的な理由はいくつかあります。第一に、始めるのが信じられないほど簡単だということです。“ng new” と入力するだけですぐに始められますし、一般的なニーズのためにライブラリを評価する必要もありません（そのまますぐに使えるようになっています）。さらに、依存性の注入や TypeScript を使った静的型付けなど、Angular は最初からアーキテクチャのベストプラクティスを使用しているため、よくある落とし穴に陥るのを防いでくれます。また、Angular はモジュール化を可能にする強力な機能も提供しています。例えばルーティングライブラリは、ほとんど設定なしでモジュール全体の遅延ロードをサポートしています。
最後に、Angular コミュニティ全体の価値に注目することは非常に重要です。私たちはその一員であることを誇らしく思っています。今も昔も変わらず強く、Angular は昨年 NPM で 40%近く成長しており、React よりも 約 6%高くなっています（どちらも急速に成長していることは注目に値します。フロントエンドはエキサイティングな時代です！）。私たちは、ミートアップに参加したりホストしたり、カンファレンスや基調講演に参加したり、様々なバックグラウンドを持つエンジニアを集めて、フロントエンド開発のエキサイティングな未来について話し合う機会を得てきました。私たちは、これまでに出会った人たちや一緒に仕事をした人たちにいつも感銘を受け、刺激を受けてきました。
Crunchbase と Angular のこれから
5 年前にこの旅を始めた時と同じように、Angular と Crunchbase の未来にワクワクしています。数多くの新機能を発表し、UI を改善・簡素化し、Diversity Spotlight イニシアチブの立ち上げなど、ビジネスチャンスへのアクセスを民主化するというミッションを達成するための重要なステップを踏みました。その間、私たちは Angular の各メジャーバージョンをアップグレードし、その継続的な進歩の恩恵を受けてきました。他の優れたエンジニアリング組織と同様に、将来に向けて正しい選択をしているかどうかを再評価し続けていますが、現状では Angular は私たちにとって良い選択であることに変わりはありません。
私たちがなぜどのようにして Angular を使うことを決めたのかということについての見識を提供できていれば幸いです。ウェブ上で構築するための強力な選択肢がこれほど多くあることは信じられないほど幸運なことです。Crunchbase、Angular チーム、そしてコミュニティ全体のパートナーシップは、私たちの組織にとって大切でポジティブなものであり続けています。
ミートアップやカンファレンスでお会いした際には声をかけていただけると嬉しいです。
この記事はオリジナルの筆者に許可を取った上で翻訳したものです。
ひとつのスタートアップ企業が Angular への移行を決断し、その後もミッション達成のためプロダクトを改善し続けている事例として、より多くの人に知ってもらうのにとてもよい記事だと思い個人的に紹介させてもらいました。 4 月 22〜23 日に開催される最大の Angular カンファレンス ng-conf 2021 でもさまざまな企業が Angular を選んでいる実際の事例と出会うことができるはずです。 基調講演だけのチケットは無料なので、興味があればぜひ Angular コミュニティの今を見に来てください。