スケールするためのフロントエンドプロジェクトの構築

私は、他のウェブ開発者やエンジニアのように、できるだけ正気として私の仕事の生活をすることを好む.構造を持っているだけでなく、生活はもう少し楽しく、しかしスケーリングに重要であり、さらに創造性が繁栄することができます!私のコードで明確な構造と一貫した計画を持って、私は、私はスケーリングのためのより良い計画をすることができます、不要なリファクタリングのコードセッションを避けるために、各階層やサービスを再学習したり、機能をアップグレードする必要があるたびに再学習することなく、アプリケーションの階層を理解することができます.
ほとんどのJavaScriptフレームワークで始めるほとんどのほとんどの開発者は、組み込みのCLI(コマンドラインインターフェイス)を使用します.何もこのアプローチで本質的に間違っていません、そして、これは開発者を構成バグの最初の波から多くの時間を節約します.セットアップの次のステップは、コード構造を構築することです.誰もが、疑いなく、これについて意見を持っており、強く彼らのアプローチを守る.私も自分の成長したプロジェクトに合う独自のアーキテクチャを作り上げている.
この記事では、誰もがこの記事と一緒に次のことを始めることができますし、迷子にされていないことができますベースの構成として作成する反応アプリスターター構造を使用します.

これは何ですか

プロジェクトの構造とパッケージの意見へのダイブです.これは、ライブラリやパッケージを使用して避けるための“MUST”と“必須の”に包括的な研究ではありません.あなたのプロジェクトは生活構造です!私の意見や意見は、あなたが直面している問題や、エンドユーザーや開発チームのニーズに応じてメリットがないかもしれません.うまくいけば、この記事は、小規模で大規模なプロジェクトに取り組んでいるとき、自分自身とチームを組織化するために、もう一つの貴重な視点を提供します.

基本設定

それで、あなたはリンクとウェブサイトを掘る必要はありません.

my-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

私は、srcとコンポーネントフォルダについて、非常に強い意見を持っています.すべてのSRCまたはコンポーネントフォルダを使用しないでください!これは大規模なアプリケーションのスケールではありません、それは巨大なフラットリストを掘るに迷惑です.あなたがコードの特定の部分を見つけたいとき、JSファイル.

大文字対小文字

すぐにこれを片付けましょう.開発者は、このスペースで人気の開発者からのコンベンションに基づいて大規模なコンポーネント固有のファイルを定義するのが好きです.あなたが大文字である他の誰かのプロジェクトにいるならば、すべてのファイル名を変えに行かないでください.標準が設定されており、個々のプロジェクトの標準を変更するアプローチに適切な時間と間違った時間があります.
一方、あなたが私のプロジェクトに取り組んでいるならば、小文字ファイルの名前は、我々が生活している標準です.これは、読みやすく、読みやすく、他のすべてのプロジェクトの種類やフレームワークは、このアプローチを使用します.また、言葉の間のハイフンは、それはあなたが普通に見て快適であるよりも長くそれをタッドビットになっても必要です.
Google's File Naming Standard

新しいフロントエンドアーキテクチャ

あなたが次のプロジェクトを構成する方法のこの記事の例を探しているならば、私はそれの簡略化されたバージョンをあなたに右hereにリンクします.あなたがこのように構造化された理由について読み続けたいなら、このアーキテクチャの目的を理解してください.我々はプロジェクトを管理するためにMVVMアーキテクチャを採用するつもりです.
あなたのプロジェクトのほとんどは、おそらく100 %フロントエンドベースのまたは外部APIを使用して動作します.我々のアーキテクチャは、例えば、我々がプロジェクト側を念頭に置いて我々のプロジェクトを構築するならば、変わるかもしれません.私たちの新しいアプリのフォルダにあるものの鳥の目を見てみましょう.

my-app
├── assets
│   ├── images
│   ├── scripts
│   └── styles
└── src
    ├── components
    ├── constants
    ├── models
    ├── routes
    ├── services
    ├── views
    ├── utilities
    ├── index.css
    ├── index.js
    └── serviceWorker.js

インデックス.js

提供されるexample、インデックス.JSは、複数のコンポーネントをエクスポートしたり、ビューまたは共有要素の親コンポーネント(コンテナー)を表すために使用されます.

資産

少しずつ資産を壊しましょう.

assets
├── images
├── scripts
    └── vendors
└── styles
    └── vendors

SRCフォルダー内の資産フォルダーは通常、スタンドアロン、リンク可能、またはダウンロード可能なリソースとして一般には利用できない内部のリソースのみを表すためにここに位置します.PDF、ダウンロード、ブログ投稿画像など.代わりに大衆配布のためのパブリックフォルダに格納することができます.
私は画像の特定のサブ構造を推奨するつもりはない.ページ、機能、レイアウト、および特定のユースケースでグループ化されたイメージを保持することを除いて、私は定義された意見さえ持っていません.スクリプトは通常、あなたのプロジェクトに自然な統合(インポート/必要)を持っていないサードパーティ製のライブラリであり、あなたのHTMLドキュメントの本文の先頭または末尾に住んでいても大丈夫です.スタイルフォルダーも同様です.
ベンダーフォルダがある理由は、外部フォルダ/サードパーティライブラリがベンダーフォルダーに住んでいる間に、ベースフォルダ内のスクリプトやスタイルフォルダにある内部で書かれたファイルを処理するほうがずっと簡単です.これは、チームメンバーのために視覚的に参照をより簡単にし、関連付けられたオーバーライドを追加することもできます.ブートストラップ.CSS .理想的ではない.しかし、それは組織化されて、言及するのが簡単です.覚えておいてください、スクリプトとスタイルは主にあなたの主なプロジェクトJavaScript文書とスタイルシートの中で生活していないサードパーティライブラリのために意味されます.

