フロントエンドエンジニアリングの簡単な歴史-jsチュートリアル-php.cn

A Brief History of Frontend Engineering

フロントエンドエンジニアリングの概要

フロントエンドエンジニアリングとは、一連のツール、手法、プロセスを通じてフロントエンド開発を体系化、自動化、標準化し、それによって開発効率、コード品質、プロジェクト管理能力を向上させることを指します。

具体的には、フロントエンドエンジニアリングは次の側面をカバーします:

モジュール開発: 複雑なフロントエンドアプリケーションを独立した再利用可能なモジュールまたはコンポーネントに分解して、コードの保守性を向上させ、チームのコラボレーションを促進します。
自動化ツールチェーン: コードパッケージ化 (Webpack)、コンパイル (Babel)、テスト (Jest)、コードスタイルチェック (ESLint) など、フロントエンド開発の反復タスクを自動化するさまざまなツールを使用します。コードのフォーマット (Prettier)。これらのツールは人的エラーを減らし、開発効率を高めます。
バージョン管理: Git などのシステムを使用してコードのバージョンを管理し、共同開発の一貫性を確保し、バージョン追跡を実装し、マルチバージョン開発をサポートします。
継続的インテグレーション/継続的デリバリー (CI/CD): 自動化を通じて開発、テスト、デプロイのプロセスをシームレスに接続し、すべてのコード変更が安全かつ迅速に更新されるようにします。
環境管理とクロスプラットフォームのサポート: ビルドおよびデプロイメントツール (Docker、Node.js) を使用して開発環境と運用環境を管理し、さまざまなプラットフォームや環境間での一貫性と信頼性を確保します。
パフォーマンスの最適化: コード圧縮、キャッシュ、遅延読み込みを通じてアプリケーションの読み込み速度と応答速度を向上させ、ユーザーエクスペリエンスを向上させます。
チームのコラボレーションとコード仕様: コード仕様 (JavaScript および CSS 仕様) を確立および施行し、コードレビューツール (GitHub Pull Request) を使用してチーム内で一貫したコードスタイルを維持し、メンテナンスコストを削減します。。

フロントエンドエンジニアリングの目標は、体系的なプロセスとツールを導入することで、従来のフロントエンド開発における効率の低さ、コード品質の一貫性のなさ、コラボレーションの難しさなどの課題を解決し、より効率的で安定した開発プロセスを実現することです。

フロントエンドエンジニアリングの進化

フロントエンドエンジニアリングの開発は、技術の進歩と開発ニーズの変化に応じて徐々に進化するプロセスであり、単純な Web 開発から、今日の高度に自動化されたモジュール化された標準化されたプロセスまで発展しました。 Node.js の出現は、この進化プロセスにおける重要な転換点であり、フロントエンドエンジニアリングに強力なサポートを提供し、フロントエンド開発ツールチェーンを完全に変えます。以下は、フロントエンドエンジニアリングの完全な進化プロセスです:

1. 静的 Web サイトの時代: フロントエンド開発の芽 (1990 年代半ばから 2000 年代初頭)

インターネットの初期の頃、Web サイトは主に静的な HTML ファイル、CSS で制御されたスタイル、および単純なインタラクティブ効果を実装した JavaScript で構成されていました。フロントエンド開発は非常に基本的なもので、静的なコンテンツが大半を占め、ワークフローは手動操作に大きく依存しています。開発者は通常、テキストエディタでコードを直接記述し、ブラウザで結果を確認しますが、ファイルシステムを使用してコード構成を管理しますが、バージョン管理ツールやコラボレーションツールが不足しています。

2. 動的 Web サイトの時代: 初期のエンジニアリング要件 (2000 ～ 2005 年)

インターネットの普及と技術の進歩に伴い、PHP、ASP、JSP などの動的 Web ページ技術が普及し、ユーザー入力やデータベースコンテンツに基づいて Web ページを動的に生成できるようになりました。この期間中、フロントエンドとバックエンドの間の責任の境界があいまいになり始め、フロントエンドのコードがバックエンドのテンプレートに埋め込まれることが多くなりました。これによりフロントエンド開発の複雑さが増大し、エンジニアリングされたソリューションに対する初期のニーズが生じました。

