big frontend

ビッグフレーズ

• Todo-Appを例として、前面と背面でさまざまなフレームワークやライブラリを体験してください。
• サーバーアドレスはhttp://localhost:8080です
• フロントエンドとバックエンドのインターフェイスは次のとおりです。
  • すべてのtodosを取得： {path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}]
  • 新しいtodoを追加： {path: '/api/todo', method: 'POST', status: 201, return: ''}
  • 指定されたtodoを完了または閉じます： {path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''}
  • 指定されたtodoを削除します： {path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}

バックエンドを完了しました

• {tech: 'spring-boot', tag: 'springboot-backend'}

Webフロントエンドを完了しました

• {tech: 'vuejs', tag: 'use-vue-frontend' }
• {tech: 'vuejs-vuex', tag: 'use-vuex'}
• {tech: 'react', tag: 'use-react'}
• {tech: ['react', 'redux'], tag: 'use-react-redux'}
• {tech: ['react', 'hooks'], tag: 'use-react-hooks'}
• {tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'}
• {tech: ['react', 'typescript'], tag: 'use-react-typescript'}
• {tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}

完成したコマンドラインフロントエンド

• {tech: ['react', 'ink'], tag: 'use-ink-cli'}

独立して実行できるフロントエンド

• {tech: 'jquery', tag: 'use-jquery-in-static-web' }
• {tech: 'javascript', tag: 'use-pure-javascript' }

目的

• フロントエンドとバックエンドの意味を理解します
• 複数のフロントエンドの違いと接続を理解します
• 大きなフロントエンドの重要性を理解します
• フロントエンドの主流の技術的枠組みを体験してください

フロントエンド、バックエンド

• フロントエンド：システム内のヒューマンコンピューターの相互作用に関するインターフェイスを設計および実装する
  • コマンドライン：コンソールプログラム。通常、C、C＃、Javaなどの言語を使用して実装されます。コマンドとパラメーターを使用した入力と出力、およびscanfとprintf
  • デスクトップ：ウィンドウ、メニュー、フォームなどのさまざまなグラフィックコントロールを使用して、キーボードやマウスなどのさまざまなデバイスを使用して入力と出力を完了します。一般的に使用されるテクノロジーには、MFC、Java Swing、QT、WPFなどが含まれます。
  • Web（H5）：デスクトップに似ていますが、ブラウザで実行されます。採用された技術には、主にHTML5、CSS3、およびJavaScriptが含まれます
  • モバイル：携帯電話をキャリアとして使用すると、一般的なモバイルデバイスにはAndroidとiOSが含まれます
  • ミニプログラム：インストールまたは展開する必要はなく、WeChatなどのアプリケーションで実行され、国で非常に人気があります。 WeChat Mini-Programs、QQミニプログラム、Baiduミニプログラム、Alipay Mini-Programs、クイックアプリケーションなど。
• バックエンド：サーバー側とも呼ばれます。一般的にデータとサービスを提供するために使用されます。
  • 一般的な処理手順
    • データはデータベースに保存されます
    • サーバーは、通常はHTTP要求であるフロントエンドからリクエストを受信します。
    • リクエストによれば、関連するビジネスロジックが呼び出され、計算結果が返されます
    • 計算結果によると、応答は返されます。これは一般にHTTP応答です。応答には、JSON、HTMLなどの複数の表現があります。
  • 一般的に使用されるテクノロジーとフレームワーク
    • Java EE、asp.net、php
    • 春、冬眠
    • ...
• 従来のアプリケーションの開発特性
  • フロントエンドとバックエンドで使用されるテクノロジースタックは統合されていません
  • 複数のフロントエンドで使用されるテクノロジースタックは統合されていません
  • フロントエンドとバックエンドの開発方法とアイデアは一貫していません
  • フロントエンドとバックエンドに同時に熟練したエンジニアを持つのは難しいです

大きなフロントエンド、フルスタック

• 2009年、Nodejsが生まれました

  • ブラウザからJavaScriptの実行環境を個別にリリースします
  • JavaScriptはホスト言語になります
  • 現在の最新バージョンは10.16.0です
  • バックエンドのエンジニアリングのアイデアに基づいて、NODEJに基づいた多くのライブラリ、フレームワーク、ツールが生成されました。
    • MVC：Angular/Vue/React（3つのフロントエンドフレームワーク）
    • Maven/Gradle：NPM/YARN
    • 依存関係注射：角注射/vue注射
    • ユニットテスト：Jest/Jasmine/Ava
    • シングルページアプリケーション（SPA）：ES6/BABEL/WEBPACK
    • 春：ネストイ
    • レスポンシブフレームワーク：RXJS
    • モジュラー：インポート/エクスポート
    • ...
  • 多くの新しい開発のアイデアと実践が作成されています
    • ステータス管理：Redux
    • コンポーネントUI：コードを再利用しやすい
    • 機能プログラミング：たとえば、反応フック
    • フロントエンドとバックエンドの間の境界は徐々にぼやけており、大きなフロントエンドの傾向が形成されています

• 大きなフロントエンド、フルスタック

  • nodejsに基づいて、JavaScript言語はバックエンド関数の実装を開始します
  • フルスタック：平均
    • MongoDB：JSON形式でデータを保存するNOSQLデータベース
    • Express：HTTPリクエストを処理できるサーバーバックエンドを開発するためのフレームワーク
    • Angular：MVVMを使用したフロントエンドUIフレームワーク
    • ノード：ノードを使用してモジュールを開発します
  • JavaScript言語を開発言語として使用し、開発フレームワークとして1つのフレームワークを使用し、複数のフロントエンドに同時に適応
    • H5エンド：基本的な反応フレームワーク
    • モバイル：iOSとAndroidの両方をサポートできるReact Frameworkに基づいてReactネイティブフレームワーク
    • デスクトップ：2019年5月にオープンソースであるMicrosoftが正式に開発したWindowsのネイティブReact Nativeで、現在安定したバージョンはありません
    • ミニプログラム、クイックアプリケーションなど：JD.comが開発したReactベースのTaroフレームワーク
    • コマンドライン：React Frameworkに基づくインクフレームワーク