Angular の単一ページ アプリケーション

1. シングル ページ アプリケーションのしくみ
2. 単一ページ アプリケーションを使用する利点
3. まとめ

Angular フレームワークは、一般に SPA として知られるシングル ページ アプリケーションの作成で主に知られています。

SPA は、Web ユーザーが Web ページ全体を完全にロードすることなく、Web サイト内のさまざまなリンクをナビゲートできるようにするアプリケーションです。 すべてのナビゲーションは同じページで実行されます。

SPA は、Web ブラウジングの世界で徐々に注目を集めています。 ほとんどのソーシャル メディア アプリは、サービスとしてのソフトウェア (SaaS) アプリケーションとも呼ばれ、単一ページのアプリケーションとして設計されています。

ユーザーは、Twitter などのソーシャル メディア アプリを使用しているときに、ブラウザーの同じフレーム内でタブ間を移動しているように見えることに気付くでしょう。 ユーザーは、メディア アプリが最初から読み込まれていることをほとんど確認できません。

シングル ページ アプリケーションのしくみ

従来の Web アプリケーションについて説明する場合、通常、データはサーバー側/バックエンドで HTML に変換されます。 しかし、シングルページ アプリケーションが初めて起動されると、レンダリング プロセスはサーバー側からクライアントに移動します。

HTML は、ユーザーが Web ページ内を移動するときにのみ、ネットワーク経由で送信されます。 そのため、SPA の実行時にデータのみがサーバーに送信されますが、HTML は同じままです。

これにより、Web ページの読み込みが速くなったように見えるため、ユーザー エクスペリエンスが大幅に向上します。 さて、誰が待たされるのが好きですか?

単一ページ アプリケーションを使用する利点

以下は、Angular などの単一ページ アプリケーションを使用する既知の利点です。

ユーザーエクスペリエンスの向上

単一ページのアプリケーションでのユーザー エクスペリエンスは、よりスムーズに感じられます。 ページが初めてロードされると、すべてのデータがクライアント側に送信されます。これにより、Web アプリケーションのロードのさまざまなセクション間のナビゲーションが高速になり、消費される帯域幅が少なくなります。

ウェブサイト作成のコストが安い

ユーザーが SPA をナビゲートするとき、SPA はより少ない帯域幅を消費します。 これは、構築中の Web サイトの所有者が帯域幅を購入する費用を削減し、完全に機能する Web サイトを作成するための全体的なコストを削減することを意味します。

導入の容易さ

SPA のクライアント側では、HTML、CSS、および Javascript バンドルを本番環境に簡単にデプロイできます。 必要なのは、これら 3つのファイルを提供するための静的サーバーだけです。

コード分割

コード分割を使用して、Web バンドルを複数の部分に分割できます。 特に、すでに完成したバンドルの一部を改ざんしないようにファイルのセクションで作業する必要がある場合に、ファイルのみを簡単に操作できます。

簡単にバージョンアップ

将来の調整とアップグレードを容易にするために、シングルページ アプリケーションのフロントエンド部分のバージョン管理は非常に簡単です。 したがって、以前のバージョンがある時点で完全に機能し、バグがなければ、開発者は必要に応じてこのバージョンに簡単にロールバックできます。

まとめ

SPA はまだ主流ではないため、Google のような Web アプリケーションは完全には機能しません。 これは、ページが SPA で適切にインデックス化されていないためです。

SPA を使用することの技術的な利点と使いやすさは、開発者が Amazon のような大規模な Web サイトが単一ページのアプリケーションで完全に機能することを保証する方法を探し続けることを意味します。