Vue (1)-----フロントエンド開発の歴史

1。概要

Vue (/vjuː/ と発音、ビューに似ています) は、 2014 年 2 月にリリースされた、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。
他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。
Vue のコアライブラリはビュー層のみに焦点を当てているため、サードパーティのライブラリ (vue-router: Jump、vue-resource: communication、vuex: Management など) や既存のプロジェクトと簡単に統合できます。
公式サイト：https://cn.vuejs.org/v2/guide/

2. フロントエンドナレッジシステム

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

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

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

2.2. 構造層（HTML）

2.3. プレゼンテーション層（CSS）

CSS カスケードスタイルシートはマークアップ言語であり、プログラミング言語ではないため、変数をカスタマイズしたり、引用符で囲んだりすることはできません。言い換えれば、構文サポートがありません。その主な欠陥は次のとおりです。

この構文は十分強力ではありません。たとえば、ネストできないため、モジュール開発では多数のセレクターを繰り返し記述する必要があります。
変数と合理的なスタイル再利用メカニズムがなければ、論理的に関連する属性値をリテラルの形式で繰り返し出力する必要があり、保守が困難になります。
その結果、職場での仕事量が不当に増加しました。この問題を解決するために、フロントエンド開発者は [CSS プリプロセッサ] と呼ばれるツールを使用して、CSS に欠けているスタイルレイヤーの再利用メカニズムを提供し、冗長なコードを削減し、スタイルコードの保守性を向上させます。フロントエンドスタイルの開発効率が大幅に向上します。

CSSプリプロセッサとは

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

一般的に使用される CSS プリプロセッサは何ですか?

SASS: Ruby をベースにしており、サーバーを介して処理され、強力な機能を備えています。高い分析効率。必要

Ruby 言語を学ぶには、LESS よりも始めるのが難しいです。
LESS: NodeJS に基づいており、クライアントを通じて処理され、使いやすいです。SASSよりも機能がシンプルで、解析効率もSASSより低いですが、実際の開発では十分なので、バックエンド担当者が必要とする場合にはLESSを使用することをお勧めします。

2.4. ビヘイビア層 (JavaScript)

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

ネイティブネイティブJS開発

ネイティブJS開発とは、ESと呼ばれる[ECMAScript]の標準的な開発手法に準拠した開発を指し、すべてのブラウザがサポートしているのが特徴です。これまでに ES 標準は次のバージョンでリリースされています (違いは、新しい機能が徐々に追加されることです)。
- ES3
- ES4 (内部用、正式にリリースされていない)
- ES5 (フルブラウザサポート)
- ES6 (一般的に使用されている、現在の主流バージョン: ES5 をサポートするために webpack を通じてパッケージ化されています)
- ES7
- ES8
- ES9 (ドラフト段階)

TypeScript Microsoft の標準