増大する開発ニーズに対応するために、チームがコードとバージョンを管理できるようにするために、SVN などのバージョン管理ツールが導入されました。テンプレートエンジンも、よりモジュール化されたページ開発を促進し始めており、コードの再利用性が向上しています。ただし、フロントエンドエンジニアリングはまだ初期段階にあり、自動化されたツールや標準化されたワークフローはほとんどなく、ほとんどのタスクは依然として手動で行われています。

3. AJAX と Web 2.0 の時代: フロントエンドの複雑さの増加 (2005 ～ 2010 年)

2005 年頃、AJAX テクノロジが広く採用されたことで、Web ページはページ全体をリロードせずにデータを更新できるようになりました。これにより、フロントエンドの対話がより複雑かつ動的になります。したがって、JavaScript は補助言語からコアプログラミング言語に進化し、フロントエンド開発の複雑さが大幅に増大し、エンジニアリング実践の需要が増大しました。

それまでの間:

jQuery などのライブラリによりフロントエンド開発が簡素化され、DOM の操作やイベントの処理が容易になります。
基本的なコード圧縮およびパッケージ化タスク用に、Ant などの予備的な自動ビルドツールを導入しました。

これらのツールは初期のエンジニアリングサポートを提供しますが、フロントエンド開発は依然として大部分が手作業であり、ツールチェーンが不完全で、エンジニアリングシステムが完全ではありません。

4. Node.js の登場: フロントエンドエンジニアリングの転換点

2009 年の Node.js のリリースは、フロントエンドエンジニアリングにおける大きな転換点となりました。 Node.js は Chrome V8 エンジン上に構築されており、JavaScript はブラウザ内でのみ実行できるという制限を破り、サーバー側で実行できるようになります。この機能は JavaScript の使用例を拡張するだけでなく、フロントエンドエンジニアリングの開発も大幅に促進します。

フロントエンドエンジニアリングに対する Node.js の革命的な影響

Node.js の出現により、フロントエンド開発者に強力なツールと操作環境が提供され、フロントエンドエンジニアリングの開発が大幅に促進されます。 Node.js の主要な機能とその変革的影響は次のとおりです:

1. ファイルシステム操作(fsモジュール)

Node.js は fs モジュール を導入し、JavaScript がオペレーティングシステムのファイルシステムと初めて直接対話できるようにします。ブラウザ環境では、JavaScript はファイルの読み取り、書き込み、操作を直接行うことができないため、そのようなタスクを処理するには他の言語またはツールが必要です。 fs モジュールを使用すると、開発者はファイルの読み取り、書き込み、作成、削除などのファイル操作のための包括的な API にアクセスできます。

この機能はフロントエンド構築ツールにとって非常に重要です。例:

webpack また、FSモジュールの非同期特性により、特に大規模なプロジェクトでは、パフォーマンスを大幅に改善するための同時ファイル処理も可能になります。

2。Networkand Server関数（http/netモジュール）

node.js

http

and

netモジュールにより、開発者はHTTPサーバーを簡単に作成し、低レベルのネットワーク操作を処理できます。これは、ローカル開発環境のセットアップに特に価値があり、実際のデバッグを有効にしました。の使用例

webpack dev serverファイルに応じてリアルタイムで変更できるローカル開発サーバーを提供しました。サーマルモジュールの交換（HMR）およびその他の機能により、開発者はページを更新せずにブラウザで更新を見ることができ、開発効率が大幅に向上します。 また、node.jsは、フロントエンドのデカップリングに不可欠なAPIリクエスト機関も宣伝しています。ミドルウェアとして機能することにより、node.jsはクロスドメインの問題を解決し、生産環境をシミュレートして、フロントエンドとバックエンドの開発間のシームレスな統合を確保します。
3。プロセス管理（child_processモジュール）

node.js

child_processモジュール

