Webフロントエンドアーキテクチャとは

Web フロントエンド アーキテクチャは、フロントエンド コードの品質を向上させ、効率的で持続可能なワークフローを実現するために設計されたツールとプロセスの集合です。 Web フロントエンド アーキテクチャには 4 つのコアがあります: 1. コード (HTML、CSS、JavaScript); 2. プロセス、効率的でエラーのないワークフローを構築するためのツールとプロセスの使用方法は重要な考慮事項です; 3. テスト、カバレッジの作成 広範なテスト プログラムにより、古いコードが引き続き正常に実行できることを確認できます; 4. ドキュメント、設計ドキュメントは、他のユーザーとコミュニケーションするためのツールです。

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

現在、Web フロントエンド テクノロジの急速な変化に伴い、Web フロントエンド プロジェクトはますます複雑になっています。フロントエンド アーキテクチャも、刻々と変化する反復的なニーズやアーキテクチャ テクノロジに応じて進化していくため、アーキテクトだけでなく開発者一人ひとりが注意を払う必要がある問題です。

1. Web フロントエンド アーキテクチャの起源

2014 年 10 月 13 日の CSS 開発者カンファレンスで、混雑した会場でニューオーリンズ コンベンション センターの会場で「フロントエンド アーキテクチャの旗を掲げる」ことは、最前線で働く開発者の共通のアピールとなっています。その後、自分たちが何者で、社内でどのような役割を果たしているのかを理解しようとしていた開発者は、自分たちがフロントエンド アーキテクトの役割を果たしてきたものの、その肩書きを持ったことがなく、その肩書きを保持する自信がなかったことに気づきました。このポジションから得られるパワー。

カンファレンスの数週間後、多くの人が Twitter のプロフィールを「フロントエンド アーキテクト」に変更しました。

2. Web フロントエンド アーキテクチャから何がわかりますか?

フロントエンド アーキテクチャは建築設計に似ており、建築設計者は建設プロセス中に計画を設計、計画し、建設プロセスをフォローする必要があります。これは、フロントエンド アーキテクトの仕事に似ていますが、フロントエンド アーキテクトは建物ではなく Web サイトを構築する点が異なります。建築家はコンクリートを流し込むことよりも、プロジェクトの構成を設計することに重点を置きます。同様に、フロントエンド アーキテクトは、特定のコードを記述することよりも、ツールの開発とプロセスの最適化に重点を置きます。

フロントエンド アーキテクチャは、フロントエンド コードの品質を向上させ、効率的で持続可能なワークフローを実現するために設計されたツールとプロセスの集合です。

フロントエンド設計アーキテクチャは、1 回限りの仕事ではありません。最初から完璧な設計はなく、1 つのステップで完了できる計画もありません。

フロントエンド アーキテクチャの特殊性

フロントエンドは独立したサブシステムではなく、システム全体に広がります

分散: フロント- エンドエンジニアリング

ページの抽象化、分離、結合

#制御可能: スキャフォールディング、開発仕様など

効率的: フレームワーク、コンポーネントライブラリ、モックプラットフォーム、構築および導入ツールなど

抽象#ページ UI の抽象化: コンポーネント

一般的なロジックの抽象化: ドメイン エンティティ、ネットワーク リクエスト、例外処理など。

3、Web フロントエンド アーキテクチャの原則##1. システム設計

想像してみてください。建物には明確な構造設計がありません。すべての重要事項が建設作業員によって直接決定されると、次のような状況が発生する可能性があります。1 つの壁は石で建てられ、2 番目の壁はレンガで建てられ、3 番目の壁はレンガで建てられます。壁は木で建てられていますが、4番目の壁はファッション性を追求してオープンになっています。

Web サイトの全体的な外観とスタイルのトーンは経験豊富なビジュアル デザイナーによって完全に決定されますが、フロントエンド アーキテクトはその背後にあるフロントエンドの開発手法とシステム設計哲学を制御します。フロントエンド アーキテクトは、すべてのフロントエンド開発者が従うシステム仕様を設計することで、製品とコードの最終形状の明確なイメージを作成します。