TypeScript は、Microsoft によって開発された無料のオープンソースプログラミング言語です。これは JavaScript のスーパーセットであり、基本的にオプションの静的型付けとクラスベースのオブジェクト指向プログラミングを言語に追加します。Anders Helsberg (C#、Delphi、TypeScript の父、.NET の創設者) が率いる。
この言語の特徴は、ESの機能に加え、規格の範囲外の新機能も多く組み込んでいることであるため、多くのブラウザではTypeScript構文を直接サポートできず、コンパイル（JSへのコンパイル）が必要となります。ブラウザで正しく実行される前に。

JavaScript フレームワーク

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

UIフレームワーク

Ant-Design: Alibaba によって作成され、React に基づく UI フレームワーク
ElementUI、iview、ice: Vue ベースの UI フレームワークである Ele.me によって作成されます。
BootStrap: Teitter が立ち上げたフロントエンド開発用のオープンソースツールキット
AmazeUI: 「Meizi UI」とも呼ばれる、HTML5 クロススクリーンフロントエンドフレームワーク

JavaScript ビルドツール

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

注: 上記のナレッジポイントは、WebApp 開発に必要なすべてのスキルを整理しています。

2.5、三端同一

ハイブリッドアプリ

主な目的は、3 つの端 (PC、Android: .apk、iOS: .ipa) で一連のコードを統合し、デバイスの基礎となるハードウェア (センサー、GPS、カメラなど) を呼び出せるようにすることです。梱包方法には主に次の 2 つがあります。

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

WeChat アプレット

詳しくはWeChat公式サイトをご覧ください WeChatアプレットのUI開発を容易にするフレームワーク「WeUI」をご紹介します

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

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

Node JS の作者は、Node JS を放棄し (アーキテクチャがよくできておらず、重いノードモジュールが作者を不幸にする可能性があると述べた)、新しいアーキテクチャで Deno の開発を開始すると主張しました。

バックエンド技術であるため、必ずフレームワークとプロジェクト管理ツールが必要です。Node JS フレームワークとプロジェクト管理ツールは次のとおりです。

Express: ノード JS フレームワーク
Koa: Express 簡易版
NPM: Maven に似た包括的なプロジェクト管理ツール
YARN: Maven と Gradle の関係に似た、NPM の代替手段

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

Vue.js

ビュー

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

公式サイトアドレス：https://iviewui.com/
Github：https://github.com/iview/iview
iview-admin：https://www.worldlink.com.cn/en/osdir/iview-admin.html

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

要素UI

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

公式サイトアドレス：https://element.eleme.cn/
Github：https://github.com/ElemeFE/element
vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh/

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

氷

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

公式サイトアドレス：https://ice.work/
Github：https://github.com/alibaba/ice

注: 主要なコンポーネントは依然として React ベースですが、2019 年 2 月 17 日のブログ更新時点では、Vue のサポートはまだ完了しておらず、まだ様子見の段階です。

VantUI

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

公式サイトアドレス：https://youzan.github.io/vant-weapp/#/intro
Github：https://github.com/youzan/vant

AtUI

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

公式サイトアドレス：https://at-ui.github.io/at-ui/#/zh
Github：https://github.com/aliqin/atui

キューブウル

cube-ui は、Didi チームが開発した Vue js をベースにした精巧なモバイルコンポーネントライブラリです。オンデマンドの導入とポストコンパイルをサポートし、軽量かつ柔軟で、強力な拡張性を備え、既存のコンポーネントに基づいた二次開発を簡単に実装できます。

公式ホームページアドレス：http://www.cubeent.co.kr/
Github：https://github.com/square/cube

ハイブリッド開発

Flutter
Flutter は Google のモバイル UI フレームワークで、Android および iOS 上で高品質のネイティブアプリケーションを非常に短時間で構築できます。Flutter は既存のコードで動作し、世界中の開発者や組織によって使用されており、Flutter は無料でオープンソースです。

公式サイトアドレス：https://flutterchina.club/
Github：https://github.com/flutter/flutter

注: Google によって作成され、ネイティブ APP アプリケーションを迅速に構築することが主な特徴であり、ハイブリッドアプリケーションを実行する場合、このフレームワークは必須です。

lonic
Lonic は、CSS フレームワークと Javascript UI ライブラリの両方であり、現在最も有望な HTML 5 モバイルアプリケーション開発フレームワークです。SASS を通じてアプリケーションを構築します。SASS は、開発者が強力なアプリケーションを開発するのに役立つ多くの UI コンポーネントを提供します。JavaScript MV VM フレームワークと Angular JS/Vue を使用してアプリケーションを強化します。データの双方向バインディングを提供し、Web 開発者やモバイル開発者にとってその使用が一般的な選択肢になります。

公式サイトアドレス：https://ionicframework.com/
公式ウェブサイトのドキュメント: http://www.ionic.wang/js_doc-index.html
Github：https://github.com/tonib/kaichronicles

WeChat アプレット

mpvue
mpvue は Meituan が開発したフロントエンドフレームワークで、Vue.js を使用してミニプログラムを開発しており、現在 WeChat ミニプログラム、Baidu スマートミニプログラム、Toutiao ミニプログラム、および Alipay ミニプログラムをサポートしています。このフレームワークは Vue.js に基づいており、変更されたランタイムフレームワークランタイムとコードコンパイラコンパイラの実装により、ミニプログラム環境での実行が可能になり、Vue.js の開発経験をミニプログラム開発に導入できます。

公式サイトアドレス：http://mpvue.com/
Gitハブ：https://github.com/Meituan-Dianping/mpvue

注: 完全な Vue 開発経験があり、マルチプラットフォームミニプログラム開発をサポートしていることを推奨します。

WeUI
WeUI は、WeChat のネイティブなビジュアルエクスペリエンスと一致する基本的なスタイルライブラリのセットであり、WeChat の公式デザインチームによって WeChat Web ページおよび WeChat ミニプログラム用に調整されており、ユーザーの使用認識がより統一されます。ボタン、セル、ダイアログ、トースト、記事、アイコンなどのさまざまな要素が含まれています。

公式サイトアドレス：https://weui.io/
Github：https://github.com/Tencent/weui

3. 表裏分離の進化の歴史を理解する

なぜ表と裏を分ける必要があるのでしょうか？

3.1. バックエンド指向の MVC 時代

開発の複雑さを軽減するために、バックエンドが開始点となります。たとえば、Struts、Spring MVC、その他のフレームワークの使用は、バックエンドの MVC 時代です。例として Spring MVC プロセスを取り上げます
。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが存在する可能性があります。画像を保存して直接アップロードすることをお勧めします (img-tHHS6KLK-1652427411440) (C:\Users\zhangwei\AppData\Roaming\Typora\) typora-user-images\ image-20220513153414606.png)]$