開発者は、サブプロセスを作成および管理し、システムコマンドまたはランタイムスクリプトを実行できます。この機能は、タスクの自動化と建設プロセスに不可欠です。

gulp

and

ツールは、child_processモジュールを使用して次のタスクを実行します。 scssをCSSにコンパイルしました。 画像リソースを最適化します。
4。モジュールシステムとパッケージ管理（NPMおよび糸）
node.jsは、コードのモジュール性を促進し、再利用する

モジュールシステムを使用します。これにより、開発者は複雑なプロジェクトをより小さく、より集中したモジュールに分解し、コードライブラリの維持と拡張を容易にすることができます。

npm（ノードパッケージマネージャー）：node.jsでバインドすると、NPMは世界最大のオープンソースパッケージエコシステムの1つです。開発者はモジュールを簡単にインストール、管理、共有できます。たとえば、

like race

vue.jsは、npmまですばやくインストールできます。 lodash and
axios
Yarn ：Facebookが開発した代替パッケージマネージャーであるYarnは、パフォーマンスと依存関係のアイテム管理の課題を解決し、より高い速度と信頼性を提供します。糸は、大規模なプロジェクトの管理において、複雑な依存ツリーの管理に特に効果的です。これらのツールは、依存関係の管理を簡素化するだけでなく、再利用パッケージの活発なエコシステムを促進し、それによりフロントエンド開発の生産性と革新能力を改善します。

5。Cross-Platform一貫性

node.jsのクロスプラットフォーム機能により、フロントエンド開発ツールチェーンが異なるオペレーティングシステムで一貫した動作を維持できるようになります。開発者がWindows、MacOS、またはLinuxで作業しているかどうかに関係なく、node.jsはツールとプロセスに統一された環境を提供します。

の例:: webpack、eslint、およびその他のnode.jsベースのツールは同じ機能であり、オペレーティングシステムとは関係ありません。グローバル分散チームのエッセンス

node.jsフロントエンドエンジニアリングを完全に変更する方法

node.js強力なオペレーティング環境、包括的なファイルシステムサポート、強力なネットワーク機能、活況を呈しているモジュールとツールエコシステムを提供することにより、フロントエンドプロジェクトは基本的に再構築されました。その主な貢献には次のものがあります：

自動化と効率

:: webpack、babel、eslintおよびその他のツールは、node.jsに依存して自動化、コードスタイルのチェック、コードの最適化を構築します。

REAL -TIME DEVELOPMENT：node.jsは、開発エクスペリエンスを向上させたローカル開発サーバーと実際の重量負荷関数をサポートしています。
:: CI/CDパイプラインと自動化タスクオペレーターは、node.jsを使用してスムーズな展開プロセスを確保します。巨大なエコシステム
フロントエンドとバックエンド開発の間のギャップにより、node.jsはフルスタックjavascript
均質なアプリケーション>およびおよびと他のフレームワーク）は道路を舗装し、クライアントとサーバーの境界をさらに曖昧にしました。

現代フロントエンドプロジェクトの成熟度（2015年から現在まで）反応、vue.js、angularおよびその他のモダンなフロントエンドフレームワークがコンポーネント開発時代を開きました。このパラダイム遷移により、開発者は複雑なアプリケーションを独立した再利用可能なコンポーネントに分解し、フロントエンドのモジュール性とエンジニアリングをさらに促進することができます。この段階では、node.js

現代のフロントエンドプロジェクトの柱になります。 webpack、

babel

およびeslintおよびその他のツールと実践は業界標準になり、高度に自動化されたワークフローを達成しました。以下は、この期間中の主要な開発の概要です。 1。コンポーネント開発 React、vue.js、Angularおよびその他の最新のフレームワークはコンポーネントアーキテクチャを強調し、開発者が開発者を許可することを可能にします：独立したコンポーネントのポケットUIとロジック。

アプリケーションのさまざまな部分でコンポーネントを再利用します。コードとスケーラビリティのメンテナンスを改善するために、明確な注意点分離を維持します。 たとえば：

