Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

概要

Vue (発音は /viu/、view に似ています) は、2014 年 2 月にリリースされた、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てているため、使い始めるのが簡単なだけでなく、サードパーティのライブラリ ( vue-router:跳轉、 vue-resource:通信、 vuex:管理など) や既存のプロジェクトとの統合も簡単です。

公式サイト: https://cn.vuejs.org/v2/guide/

フロントエンド知識システム

真の「インターネット Java フルスタックエンジニア」になるにはまだまだ長い道のりがありますが、その中でも「私はビッグフロントエンドです」は避けて通れない必修科目です。コースのこの段階の主な目的は、Java バックエンドプログラマーがフロントエンドを認識、理解、習得し、「インターネット Java フルスタックプログラマー」になるための新たな一歩を踏み出せるようにすることです。

フロントエンドの3つの要素

HTML (構造): ウェブページの構造と内容を決定するハイパーテキストマークアップ言語
CSS（式）：ウェブページの表示スタイルを設定するカスケーディングスタイルシート
JavaScript (動作): 弱い型付けのスクリプト言語です。ソースコードをコンパイルする必要はありませんが、ブラウザーによって解釈および実行され、Web ページの動作を制御します。

プレゼンテーション層 (CSS)

CSS はプログラミング言語ではなくマークアップ言語なので、変数をカスタマイズしたり参照したりすることはできません。つまり、構文サポートがありません。主な欠点は次のとおりです。

構文が十分に強力ではありません。たとえば、ネストできないため、モジュール開発ではセレクターが多数繰り返されることになります。
変数や合理的なスタイルの再利用メカニズムがないため、論理的に関連する属性値をリテラル形式で繰り返し出力する必要があり、保守が困難になります。

その結果、多くの不必要な追加作業が発生しました。この問題を解決するために、フロントエンド開発者は CSS プリプロセッサと呼ばれるツールを使用して、CSS に欠けているスタイルレイヤーの再利用メカニズムを提供し、冗長なコードを削減し、スタイルコードの保守性を向上させます。スタイル面でフロントエンド開発の効率を大幅に向上します。

CSS プリプロセッサとは何ですか?

CSS プリプロセッサは新しい言語を定義します。基本的な考え方は、特別なプログラミング言語を使用して CSS にいくつかのプログラミング機能を追加し、CSS をターゲットとして使用してファイルを生成し、開発者はこの言語を使用して CSS コーディングを行うだけで済むというものです。簡単に言えば、「特殊なプログラミング言語を使用して Web ページのスタイルを設計し、それをコンパイラーを介して通常の CSS ファイルに変換してプロジェクトで使用する」ことを意味します。

よく使われる CSS プリプロセッサは何ですか?

SASS: Ruby ベースで、サーバーによって処理され、強力です。高い解析効率。 Ruby 言語を学ぶ必要がありますが、これは LESS よりも始めるのが難しいです。
LESS: NodeJS をベースにしており、クライアントによって処理されるため、使いやすいです。 SASS よりも機能がシンプルで、解析効率も SASS よりも劣りますが、実際の開発では十分なので、弊社バックエンドスタッフは必要に応じて LESS の使用を推奨しています。

動作レイヤー (JavaScript)

JavaScript は弱い型付けのスクリプト言語です。ソースコードは、クライアントに送信して実行する前にコンパイルする必要はありません。代わりに、テキスト形式の文字コードがブラウザーに送信され、解釈されて実行されます。

ネイティブJS開発

ネイティブJS開発とは、ESと略される**[ECMAScript]**標準に従って開発することを意味し、すべてのブラウザでサポートされていることが特徴です。このブログ投稿時点では、ES 標準では次のバージョンがリリースされています。

ES3
ES4 (内部用、公式リリースされていません)。 ES5 (すべてのブラウザでサポートされています)
ES6 (一般的に使用されている、現在の主流バージョン: webpack パッケージが ES5 をサポートします!)
ES7
ES8
ES9

違いは、新しい機能が徐々に追加されることです。

TypeScript Microsoft 標準