フロントコントローラーへのリクエストを開始します ( Dispatcher Servlet)
フロントエンドコントローラーはHandlerMapping検索を要求しますHandler。検索はxml構成と注釈に基づいて検索できます。
プロセッサマッパーがHandlerMappingフロントエンドコントローラーに戻りますHandler
フロントエンドコントローラーはプロセッサアダプターを呼び出して実行します。Handler
実行するプロセッサアダプターHandler
Handler実行が完了したらアダプターに戻りますModelAndView
プロセッサアダプタはフロントエンドコントローラに戻りModelAndView、ModelAndViewSpringMvc フレームワークの基礎となるオブジェクトですModel。View
フロントエンドコントローラーは、ビュー解析を実行し、それを論理ビュー名に基づいて実際のビュー (JSP) に解析するようにビューパーサーに要求します。
ビューリゾルバーがフロントエンドコントローラーに戻りますView
フロントコントローラーはビューのレンダリングを実行し、フィールドにモデルデータ (オブジェクト内ModelAndView)を設定します。request
フロントコントローラーは結果をユーザーに返します。

アドバンテージ

MVC は、コードの結合を効果的に削減し、開発者がアーキテクチャ上のどこにコードを記述すべきかを理解できる、非常に優れたコラボレーションモデルです。ビューをより純粋にするために、Thyme リーフや Free マーカーなどのテンプレートエンジンを使用して、テンプレートに Java コードが記述されるのを防ぎ、フロントエンドとバックエンドの分業を明確にすることもできます。

欠点がある

フロントエンド開発は開発環境に大きく依存しており、開発効率が低くなります。このアーキテクチャでは、フロントエンドとバックエンドのコラボレーションには次の 2 つのモードがあります。
- まず、フロントエンドでデモを作成し、作成後バックエンドにテンプレートを適用させます。利点は、デモをローカルで開発でき、非常に効率的であることです。欠点は、テンプレートをバックエンドにインストールする必要があることですが、これは間違っている可能性があり、テンプレートをインストールした後もフロントエンドで確認する必要があり、往復の通信と調整のコストが比較的高くなります。高い;
- もう 1 つのコラボレーションモデルは、フロントエンドがブラウザ側のすべての開発とサーバー側のビューレイヤーテンプレートの開発を担当することです。利点は、UI 関連のコードをフロントエンドで記述でき、バックエンドにあまり注意を払う必要がないことですが、欠点は、フロントエンド開発がバックエンド環境に大きく束縛されることです。そして環境はフロントエンド開発の効率に影響を与える重要な要素となっています。
フロントエンドとバックエンドの責任は絡み合っています。テンプレートエンジンは強力であり、取得したコンテキスト変数を通じてさまざまなビジネスロジックを実装できます。このように、フロントエンドが弱い限り、バックエンドはテンプレート層に多くのビジネスコードを記述する必要があることが多く、コントローラーにも大きなグレーゾーンが存在します。フロントエンドが最も懸念すべきことですが、実際にはバックエンドによって実装されます。Controller本体とModelは絡み合っていることが多く、Controller層には歯を食いしばるような業務コードが登場することが多い。これらの問題のすべてがプログラマの品質に起因するわけではありません。そうでない場合は、JSP で十分です。
フロントエンドの制限: フロントエンドのみでパフォーマンスの最適化を行う場合、スペースが非常に限られているため、バックエンドの連携が必要になることがよくありますが、バックエンドのフレームワークの制限により、それは困難です。 [Comet] や [Big Pipe] などの技術ソリューションを使用してパフォーマンスを最適化します。

