SPAフレームワークライブラリ応答、Vue、Angular

2810 ワード

スパって何?


SPAコンセプト


1ページアプリケーション(SPA):1ページアプリケーションとしてのWeb開発手法の1つ.
一般に、クライアント/Webブラウザ(フロントエンド)は、画面に表示されるデータ(html、javascript、cssなど)をサーバ(バックエンド)に要求し、サーバは要求されたファイルをクライアントに送信する.
ただし、SPAはJavaScript更新でクライアントが必要な部分のみを使用します.
これは、SPAアプリケーションにhtml、css、javascriptなどのすべての情報が内蔵されており、新しいデータが必要な場合にのみサーバAPIを呼び出し、必要なデータだけをロードして画面に表示することを意味します.

1ページは1種類ですか?


NO👎
  • ユーザに1ページ表示されているが、ユーザが必要とするページと現在のユーザブラウザのアドレス状態に応じて異なる画面を表示することができる.
  • の異なるアドレスに異なる画面を表示することをルーティングと呼ぶ.
  • リアクションルーティングライブラリ

  • 反応ルータ
  • 中継ルータ
  • Next js
    あるって.
  • SPAの欠点


    つまり、アプリケーションの規模が大きいほどJavaScriptファイルが大きくなります.(これは、ページのロード時に実際のユーザーがアクセスしない可能性のあるページのスクリプトもロードされるためです)
    1つの解決策は코드 스플리팅(code splittiing)です
    SEO,Closerではページ情報を収集できないため,ページ検索が困難である.(Google、NAVER、次)など大手ポータルサイトでは検索できない場合があります.
    どうしてこんなことになったの?
    RECTの場合はindexです.htmlファイル
    <div id="root"></div>
    私たちはindexですにある
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    JavaScriptがロードされるまでDOMは空だったそうです.
    (ページが空で、ロード待ち時間が短く、JavaScriptが実行されるまで画面に空白のページが表示されます.)

    SPAフレーム、ライブラリ(react、Vue、Angular)


    サーバ上のコード(バックエンド)よりもブラウザ上のコード(フロントエンド)を重視し、SPAをよりよく駆動します.

    はんのう

  • Facebookは
  • をサポート
  • 一方向バインド(モデル->ビュー)
  • Virtual DOM
  • jsx(js言語でhtmlタグを使用)
  • コンポーネント(コード剥離用)
  • 桜(Angular)

  • は、Googleが
  • をサポートしています.
  • 双方向バインド(モデル<->ビュー)
  • タイプのスクリプト(タイプが明確で、目標の上昇/下降)に基づく
  • ビュー(Vue)

  • 個人サポート
  • 双方向バインド(モデル<->ビュー)
  • Virtual DOM
  • 比較的簡単な文法