TypeScript は、Microsoft が開発した無料のオープンソースプログラミング言語です。これは JavaScript のスーパーセットであり、基本的にオプションの静的型付けとクラスベースのオブジェクト指向プログラミングを言語に追加します。 Anders Hejlsberg (C#、Delphi、TypeScript の父、.NET の創始者) が主導。

この言語の特徴は、ES の機能に加えて、標準の範囲外の多くの新機能も組み込んでいるため、多くのブラウザは TypeScript 構文を直接サポートできず、ブラウザで正しく実行できるようにするにはコンパイル (JS にコンパイル) する必要があることです。

JavaScript フレームワーク

jQuery:よく知られている JavaScript フレームワークです。DOM 操作を簡素化できるという利点がありますが、DOM 操作が頻繁に行われるため、フロントエンドのパフォーマンスに影響するという欠点があります。フロントエンドの観点からは、IE6、7、8 との互換性のためだけに使用されます。
Angular: Google が買収したフロントエンドフレームワーク。Java プログラマーのグループによって開発されました。バックエンドの MVC モデルをフロントエンドに移行し、モジュール開発の概念を追加したのが特徴です。Microsoft と連携し、開発には TypeScript 構文を使用しています。バックエンドプログラマーには優しいですが、フロントエンドプログラマーにはそれほど優しくありません。最大の欠点は、無理なバージョンの繰り返しです (例: 第 1 世代 -> 第 2 世代、基本的に名前以外は 2 つの異なるもの。このブログの投稿時点では Angular 6 がリリースされています)。
React: Facebook が開発した高性能 JS フロントエンドフレームワークです。新しい概念 **[仮想 DOM] を提案し、実際の DOM 操作を減らし、メモリ内で DOM 操作をシミュレートして、フロントエンドのレンダリング効率を効果的に向上させるのが特徴です。欠点は、追加の **[JSX]** 言語を学習する必要があるため、使い方が複雑であることです。
Vue:プログレッシブ JavaScript フレームワーク。いわゆるプログレッシブとは、モジュール開発、ルーティング、状態管理などの新機能を段階的に実装することを意味します。その特徴は、Angular（モジュール性）とReact（仮想DOM）の利点を組み合わせていることです。
Axios:フロントエンド通信フレームワーク。Vue は DOM を処理するという明確な境界があるため、通信機能はありません。現時点では、サーバーと対話するには追加の通信フレームワークが必要です。もちろん、jQuery が提供する AJAX 通信機能を直接使用することもできます。

UIフレームワーク

Ant-Design: Alibaba の React をベースにした UI フレームワーク
ElementUl 、 iview 、 ice : Ele.me が制作、Vue の Ul フレームワークをベースとしています。
Bootstrap: Twitter がリリースしたフロントエンド開発用のオープンソースツールキット。
AmazeUl: 「Girl UI」としても知られる、HTML5 クロススクリーンフロントエンドフレームワーク

JavaScript ビルドツール

Babel: JS コンパイルツール。主に、TypeScript のコンパイルなど、ブラウザでサポートされていない新しい ES 機能のために使用されます。
WebPack:モジュールパッケージャー。主な機能は、パッケージ化、圧縮、マージ、ロードを順番に行うことです。

3つの端末の統合

ハイブリッドアプリ

主な目的は、3つの端末（PC、Android：.apk、iOS：ipa）を統合し、デバイスの基盤となるハードウェア（センサー、GPS、カメラなど）を呼び出せるようにすることです。パッケージ化の方法には主に2つあります。

クラウドパッケージ: HBuild -> HBuildX (DCloud によって作成)、API Cloud
ローカルパッケージ: Cordova (旧 PhoneGap)

WeChatミニプログラム

詳細については、WeChat公式サイトを参照してください。WeChatアプレットUIの開発を容易にするフレームワークは次のとおりです：WeUl

バックエンドテクノロジー

開発を容易にするために、フロントエンドの担当者も特定のバックエンド技術を習得する必要がありますが、当社の Java バックエンド担当者は、バックエンドの知識体系が非常に大きく複雑であることを認識しているため、フロントエンドの担当者がバックエンドアプリケーションを開発しやすくするために、NodeJS などの技術が登場しました。

NodeJS の作者は、NodeJS を放棄すると発表しました (貧弱なアーキテクチャと扱いにくい node_modules が作者を不満にさせた可能性があります)。そして、新しいアーキテクチャである Deno の開発を開始しました。

バックエンド技術なので、フレームワークとプロジェクト管理ツールは必ず必要です。NodeJS フレームワークとプロジェクト管理ツールは次のとおりです。

Express: NodeJS フレームワーク
Koa: 簡易版エクスプレス
NPM: Maven に似た包括的なプロジェクト管理ツール
YARN: NPM の代替。Maven と Gradle の関係に似ています。

主流のフロントエンドフレームワーク

js の

iView

iview は、elementui コンポーネントよりも豊富な実用的な基本コンポーネントを多数備えた、強力な Vue ベースの UI ライブラリです。主に、PC インターフェイスのミッドエンドおよびバックエンド製品に使用されます。 npm + webpack + babel 開発に基づく単一ファイル Vue コンポーネント開発モデルを使用し、ES2015 の高品質、機能豊富で使いやすい API をサポートし、スペースを自由かつ柔軟に使用します。

公式ウェブサイトのアドレス。
ギットハブ
iview 管理者

注: 主流のフロントエンドフレームワークであり、選択時に考慮できます。主な特徴は、より多くのモバイル端末をサポートしていることです。

要素Ul

Element は、Ele.me のフロントエンドオープンソースによって管理されている Vue Ul コンポーネントライブラリです。完全なコンポーネントセットがあり、基本的にバックエンドに必要なすべてのコンポーネントをカバーしています。ドキュメントは詳細で、例も豊富です。主にPCページの開発に使用され、高品質なVue Ulコンポーネントライブラリです。

注: 主流のフロントエンドフレームワークであり、選択時に考慮できます。主な特徴は、より多くのデスクトップ端末をサポートしていることです。

氷

Feibing は、React/Angular/Vue をベースにした Alibaba チームのミッドエンドおよびバックエンドアプリケーションソリューションです。Alibaba 内では、ほぼすべての BU の 270 を超えるプロジェクトで使用されています。 Feibing には、設計から開発までの完全なリンクが含まれており、ユーザーが独自のミッドエンドおよびバックエンドアプリケーションを迅速に構築するのに役立ちます。

注: 主要コンポーネントは依然としてReactに基づいています

ヴァントゥル

Vant Ul は、Youzan の統一仕様に基づいて Youzan のフロントエンドチームによって実装された Vue コンポーネントライブラリであり、Ul 基本コンポーネントとビジネスコンポーネントの完全なセットを提供します。 Vant を使用すると、統一されたスタイルでページをすばやく構築し、開発効率を向上させることができます。

ウット

at-ui は、Vue 2.x をベースにしたフロントエンド UI コンポーネントライブラリで、主に PC ウェブサイト製品の迅速な開発に使用されます。独立した CSS スタイルを備えた npm + webpack + babel フロントエンド開発ワークフローのセットを提供し、異なるフレームワークが使用されている場合でも統一された UI スタイルを維持できます。

キューブウル

cube-ui は、Vue.js をベースに Didi チームによって開発された洗練されたモバイルコンポーネントライブラリです。オンデマンド導入とポストコンパイルをサポートし、軽量で柔軟性があり、強力なスケーラビリティを備え、既存のコンポーネントに基づいて二次開発を簡単に実現できます。

UI を待ちます…

フロントエンド開発の歴史

バックエンドが支配するMVC時代

画像-20211019235236108

フロントコントローラ（ DispatcherServlet ）へのリクエストを開始する
フロントエンドコントローラは、 xml構成と注釈に基づいて見つかるHandler見つけるためにHandlerMappingを要求します。
ハンドラマッパーHandlerMapping 、フロントコントローラにHandlerを返します。
フロントコントローラはプロセッサアダプタを呼び出してHandlerを実行します。
Handlerを実行するためのプロセッサアダプタ
Handler実行が完了し、 ModelAndviewアダプタに返します。
外部プロセッサアダプタは、フロントエンドコントローラにModelAndView.ModelAndViewを返します。ModelAndViewは、 ModelとViewを含むSprineMvcフレームワークの基礎となるオブジェクトです。
フロントエンドコントローラはビューリゾルバにビュー解決を要求し、論理ビュー名を実際のビュー（JSP）に解決します。
ビューリゾルバはフロントコントローラにViewを返します。
フロントコントローラはビューのレンダリングを実行し、 requestフィールドにモデルデータ（ ModelAndViewオブジェクト内）を入力します。
フロントコントローラはユーザーに応答します

アドバンテージ

MVC は、コードの結合を効果的に削減し、開発者がアーキテクチャの観点からコードをどこに記述する必要があるかを理解できるようにする非常に優れたコラボレーションモデルです。 View をより純粋にするために、Thymeleaf や Freemarker などのテンプレートエンジンを使用して、テンプレートに Java コードが書き込まれるのを防ぎ、フロントエンドとバックエンドの分担を明確にすることもできます。

欠点

フロントエンド開発は開発環境に大きく依存しており、開発効率は低くなります。このアーキテクチャでは、フロントエンドとバックエンドの連携には 2 つのモードがあります。
- 1 つ目は、フロントエンドで DEMO を作成し、バックエンドでテンプレートを使用する方法です。利点は、DEMO をローカルで開発できるため、非常に効率的であることです。欠点は、バックエンドでテンプレートを適用する必要があり、それが間違っている可能性があることです。アプリケーションが完成したら、フロントエンドで確認する必要があり、コミュニケーションと調整のコストが比較的高くなります。
- もう 1 つのコラボレーションモードでは、フロントエンドがすべてのブラウザー側の開発とサーバー側のビューレイヤーテンプレートの開発を担当します。利点は、U 関連のコードはすべてフロントエンドでのみ記述すればよく、バックエンドにあまり注意を払う必要がないことです。欠点は、フロントエンド開発がバックエンド環境に大きく結びついており、環境がフロントエンド開発の効率に影響を与える重要な要素になることです。
フロントエンドとバックエンドの役割は明確ではありません。テンプレートエンジンは強力であり、取得したコンテキスト変数を通じてさまざまなビジネスロジックを実装できます。

このように、フロントエンドが少し弱い限り、バックエンドではテンプレート層に多くのビジネスコードを記述する必要が生じることがよくあります。大きな灰色の

ゾーンはコントローラーであり、ページルーティングなどの機能はフロントエンドが最も関心を持つ必要がありますが、バックエンドによって実装されます。

コントローラー自体はモデルと絡み合っていることが多く、人々を悩ませるビジネスコードはコントローラーレイヤーに現れます。これらの問題はプログラマーの質に完全に起因しているわけではなく、そうでなければ JSP で十分でしょう。

フロントエンドのパフォーマンスの制限：フロントエンドだけでパフォーマンスの最適化を行うと、スペースが非常に限られてしまうため、バックエンドとの連携が必要になることがよくあります。ただし、バックエンドフレームワークの制限により、**【Comet】、【BigPipe】**などの技術的ソリューションを使用してパフォーマンスを最適化することは困難です。

AJAXがもたらしたSPA時代

2005 年に AJAX (Asynchronous JavaScript And XML) が正式に提案され、CDN が静的リソースストレージとして使用されたことで、JavaScript が復活しました。

(それ以前は、JS は Web ページに犬の皮の絆創膏広告を掲載するために使用されていました) SPA (シングルページアプリケーション) の時代。

画像-20211020000329557

アドバンテージ

このモードでは、フロントエンドとバックエンド間の分担が非常に明確であり、フロントエンドとバックエンド間の重要な連携ポイントは AJAX インターフェースです。見た目はとても素晴らしいですが、振り返ってみると、JSP 時代とあまり変わりません。複雑さはサーバー上の JSP からブラウザ上の JavaScript に移行し、ブラウザ側が非常に複雑になりました。 Spring MVC と同様に、この時代にブラウザ用の階層化アーキテクチャが登場し始めました。

画像-20211020000443773

欠点

フロントエンドとバックエンドのインターフェースに関する合意: バックエンドのインターフェースが乱雑で、バックエンドのビジネスモデルが十分に安定していない場合は、フロントエンドの開発は困難になります。多くのチームも、インターフェースルール、インターフェースプラットフォームなどを使用して同様の試みを行っています。インターフェースルールをバックエンドと一緒に保存すると、データのシミュレーションにも使用できるため、フロントエンドとバックエンドはインターフェースについて合意した後、効率的な並行開発を実現できます。
フロントエンド開発の複雑さの制御: SPA アプリケーションは主に機能的かつインタラクティブであり、JavaScript コードが 100,000 行を超えることは普通です。大量の JS コードを整理し、それを View レイヤーにバインドするのは簡単な作業ではありません。フロントエンドが支配するMV*の時代

ここでのMV*モードは次のとおりです。

MVC (主に同期通信): モデル、ビュー、コントローラー。
MVP（主に非同期通信）：モデル、ビュー、プレゼンター
MVVM（主に非同期通信）：モデル、ビュー、ViewModel

フロントエンド開発の複雑さを軽減するために、 Angular]s 、 React 、 Vue.js 、 Ember]sなど、多数のフロントエンドフレームワークが登場しました。これらのフレームワークの一般的な原則は、最初にTemplates 、 ontrollers 、 Modelsなどのタイプごとにレイヤー化し、次に以下に示すようにレイヤー内で分割することです。

