導入
フロントエンドが大規模になる傾向にあるため、従来のフロントエンド開発モデルでは実際のプロジェクト要件を十分に満たすことができなくなりました。したがって、プロジェクトを標準化し、構成可能にし、最適化を容易にするための一連のソリューションが必要です。
この記事では、この問題を簡単に分析し、フロントエンド エンジニアリングの概念を説明し、実装し、一連の解決策を示します。
この記事は、2020年の社内フロントエンドエンジニアリングを推進するために私が執筆したもので、原文をベースに内容、ビジネスシナリオ、理由を短くし、フロントエンド開発が分からない人でも読めるようにしています。エンジニアリングの目的を理解するには、より詳細な内容を自分で調べて勉強する必要があります。
1. フロントエンドエンジニアリングとは
フロントエンド エンジニアリングは、ソフトウェア エンジニアリング関連の手法やアイデアをフロントエンド開発に適用する方法およびツールであり、それによってフロントエンド開発の効率が向上し、製品の品質が向上し、開発の難易度が軽減され、企業のコストが削減されます。
フロントエンド エンジニアリングは、コード仕様、プロセス仕様、ブランチ管理、プログラム開発、フロントエンドとバックエンドの共同デバッグ、自動テスト、アプリケーション構築、システムの導入と監視、運用・保守など
2. フロントエンドエンジニアリングを使用する理由
近年のフロントエンド技術の継続的な発展により、フロントエンドに配置されるサービスはますます複雑になり、フロントエンドはもはやHTML+CSS+JavaScriptの単純な組み合わせではなくなりました。
ビジネスの複雑化に伴いフロントエンドのコード量が増加するため、フロントエンドコードの信頼性、保守性、拡張性、フロントエンドアプリケーションのパフォーマンスや開発効率が重要になってきます。問題。これらの問題を解決するためにフロントエンドエンジニアリングが登場しました。
フロントエンド エンジニアリングの利点は次のとおりです。
- チームワークの効率を向上させ、コミュニケーションコストを削減します。
- コラボレーションを改善し、開発者とテスターの重複した作業を削減します。
- コードの品質と保守性を向上させ、リリースに関する一般的な問題を軽減します。
3. フロントエンドとリアエンドの分離
フロントエンドとフロントエンドを別々に開発することで、フロントエンドエンジニアリングの発展のための土壌が提供されます。刻々と変化する市場の需要に伴い、フロントエンド開発は従来のWebページモデルからWebAppモデルへと変化し、フロントエンドエンジニアの業務内容も常に変化を促しています。これらの変化に対応して、企業の技術部門はフロントエンド開発の方法論を設計する必要があります。
フロントエンド エンジニアリングの主な目標は、生産性を解放し、生産効率を向上させることです。一連の仕様の策定を通じて、ツールとフレームワークを使用して、フロントエンド開発およびフロントエンドとバックエンドのコラボレーションにおける問題点と困難を解決します。
4. フロントエンドエンジニアリングの実装方法
フロントエンド エンジニアリングを導入する最初のステップは、フロントエンドとバックエンドの開発の分業を明確にし、フロントエンドとバックエンドを分離するための基礎を築くことです。
フロントエンドは主に次の役割を果たします。
- 静的リソースと動的リソースの処理
- JavaScript によるフロントエンド ビジネス ロジックの実装
- HTMLテンプレートファイルの出力
- 中間層 Web サービス。通常は Node.js によって実装されます。
- フロントエンド単体テスト
- フロントエンドプロジェクトの展開
その中で、静的リソースには、js ファイル、css ファイル、さまざまな形式の画像、メディア ファイルなどが含まれます。これらのファイルはサーバーに依存せず、ブラウザーで解析する必要があるだけです。動的リソースは、プロジェクトの場合、HTML テンプレートを指します。レンダリングされた SPA (シングル ページ) アプリケーションの場合、HTML テンプレートのレンダリングを実装する方法を検討する必要があります。フロントエンド プロジェクトのデプロイメントとは、テスト サーバー上の静的リソース ファイルのデプロイメントと、Node.js 中間層サーバー上の HTML テンプレート ファイルのデプロイメントを指します。
5. 解決策
正規化の制約
正規の制約は、サーバーサイド開発とフロントエンド エンジニアリングの両方にとって重要です。制約を形式化すると、チームワークが向上し、メンテナンス コストが削減され、コード レビューが容易になります。主にドキュメント仕様、ツール仕様、品質仕様、コード仕様、UI仕様、プロジェクト構造仕様、gitコミット仕様などが含まれます。
プロジェクトのビルド
プロジェクトの構築では、フロントエンド開発のすべてのソース コードをホスト ブラウザーが実行できるコードに変換します。コンパイルが必要な内容には、ブラウザで直接認識できないJSコード、ブラウザで直接認識できないCSSコード、ブラウザで認識できないHTMLテンプレートコードなどが含まれます。ビルド ツールは、依存関係のパッケージ化、リソースの埋め込み、ファイル圧縮、ハッシュ フィンガープリントの追加などの最適化を実装して、フロントエンド アプリケーションのパフォーマンスを向上させることができます。
JavaScriptのコンパイル
Babel の役割は、ブラウザによって実装されていない ECMAScript 仕様構文を実行可能な低レベル構文に変換することです。このようにして、フロントエンド エンジニアは、互換性の問題を心配することなく、新しい ECMAScript 仕様をより自由に使用できるようになります。
CSS プリコンパイル
CSS プリコンパイラーは、開発者がソース コードを作成し、コンパイル ツールを通じてそのソース コードを CSS 構文に変換するための便利な構文と機能を提供します。このようにして、開発中により効率的でモジュール形式の CSS プログラミングを使用できます。
モジュール開発
モジュール型開発では、名前の競合、依存関係の管理、パフォーマンスの最適化、保守性、コードの再利用性などの問題に対処します。ES6 モジュール仕様は従来のモジュール仕様を徐々に置き換えていき、ES6 モジュール仕様の編集は構築ツールを通じて実現されます。
コンポーネント開発
コンポーネントベースの開発では、UI をデザイン レベルから分割します。UI をコンポーネントに分割します。各コンポーネントには HTML テンプレート、CSS スタイル、および JS ロジックが含まれます。コンポーネント開発により、コードの再利用やモジュール化が実現し、コードの保守性や拡張性が向上します。ページ上の各要素をコンポーネントと捉え、ページ自体も複数の中小コンポーネントから構成される大きなコンポーネントとして分割して組み立てるこの方法は、フロントエンドの「分割統治の考え方」に準拠しています。発達。
開発環境とモックサービス
開発効率を向上させるために、ローカルサーバーと構築ツールを組み合わせることで、フロントエンドコードの動的な構築を実現できます。ローカル サーバーはソース コードの変更を監視でき、変更があると動的ビルドがトリガーされるため、手動のビルド手順が不要になり、開発効率が向上します。さらに、モック サービスはバックエンド インターフェイスをシミュレートして、フロントエンド ロジックの作成と機能モジュールの開発を支援できます。フロントエンドエンジニアは、最初にモックデータを開発に使用し、バックエンドインターフェースの開発が完了した後に実際のインターフェースに切り替えることで、フロントエンドとバックエンドの並行開発を実現できます。
プロジェクト展開プロセス
プロジェクトのデプロイメントは、フロントエンド ビルドによって生成されたコード パッケージをテスト サーバーにデプロイするプロセスです。導入プロセスはシンプルかつ明確で、構成可能である必要があります。チームワークとセキュリティ要素を考慮すると、厳密なレビュー、キュー制御、簡素化された操作を提供し、プロセスの進行に責任を負う専任担当者を配置できる展開プラットフォームを構築することがベスト プラクティスです。
フロントエンドエンジニアリングサポート
フロントエンド エンジニアリングを実装する場合、LESS/SASS/Stylus などの CSS プリコンパイル ソリューションや、AMD/CommonJS/ES6 Module などの JS モジュール化ソリューションなど、適切なフロントエンド言語とフレームワークを選択できます。同時に、プロジェクトの要件に応じて、フロントエンド UI フレームワーク (Layui、Bootstrap、Element UI など) および MV* フレームワーク (Vue、React、Angular など) を選択できます。
最適化
最適化はフロントエンド開発プロセスにおける重要な側面です。コードの最適化には、オンデマンド読み込み、遅延読み込み、コードの再利用、グローバル変数の回避、イベント委任の使用、リソースの圧縮、オートコンプリート ツールの使用などが含まれます。コード以外の最適化には、HTTP リクエストの数の削減、CDN の使用、キャッシュなどの手段の使用が含まれており、これによりフロントエンド アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。
フロントエンドテスト
テストはフロントエンドエンジニアリングの構築に不可欠な部分です。単体テストや結合テストにより、バグを早期に発見・解決でき、開発コストを削減できます。Karma + Mocha + Chai などの自動テスト ツールは、単体テストや統合テストに使用できます。
構築、デプロイ
Node や Webpack などのツールを使用すると、フロントエンド コードの自動構築を実現できます。自動構築には、コード検査、単体テスト、言語コンパイル、依存関係分析、パッケージ化、圧縮、置換などの手順を含めて、開発効率を向上させることができます。自動デプロイメントは、Jenkins や Docker などのツールを通じて実現できます。
パフォーマンスとエラーの監視
モニタリングはフロントエンドエンジニアリング構築の最後のリンクであり、モニタリングシステムを通じて、本番環境でのプロジェクトの動作を把握することができ、開発チームはモニタリングレポートに従ってプロジェクトを調整し、最適化することができます。
エピローグ
フロントエンド エンジニアリングはフロントエンド開発のトレンドであり、開発効率を向上させ、コストを削減し、コードの品質を向上させることができます。ただし、フロントエンドエンジニアリングを導入する場合は、プロジェクトの実情に応じてカスタマイズした選択を行い、合理的にツールやフレームワークを選択する必要があります。最適化とテストはエンジニアリングにおいて無視できない部分であり、アプリケーションのパフォーマンスと安定性を向上させるために重要です。