Reactは、ステートメントUI開発の概念を導入し、動的な管理ステータスとレンダリングビューを容易にします。

vue.jsは、インタラクティブなユーザーインターフェイスを構築するための柔軟なAPIを備えた軽量で強力なフレームワークを提供します。

Angularは、依存関係注入、ステータス管理、ルーティングソリューションを備えた完全に機能的なフレームワークを提供します。

2。ビルディングツールの役割

Webpack、ロールアップ、小包、その他のツールは、フロントエンド開発プロセスの不可欠な部分になりました

コードパッキング
：生産環境に最適化されたパケットにモジュールと依存関係を組み合わせます。翻訳
：
babelを使用して、最新のJavaScript（ES6）をブラウザの古いバージョンと互換性のあるバージョンに変換します。 コードセグメンテーション：パフォーマンスを改善するためにオンデマンドでロードできる小さなパケットに大きなアプリケーションを分解します。

の例:: webpackとそのリッチなプラグインエコシステムとローダーエコシステムは、開発者を許可します：
リソース（画像、CSS、JavaScriptなど）を最適化します。
実際の開発のための熱モジュール交換（HMR）などの高レベル関数を有効にします。 未使用のコードを排除するためにツリーを実装し、パッケージのサイズを削減するために
。

3。コードスタイルの検査とフォーマット

eslintとよりきれいなツール、およびその他のツールは、一貫したコーディングスタイルを維持し、一般的なエラーを防ぐ標準になりました：

~~ESLINT ：コーディング標準は、潜在的な問題にラベルを付けてベストプラクティスを実行することで実行されます。~~

Prettier
：チーム間の一貫性を確保するための自動フォーマットコード。

これらのツールは、共同環境での摩擦を減らし、開発者がスタイルの論争ではなく機能に集中できるようにします。
4。継続的な統合と配信（CI/CD）
CI/CDパイプラインは、フロントエンドアプリケーションの自動テスト、構築、展開に非常に重要です。
Jenkins、Github Actions、Circleciなどのツールは、node.jsベースの構造システムとシームレスに統合されており、各段階を自動化して開発を自動化します。

Jestやサイプレスなどの自動テストフレームワークにより、展開前にコードの信頼性と品質が確保されます。

この自動化は、複雑なアプリケーションであっても、より速く、より安全で、より一貫したリリースを保証します。

5。フルスタックJavaScriptおよび均一なアプリケーション

next.js（Reactなどのフレームワークの上昇）やnuxt.js（vue.jsの場合）は、
均質（または普遍的な）javascript
：
：
>

これらのフレームワークにより、開発者はサーバーサイドレンダリング（SSR）およびクライアントレンダリング（CSR）で同じコードライブラリを使用できます。
SSRは、サーバー上のページをプレレンダリングするページをレンダリングすることにより、パフォーマンスとSEOを改善し、CSRはブラウザでの豊富な相互作用を保証します。

この方法は、フロントエンドとバックエンドの開発、効率の向上、シームレスなエクスペリエンスをさらに統合しました。 6。Micro-ServiceおよびMicro Front -Endアーキテクチャ

node.jsは、
マイクロサービスの使用も促進しました
および
マイクロフロントエンド
：

Micro -Service ：アプリケーションは独立したゆるいカップリングサービスに分割され、拡張と保守が容易になります。
フロントエンド
：フロントエンドアプリケーションは、通常、異なるチームによって開発および展開された、より小さくて独立したコンポーネントに分割されます。 モジュールフェデレーションおよびWebパック内のその他のツールは、マイクロフロントエンドの統合を簡素化します。
7。パフォーマンス最適化

最新のツールとテクノロジーは、フロントエンドアプリケーションのパフォーマンスを大幅に改善しました：

コード圧縮
::ファイルのサイズを縮小するために、JavaScriptとCSSファイルを圧縮しました。
Lazy Loading：初期負荷時間を改善するために必要な場合にのみ、リソースとモジュールをロードします。

キャッシュ：サービスワーカーとHTTPキャッシュを使用して、リソースをより速く取得します。