フロントエンド アーキテクトがシステム設計の仕様を確立すると、プロジェクトにはコードの品質を測定するための基準が設定されますが、そうでない場合、コードが基準を満たしているかどうかをどのように判断すればよいでしょうか?適切に設計されたシステムには、完全な検査メカニズムが備わっており、システム内のコードが単に積み上げられたものではなく実質的な価値を持っていることを保証するために、適切なトレードオフを行う必要があります。

2. 作業計画

明確な構造設計を行った後、開発ワークフローを策定する必要があります。開発者がコード行を記述してオンラインで送信するには、どのような手順を実行する必要がありますか?最も単純な例を挙げると、このプロセスには、FTP を使用してサーバーにログインし、ファイルを変更して保存することが含まれます。ただし、ほとんどのプロジェクトでは、完全なワークフローでバージョン コントローラー、タスク スケジューラ、CSS プロセッサ、ドキュメント ツール、テスト コンポーネント、サーバー自動化ツールなどの複数のツールを使用する場合があります。

フロントエンド アーキテクトの目標は、スムーズに動作するシステムを設計することです。このシステムは、効率的かつ迅速に起動できるだけでなく、言語分析、テストケース、文書化などの方法を通じて効果的なフィードバックを継続的に提供し、繰り返しの操作によって引き起こされる人的エラーを大幅に削減します。

3. 監督とフォローアップ

フロントエンド アーキテクチャの設計は、決して一度きりの作業ではありません。最初から完璧なデザインはなく、一度で完璧な計画もありません。顧客と開発者のニーズは時間の経過とともに変化します。ある段階ではうまく機能した開発プロセスでも、後で効率を向上させ、エラーを減らすために再構築する必要がある場合があります。

フロントエンド アーキテクトの非常に重要な能力は、作業プロセスを継続的に最適化する能力です。現在のさまざまなビルド ツールを使用すると、作業方法を簡単に変更し、すべての開発者に通知することができます。

フロントエンド アーキテクトは管理職と同等であり、ビジネス コードを記述する必要がなくなったのではないかと疑問に思う人もいます。フロントエンドアーキテクトは、より多くのコードを記述する必要があるだけでなく、複数のプログラミング言語を使用し、多くのツールを使用できる必要があります。コードの量は減っていません。コードの読み取り者が変更されただけです。フロントエンド開発者はエンド ユーザーのためにコードを作成し、フロントエンド アーキテクトはチームの開発者のためにコードを作成します。

4. Web フロントエンド アーキテクチャのコア

1. コード

最終的には、すべての Web サイトは、HTML、CSS、JavaScript で構成される大量のテキスト ファイルとリソース ファイルで構成されています。 Web サイトの作成に必要なコードの量に直面すると、コードとリソースに対する期待値を設定することがいかに重要であるかが明らかになります。

2. プロセス

ツールとプロセスを使用して効率的でエラーのないワークフローを構築する方法は重要な考慮事項です。ワークフローはますます複雑になり、ワークフローを構築するために使用されるツールも複雑になっています。これらのツールは、生産性の向上、効率の向上、コードの一貫性の維持において素晴らしい結果をもたらしますが、過剰なエンジニアリングと抽象化のリスクも伴います。

3. テスト

スケーラブルで継続的に最適化されたシステムを構築するには、新しいコードが古いコードと十分な互換性があることを確認する必要があります。それらはすべて、より大きなシステムの一部です。包括的なテスト計画を作成することで、古いコードが引き続き正常に実行できることを確認できます。

4. ドキュメント

設計ドキュメントは、他のユーザーとコミュニケーションを図ったり、設計上の決定内容を説明したり、設計上の決定内容とその理由を説明したりするためのツールです。 . あなたの決断は良いものです。チームの主要メンバーが退職しない限り、文書化の重要性を認識する人はほとんどいないでしょう。

これら 4 つのコアは、スケーラブルで持続的に最適化されたシステムを構築するための基盤です。

(学習ビデオ共有: Web フロントエンドの入門 )

以上がWebフロントエンドアーキテクチャとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。