画像-20211020001037688

アドバンテージ

フロントエンドとバックエンドの責任は非常に明確です。フロントエンドはブラウザ側で動作し、バックエンドはサーバー側で動作します。明確な分業により並行開発が可能になり、テストデータのシミュレーションが容易になり、フロントエンドをローカルで開発できます。バックエンドはビジネスロジックの処理に集中し、RESTful およびその他のインターフェースを出力できます。
フロントエンド開発の複雑さは制御可能です。フロントエンドコードは重いですが、適切な階層化により、フロントエンドコードがそれぞれの機能を実行できます。これは非常に興味深いです。テンプレート機能を選択するという単純なことでも、多くの考慮が必要です。強力であればあるほど良いというわけではありません。何を制限し、どのような自由を残すか、コードをどのように構成するか、これらすべての設計を説明するには本一冊が必要になります。
比較的独立した展開：製品エクスペリエンスを迅速に改善できる

欠点

コードは再利用できません。たとえば、バックエンドでは依然としてデータに対してさまざまなチェックを実行する必要があり、検証ロジックではブラウザ側のコードを再利用できません。再利用できれば、バックエンドのデータ検証は比較的簡素化されます。
完全に非同期なので、SEO には適していません。多くの場合、サーバーは同期レンダリング用のダウングレードソリューションを実装する必要もあります。
特にモバイルインターネット環境では、パフォーマンスは最適ではありません。
SPA はすべてのニーズを満たすことはできず、依然として複数ページのアプリケーションが多数存在します。 URL の設計にはバックエンドの協力が必要であり、フロントエンドでは完全に制御することはできません。