注: 初期の JSP と PHP を含むこの期間 (2005 年以前) は、Web 1.0 時代と呼ぶことができます。ここで言いたいのは、もしあなたが Java 初心者なら、JSP などの古いテクノロジーを真剣に考えるのはやめてください。時代は変化し、テクノロジーは変化し、すべてが変化しているからです (ザッカーバーグの言葉を引用)唯一変わらないのは変化そのものです); 現代の大学生はまだ授業で古いことを学んでおり、その知識が重要なポイントであると考えています。実際にはそうではありません。あなたの認識の中の無味乾燥な情報は、それはもうずっと前に時代遅れになっただけです

3.2. AJAX に基づく SPA の時代

時は 2005 年に遡りますAJAX(Asynchronous JavaScript And XML、非同期 JavaScript と XML、古い技術と新しい使用法) が正式に提案され、CDN が静的リソースストレージとして使用され始めたため、JavaScript の王の復活が現れました (これ以前は JS が使用されていました)。 Web ページ (シングルページアプリケーション) SPA (シングルページアプリケーション) で使用され、犬の皮の絆創膏の広告が掲載されています。

アドバンテージ

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

ここに画像の説明を挿入します

欠点がある

フロントエンドとバックエンドのインターフェイスに関する合意: バックエンドのインターフェイスが混乱していて、バックエンドのビジネスモデルが十分に安定していない場合、フロントエンドの開発は非常に困難になります。多くのチームが同様の試みを行っています。インターフェイスルール、インターフェイスプラットフォームなどを通じてバックエンドとともにインターフェイスルールが生成されるため、データのシミュレーションにも使用できるため、フロントエンドとバックエンドはインターフェイスを合意した上で効率的な並行開発を実現できます。
フロントエンド開発の複雑さの制御: SPA アプリケーションはほとんどが機能的で対話型であり、JavaScript コードが 100,000 行を超えるのは通常です。大量の JS コードの整理、View レイヤーへのバインドなどは簡単な作業ではありません。

3.3. フロントエンド指向のMVC時代

ここでの MVC パターンは次のとおりです。

MVC（主に同期通信）：モデル、ビュー、コントローラー
MVP (主に非同期通信): モデル、ビュー、プレゼンター
MVVM (主に非同期通信): モデル、ビュー、ビューモデルフロントエンド開発の複雑さを軽減するために、、、などのフロントエンドフレームワークが多数登場しています。これらのフレームワークの一般Angular JS原理以下に示すように、最初にテンプレート、コントローラー、モデルなどのタイプ別に階層化し、次にレイヤー内で分割します。ReactVue.jsEmber JS

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが存在する可能性があります。画像を保存して直接アップロードすることをお勧めします (img-lwYUwJ0S-1652427411442) (C:\Users\zhangwei\AppData\Roaming\Typora\) typora-user-images\ image-20220513153232548.png)]$

アドバンテージ

フロントエンドとバックエンドの責任は非常に明確です。フロントエンドはブラウザ側で動作し、バックエンドはサーバー側で動作します。明確な分業により並行開発が可能になり、テストデータのシミュレーションは難しくなく、フロントエンドはローカルで開発できます。バックエンドはビジネスロジックの処理に集中し、RESTful インターフェイスやその他のインターフェイスを出力できます。
フロントエンド開発の複雑さは制御可能です。フロントエンドコードは重いですが、適切な階層化によりフロントエンドコードがその役割を実行できます。これは非常に興味深いもので、テンプレート機能の選択と同じくらい簡単ですが、注意すべき詳細がたくさんあります。強力であればあるほど良い、どのような制限があるのか、どのような自由が残されているのか、コードはどのように編成されるべきなのか、これらすべての設計を説明するには一冊の本が必要になります。
導入は比較的独立しているため、製品エクスペリエンスはすぐに向上します。

欠点がある

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

3.4. Node JS がもたらすフルスタック時代

フロントエンド指向の MVC モデルは多くの問題を解決しますが、前述したように、まだ多くの欠点があります。Node JS の台頭により、JavaScript がサーバー側で実行できるようになりました。これは、新しい研究開発モデルが存在する可能性があることを意味します

この研究開発モデルでは、フロントエンドとバックエンドの責任が非常に明確です。フロントエンドの場合、2 つの UI レイヤーがそれぞれの役割を実行します。

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

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

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

Node JS に基づくフルスタックモデルは依然として多くの課題に直面しています。

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

3.5. 概要

要約すると、モデルやテクノロジーに良い悪いはなく、適切かどうかだけがあり、前後分離の開発思想は主に SoC (関心事分離の原則) に基づいています。すべてのモデルでフロントエンドとバックエンドが可能になり、責任がより明確になり、分業がより合理的かつ効率的になります。