コンポーネント

私たちはまだ重要であると信じているので、コンポーネントフォルダを維持するつもりです.プロジェクトを保持するのではなく、プロジェクト全体で共有されるコンポーネントを保持するために使用します.これには、レイアウト、プライベート、パブリック、テンプレート、サイドバー、ヘッダーなどが含まれます.これまでに複数のモジュールやビューで1回以上使用することができます.

components
├── buttons
├── forms
├── layouts
├── partials
├── private
│   ├── header
│   ├── sidebar
│   ├── card
│   └── modal
├── public
│   ├── header
│   ├── pricing-tables
│   └── footer
└── shared

私は、唯一の目的は、顧客に面したウェブサイトやユーザーとのアプリケーションに直面しているパブリックとプライベートに属しているコンポーネントを分割するように注意してください.彼らはまた、名前のウェブサイトやアプリをすることができますまたはコンポーネントの下で同じレベルですべてのコンポーネントのフォルダを維持することができます.すべての問題は、ホームまたはプライマリの場所をプロジェクトの再利用可能なコンポーネントに与えている.複数のフォルダ名に関しては、コンポーネント命名の高い使用可能なケースのため、まだ未定です.

モデルとサービス

一緒にこれらを束ねましょう.インスピレーションとしてMVVMアプローチを使用すると、モデルは、受信可能なサーバーデータを反復してスケーラブルなオブジェクトに成形するコンストラクターを保持します.サービスは、クライアントとサーバー間でこのデータを前後に送信する汎用関数と特殊関数を保持します.サービスはまた、RUDXの設定やグローバルコンテキストのような状態ベースのソリューションを保持します.

├── models
│   ├── client.js
│   ├── product.js
│   └── task.js
└── services
    ├── context
    ├── redux
    └── api
        ├── clients.js
        ├── products.js
        └── tasks.js

定数

アプリでグローバルに参照されるものは何でもここに格納する必要があります.これには

データベースからのユニークなID(IDまたはGUID).

異なるAPIサービスの設定値です.envファイル.

このフォルダを置き換えることができます.あなたのホスティングがどのように構成されるか、会社方針がどのように強制されるかに基づいてダイナミックであると思われるならば、すべての情報を保持しているenvファイル(s).

ユーティリティ

ユーティリティは、あなたのアプリケーションが利用する小さなユーティリティ機能を定義する1つまたは多くのファイルです.これは特殊な日付、フォーマッタ、または頻繁に必要とされる1つのユース関数のようなものですが、プロジェクト内の1つのコンポーネントまたはモジュールに属していない場合があります.

路線図

ほとんどの可能性があります、ほとんどのあなたの日は、ここでは、コンポーネントの間で、一緒に実装のためのデザイナーから渡されたコードを実装するために住んでいます.あなたはすでにサーバーからデータを消費するためにモデルとサービスを書いています、そして、現在、あなたはそれを利用する必要があります.基本的なビュー構造は以下の例のようになります.
自分のフォルダにルートを置くことは自分のために何か新しいものです.一緒にルートを維持し、ルートのビューをインポートするには、ビジネス要件が進化するように私のより最近のアプリの変更方法を管理することが容易になりました.これは他の使用するための主張パターンよりも個人的な好みのです.

routes
├── components
│   ├── private.js
│   ├── public.js
│   └── index.js
├── index.js
views
├── private
│   ├── clients
│   ├── dashboard
│   ├── products
│   ├── tasks
│   └── index.js
├── public
│   ├── about
│   ├── auth
│   ├── home
│   └── index.js
└── shared

もう一度、私は、私のプロジェクトが視覚的に面しているウェブサイトと顧客に直面している内部アプリを切り離すことによって視覚的に構造化される方法を理解するのが好きです.これらのビューコンポーネントフォルダーの各々は、ルートのビューが定義されている場所です.

client
├── index.js
├── client-redux.js
├── client.scss
├── client-styles.js
├── tests
├── components
│   ├── modal 
│   └── // unique components for view
clients
├── clients-redux.js
├── clients.scss
├── clients-styles.js
├── index.js
├── tests
└── components
    ├── modal
    ├── list-item
    |   ├── list-item.scss
    |   ├── list-item-styles.js
    |   └── index.js
    └── // unique components for view

この例では、プロジェクトで使用できるファイルの範囲を示します.また、ビューのコンポーネントフォルダ内に保持することによって、共有コンポーネントフォルダにあることを意味しないビューに一意の子コンポーネントを破棄します.ビューに関連するすべてのものを含んでいる重い見解アプローチを採用することによって、私たちはそれが実装されて、非難されるように、新旧のコードを維持するのを利用することができます.これは私たちが開発サイクルで敏捷で敏捷であることを可能にします.また、開発者コードを回避し、別の開発者が異なる機能で動作するように要求重複をプルします.

結論

これにより、よりスケーラブルでメンテナンス可能なアーキテクチャの一般的な概要を定義しました.ある程度、このアーキテクチャはあなたのフロントエンドライブラリに不可知論であり、あなたのチームのニーズに変更されることを意図しています.として、プロジェクトは生きていると変化している生物、そして私はFallible、何かを逃している場合は私に知らせてください.フロントエンドの構造に対するあなたの好みまたは好ましいアプローチは何ですか?以下のコメントで私に知らせてください.私はあなたから聞いて大好きだ!
あなたがこれのスターター版を望むならば、関連はここで提供されました:React-Starter
あなたが役に立つか役に立つとわかるならば、共有してください💓, 🦄, or 🔖. ありがとう