NodeJSがもたらしたフルスタック時代

フロント部分に重点を置いたMV*モデルは多くの問題を解決しますが、前述のようにまだ多くの欠点があります。 NodeJS の登場により、JavaScript はサーバー上で実行できるようになりました。これは、R&D の新しいモデルが存在することを意味します。

画像-20211020001558659

画像-20211020001708173

この R&D モデルでは、フロントエンドとバックエンドの責任が非常に明確です。フロントエンドでは、2 つの UI レイヤーがそれぞれ独自の役割を担っています。

Front-end Ul layerブラウザレイヤーのプレゼンテーションロジックを処理します。スタイルは CSS を通じてレンダリングされ、インタラクティブ機能は JavaScript を通じて追加され、アプリケーションのシナリオに応じて HTML 生成もこのレイヤーに配置できます。
Back-end Ul layerは、ルーティング、テンプレート、データ取得、Cookie などを処理します。ルーティングを通じて、フロントエンドは最終的に URL デザインを独立して制御できるようになり、シングルページアプリケーションでもマルチページアプリケーションでも、フロントエンドは自由に調整できるようになります。バックエンドは、最終的にプレゼンテーションへの重点を取り除き、代わりにビジネスロジック層の開発に重点を置くことができます。

Node では、Web サーバー層も JavaScript コードであるため、一部のコードは前後で再利用できます。SEO が必要なシナリオはサーバー側で同期的にレンダリングでき、非同期リクエストが多すぎることによるパフォーマンスの問題もサーバー側で軽減できます。以前のモデルの欠点は、このモデルによってほぼ完全に解決できます。

JSP モデルと比較すると、フルスタックモデルは回帰しているように見えますが、確かに元の開発モデルへの回帰ですが、スパイラル回帰です。

NodeJS に基づくフルスタックモデルには、依然として多くの課題が残っています。

フロントエンドでは、サーバーサイドプログラミングをより深く理解する必要があります。例えば、TCP/IP などのネットワーク知識を習得すること。
NodeJS レイヤーと Java レイヤー間の効率的な通信。 NodeJS モードでは、すべてがサーバー側で行われるため、RESTful HTTP 通信は効率的でない可能性があり、SOAP やその他のメソッドを介した通信の方が効率的です。続行する前にすべてを検証する必要があります。
導入と運用および保守を十分に理解するには、より多くの知識ポイントと実践的な経験が必要です。
数多くの歴史的問題をどのように乗り越えていくか。これが最大の障害かもしれません。