パフォーマンスの最適化は、ユーザーエクスペリエンスを向上させるためのプロジェクトプロセスの中心的な部分になりました。 node.js：現代のフロントエンドプロジェクトの核と今日、フロントエンドプロジェクトのあらゆる段階で不可欠な役割を果たします：

開発
:: Webpack、Babel、Eslint、および構成と実行のためのnode.jsなどのその他のツール。 test
:: JestとMochaおよびその他のフレームワークは、動的テストキットのnode.jsを使用します。
deploy::: CI/CDパイプラインおよびAWSラムダおよびその他の非サーバープラットフォームは、通常、node.jsを実行して、フロントエンドアプリケーションを展開および管理します。

軽量、非同期、高性能アーキテクチャにより、node.jsは、スケーラブルで効率的で信頼性の高いフロントエンドワークフローの基礎となっています。フロントエンドのモジュール性の開発

フロントエンドエンジニアリングのモジュール開発は、標準化、自動化、メンテナンスを実現するための重要なプロセスです。修正は、コードの組織的な方法を変更するだけでなく、フロントエンド開発プロセス全体を変更し、大規模なプロジェクトの開発とメンテナンスをより効率的かつ信頼できるものにします。以下は、フロントエンドエンジニアリングのモジュール進化の概要です：
1。初期段階：非モジュールスクリプト接続
フロントエンド開発の初期段階では、複数の独立したJavaScriptファイルを使用してWebページが作成されました。これらのファイルは通常、タグを介してHTMLページに含まれており、すべてのコードが同じグローバル範囲を共有しています。この方法により、いくつかの問題が発生しました
グローバルアクション汚染
：すべての変数と関数はグローバルな範囲にとどまり、競合を命名するリスクを高めています。

依存関係を管理することは困難です
：プロジェクトのスケールが増加するにつれて、管理スクリプト間の依存関係はますます複雑になり、エラーが簡単になります。コードを再利用できます
：モジュール化なし、開発者はしばしばコピーのコピーと貼り付けに頼ります。これにより、共有機能の体系的な管理が妨げられます。

この期間中、フロントエンドの開発のエンジニアリングレベルは非常に低く、コード組織は混oticとしており、メンテナンスコストが高くなりました。

2. モジュール化の最初の試み: 名前空間と IIFE (2000 年代半ば)

フロントエンドプロジェクトの複雑さが増すにつれ、開発者はグローバルスコープの汚染を軽減し、依存関係を管理するためにモジュール性を模索し始めます。この期間中に 2 つの一般的なパターンが出現しました:

名前空間: 開発者は、関連する機能を 1 つのオブジェクトにカプセル化し、グローバル変数の数を減らし、名前の競合を最小限に抑えます。

IIFE (即時呼び出し関数式) : JavaScript の関数スコープを利用することで、開発者はコードを自己実行関数に囲み、グローバル名前空間の汚染を避けるためのプライベートスコープを作成します。

これらの手法はコード構成を改善しますが、依然として手動で実装され、体系的な依存関係管理が欠如しており、標準のモジュール読み込みメカニズムを提供しません。これらの初期のモジュール化の取り組みにより、より高度なソリューションの基礎が築かれましたが、エンジニアリングの複雑さには限界がありました。

3. CommonJS と AMD 仕様の登場 (2009 年頃)

モジュール化に対する需要の高まりに応えるために、コミュニティは 2 つの正式なモジュール化仕様、CommonJS と AMD (Asynchronous Module Definition) を提案しました。これらの仕様は、フロントエンドのモジュール性の重要な前進を示しています。

CommonJS: もともとサーバーサイド JavaScript 用に設計された CommonJS モジュールは、依存関係のインポートに require を使用し、関数のエクスポートに module.exports を使用します。これは Node.js の標準になりましたが、同期的な性質があるため、ブラウザ環境にはあまり適していませんでした。

AMD: ブラウザ環境専用に設計された AMD は、非同期モジュールの読み込みをサポートしています。 RequireJS などのツールは AMD 仕様を実装しており、開発者は define を使用してモジュールを定義し、require を使用してそれらを非同期的にロードできます。

