Web Notes
1.0.0
オンラインで読む>>
コードケース・参照資料
Web開発は簡単に開始できますが、知るのは困難です。ドアを一見、部屋に入り、プロセス全体の統合などの段階に分かれています。著者の一連の記事を初めて読んでいる場合は、包括的な理解のために特定のクマの技術的な道に行くことをお勧めします。このシリーズでは、著者は、製品反復のライフサイクルを通じて、チームのR＆D効率と完全な配信をタイムリーかつ確実に改善する方法を探ることに取り組んでいます。同時に、システムの全体的な複雑さを制御し、システムのパフォーマンスと経験を継続的に最適化できます。
過去数十年にわたるWebテクノロジーとエコロジーの素晴らしい変化を振り返ってみると、私たちは刺激的な変化を経験しており、選択の混乱でしばしば失われています。ブラウザバージョンの革新とハードウェアパフォーマンスの改善により、Webフロントエンド開発は、迅速かつ絶えず変化する時代になりました。数え切れないほどのフロントエンド開発フレームワークと技術システムが美しさを競っています。特に、最新のWebフロントエンドフレームワーク（Angular、React、Vue.js）の出現、JavaScript、CSS、HTMLなどの言語機能の改善、およびエンジニアリング、クロスプラットフォーム、マイクロフロントエンド、大規模なフロントエンド、BFFなどの提案された理論的概念、Webフロント開発のためのテクノロジースタックとコミュニティは、登場します。状態。いわゆるモダンなフロントエンドエンジニアに関しては、通常、プロジェクトのモジュール化方法、コンポーネント間の相互作用の設計方法、再利用性の改善方法、パッケージング効率の改善方法、ブラウザのレンダリングパフォーマンスなどなど、エンジニアリングの問題を解決するために多くの専門知識を使用する必要があります。以前のように、静的ページを開発するにはHTML/CSS/JSルーチンのみが必要です。
全体として、プログラミングエコシステムは3つの段階を経て、まず最初の期間を経ています。言語と基本的なAPIを拡張する必要があるため、この段階では多数の補助ツールが生まれます。第2段階では、作られたものがより複雑になると、より多くの組織が必要になり、多数の設計パターンと建築パターンが導入されます。この段階では、多数のフレームワークが生まれます。第3段階では、需要のさらなる複雑さとチームの拡大により、エンジニアリング段階に入り、さまざまな階層MVC、MVP、MVVMなど、視覚開発、自動テスト、チームコラボレーションシステムが現れました。
興味深いことに、私たちがさまざまな時点で立っているとき、これらの3つの段階の分割も一貫性がありません。著者の現在の理解によれば、それはテンプレートのレンダリング、フロントエンド分離とシングルページアプリケーション、エンジニアリングとマイクロフロントエンド、大規模なフロントエンド、サーバーレスの3つの異なる段階に分けられています。
もちろん、すべての小さなステージには、新しいフレームワークと新しいツールの出現が伴います。
Webフロントエンドの開発は、1991年にHTMLの説明に関するTim Berners-Leeの一般の言及にまでさかのぼることができ、W3Cは1999年にHTML4標準をリリースしました。この段階は主にB/Sアーキテクチャであり、いわゆるフロントエンド開発コンセプトはありませんでした。現時点では、テンプレートのレンダリングに基づいて、ほとんどが静的なページでした。主なことは、JSP、PHP、その他のテクノロジーを介していくつかの動的なテンプレートを記述し、テンプレートをWebサーバーを介してHTMLファイルに解析することです。ブラウザは、これらのHTMLファイルのレンダリングのみを担当します。この段階では、フロントエンドとバックエンドの間に分業はありません。通常、バックエンドエンジニアはフロントエンドページを書き込みます。
今後数年間で、Ajax TechnologyやRestなどの建築基準の導入により、フロントエンド分離とリッチクライアントの概念がますます認識されています。言語と基本的なAPIを拡張する必要があります。この段階では、jQueryに代表される一連のフロントエンド補助ツールが登場しました。 Ajaxに基づいて、前端と背面の端も分離の道を開き、フロントエンドとバックエンドの分離アーキテクチャが徐々に人気になりました。フロントエンドはインターフェイスとインタラクションを担当し、バックエンドはビジネスロジックの処理を担当します。フロントエンドとバックエンドは、インターフェイスを介して相互作用します。各バックエンド言語で困難なHTMLを書く必要はなくなりました。 Webページの複雑さは、バックエンドWebサーバーからブラウザー側のJavaScriptにも移行しています。
2009年以来、スマートフォンの開発が人気を博しており、モバイルターミナルの波は止められません。 SPAシングルページアプリケーションの設計コンセプトも人気があります。関連するフロントエンドのモジュール性、コンポーネント化、レスポンシブ開発、ハイブリッド開発、その他の技術が緊急です。特に2009年のnode.jsの出現、および付随するCommonJS仕様とNPMパッケージ管理メカニズムは、Angular 1やIonicなどの一連の優れたフレームワークを生み出し、AMD、CMD、UMD、RequireJS、seajs、およびGruntやGulpなどのツールなどのモジュール標準を生み出しました。フロントエンドエンジニアは、バックエンドとは無関係に技術システムとアーキテクチャモデルを備えた特別な開発分野にもなりました。
過去には、単純なHTMLとJSのみが必要でした。これで、パッケージマネージャーを使用してサードパーティパッケージを自動的にダウンロードし、モジュールマネージャーを使用して単一のスクリプトファイルを作成し、翻訳コンパイラを使用して新しいJavaScript機能を適用し、タスクランナーを使用して各構造ステップを自動的に実行します。
過去2年間で、Webアプリケーションの複雑さの増加、チーム担当者の拡大、およびページの相互作用の親しみやすさとパフォーマンスの最適化に対するユーザーの需要により、より優れた柔軟な開発フレームワークが必要になり、フロントエンド開発をよりよくできます。この段階は、比較的集中した懸念と設計の概念を改善する多くのフレームワークを登場しました。たとえば、React、Vue.JS、Angular 2などのコンポーネントフレームワークにより、命令プログラミングをDOM操作に置き換えることができます。これにより、コンポーネントの開発を高速化し、コンポーネントの再利用性と複合性が向上します。機能的なプログラミングに続くReduxと、レスポンシブプログラミングの概念を借りるMOBXは、両方とも非常に優れた州管理補助フレームワークであり、開発者がビューレンダリングからビジネスロジックを分離し、プロジェクト構造をより合理的に分割し、単一の責任の原則をより良く実装し、コードの保守性を改善するのに役立ちます。プロジェクトの構築ツールでは、GruntとGulp、およびWebpack、Rollup、およびJSPMに代表されるプロジェクトパッケージツールに代表されるタスク操作管理がすべて先導し、開発者がフロントエンドの建設プロセスをより良く構築し、前処理、非同期荷重、ポリフィッシング、圧縮、その他の操作を自動化した方法で実行します。
ツールチェーンの成熟度は、ビジネスをリードするテクノロジーとテクノロジーの推進ビジネスとともに、エンジニアリング需要をもたらしました。フロントエンドエンジニアリングは、特定のビジネス特性に基づいて、フロントエンド開発プロセス、テクノロジー、ツール、エクスペリエンスなどを標準化および標準化することです。その目的は、フロントエンド開発が独自のシステムを形成できるようにし、フロントエンジニアの開発効率を最大化し、テクノロジーの選択、フロントエンドおよびバックエンドの共同試運転などによって引き起こされる調整とコミュニケーションコストを削減することです。
アプリケーション独自の論理的な複雑さ、エンジニアリングの負荷、および組み合わせの複雑さの改善は、フロントエンドのパフォーマンスに特定の課題をもたらします。たとえば、Reactなどのコンポーネントフレームワークには、SEOに友好的ではないページ初期化が白い画面時間があります。フロントエンドは、サーバーのレンダリングを通じてこの問題を解決し、JSPやPHPなどのサーバー言語のテンプレートを、React、VUEなどによって実装された同型アプリケーションに基づいて、完全なHTMLドキュメントの形式でブラウザに戻すことを試み始めました。
長年の開発の後、フルスタックに焦点を当てて、Node.jsはエンタープライズレベルのアプリケーションをサポートする能力を完全に所有しており、Lowe、Netflix、Alibabaなどの多くの国内および外国企業で多数のプラクティスを持っています。さらに、node.jsは自然言語の親和性を持ち、開発者がフルスタックの責任を容易にすることを容易にします。マイクロサービスアーキテクチャやクラウドネイティブおよびサーバーレスなどの概念の台頭により、バックエンドインターフェイスは徐々にアトミックになり、マイクロサービスインターフェイスはもはやページに直接面を表しておらず、フロントエンド呼び出しが複雑になりました。したがって、GraphQLで表されるBFF（フロントエンドのバックエンド）コンセプトが生まれました。マイクロサービスとフロントエンドの間にBFF層が追加され、インターフェイスがBFFによって集約され、トリミングされ、その後フロントエンドに出力されました。
インターフェイスの調整と集約の問題を解決しながら、BFFはバックエンドの元の同時圧力も負担します。サーバーレスはこの問題を軽減できます。関数を使用して、インターフェイスの集約とトリミングを実装できます。 BFFのフロントエンドリクエストは、FAAS HTTPトリガーのトリガーに変換されます。この関数は、複数のマイクロサービスを呼び出してデータを取得するなど、リクエストのビジネスロジックを実装し、処理結果をフロントエンドに戻すなどします。このようにして、操作とメンテナンスのプレッシャーは以前のBFFサーバーからFAASサービスに移行し、フロントエンドはサーバーを気にする必要がなくなりました。サーバーレスは、サーバー側のレンダリングにも適用され、以前の各ルートを関数に分割し、FAASに対応する関数を展開することもできます。このようにして、ユーザーが要求するパスは、個々の関数に対応します。このようにして、操作およびメンテナンス操作はFAASプラットフォームに転送されます。フロントエンドがサーバー側をレンダリングする場合、サーバープログラムの操作とメンテナンスの展開を気にする必要はありません。さらに、WeChatやAlipayなどのミニプログラムは、サーバーレスの概念に準拠したクラウド開発プラットフォームも提供し、ビジネスのフロントエンドの迅速な反復を強化します。
詳細とガイドについては、紹介を参照してください。
中国語版|英語版
あなたが非常に経験豊富な開発者であり、フロントエンドのエンジニアリングとアーキテクチャについて知りたい場合は、記事のフロントエンドの進化を読むことをお勧めします。
JavaScript Basic Syntaxを完全に理解していない場合は、基本的なJavaScriptの構文と実用的なアプリケーションを理解するために、最初に「最新のJavaScriptの構文の基本とエンジニアリングの実践」を閲覧することをお勧めします。
node.jsフルスタック開発を理解したい場合は、Node-notesを参照できます。
理論的知識を理解した後、WX-FEにアクセスして、著者のすべてのフロントエンド関連のオープンソースプロジェクトを確認することをお勧めします。
著者のすべての記事は、クリエイティブコモンズの帰属の対象となります。再版は大歓迎であり、著作権は尊重されます。また、NGTE Booksのホームページにアクセスして、知識システム、プログラミング言語、ソフトウェアエンジニアリング、モデルとアーキテクチャ、Webおよび大規模なフロントエンド、サーバー側の開発実践とエンジニアリングアーキテクチャ、分散インフラ、人工知能、ディープラーニング、製品運用と起業家精神など、複数のカテゴリの書籍のリストを閲覧することもできます。