これらの仕様は、モジュールの定義と管理のための標準を導入し、モジュール化と依存関係の管理を大幅に改善します。ただし、大規模なプロジェクトでこれらの標準を実装することは依然として複雑であり、追加の構成が必要になることがよくあります。

4. ビルドツールの台頭: モジュールのパッケージ化と依存関係の管理 (2010 年代半ば)

フロントエンドプロジェクトが大規模になるにつれて、依存関係の管理とパフォーマンスの最適化には、単なるモジュール化された規律以上のものが必要になります。これらの課題に対処するために、Webpack、Browserify、Rollup などのビルドツールが登場しました。

Webpack: 依存関係を分析し、モジュールを運用環境に最適化したパッケージにパッケージ化する強力なモジュールバンドラー。さまざまなモジュール形式 (CommonJS、AMD、ES6 モジュール) をサポートし、コード分割や遅延読み込みなどの高度な機能を提供します。

Browserify: 開発者がブラウザーで Node.js スタイルの CommonJS モジュールを使用できるようにする初期のツール。

ロールアップ: ES6 モジュールのパッケージ化に重点を置き、特にライブラリやフレームワークに適した、より小さく効率的な出力ファイルを生成します。

これらのツールはパッケージ化と最適化のプロセスを自動化し、開発者が開発中にモジュール形式でコードを編成しながら、運用環境用に最適化されたリソースを生成できるようにします。この時代はフロントエンドエンジニアリングの大きな進歩を示し、ビルドツールが開発ワークフローの中心となりました。

5. ES6モジュール規格の制定(2015年)

2015 年の ECMAScript 6 (ES6) のリリースでは、ネイティブ モジュールシステム が導入され、フロントエンドのモジュール化におけるマイルストーンとなりました。 ES6 Module System (ESM) がブラウザとサーバーの標準になります。

ES6 モジュール関数:

import と export を使用してモジュールをインポートおよびエクスポートします。

依存関係の静的分析は、ツリーシェイキングやその他の最適化をサポートします。

最新のビルドツールと互換性があり、開発ワークフローへのシームレスな統合が可能です。

ES6 モジュールシステムは、明確で一貫した構文を提供することでモジュール開発を簡素化し、外部モジュール仕様の必要性を排除します。 ES6 モジュールは最新のブラウザーやツールで広くサポートされているため、フロントエンドのモジュール化のデフォルトの選択肢となっています。

モジュール化の開発は常に、フロントエンドエンジニアリングの進化の中核プロセスでした。スクリプトの接続の初期から ES6 モジュールの採用に至るまで、各段階でコードの構成、保守性、効率性が大幅に向上しました。ビルドツールや ES6 モジュールなどの最新のツールと標準により、モジュール化がフロントエンド開発の不可欠な部分となり、大規模なプロジェクトの管理と最適化に強力なサポートが提供されます。

結論

フロントエンドエンジニアリングは、手動による静的 Web 開発から、動的な Web 時代の初期のエンジニアリングニーズに発展し、最終的には Node.js によってもたらされる包括的な自動化とモジュール型開発に至りました。 Node.js の導入により、フロントエンドツールチェーンの革新が大幅に促進され、フロントエンド開発プロセスで高度な標準化、自動化、モジュール化を実現できるようになりました。

現代のフロントエンド開発は、これらのツールとモジュール標準に依存して、複雑なプロジェクトの効果的な管理と展開を可能にします。

私たちは Leapcell です。Node.js プロジェクトをホストするのに最適な選択肢です。

Leapcell は、Web ホスティング、非同期タスク、Redis 用の次世代サーバーレスプラットフォームです:

多言語サポート

Node.js、Python、Go、または Rust を使用して開発します。

無制限のプロジェクトを無料でデプロイ

使用料を支払うだけで、リクエストはありません。料金はありません。

比類のないコストのメリット
アイドル状態にならずにオンデマンドで支払います。

たとえば、