Introducing SMAG Architecture — Part 5

Angular Directory Structure

This architecture is based on four articles discussing Angular directory structure/Angular Architecture. However, this article is generalized to work with any Front End Framework:

1. Data Access Directory Structure
2. Data Services Directory Structure
3. Data GraphQL Directory Structure
4. Data Models Directory Structure

SMAG Directory Structure

libs
+-- px-illustrator/
|   +-- data-access/
|   |   +-- code-box/
|   |   |   +-- src/
|   |   |   |   +-- lib/
|   |   |   |   +-- +state
|   |   |   |   +-- user.actions.ts,file]
|   |   |   |   +-- user.adapter.ts,file]
|   |   |   |   +-- user.effects.spec.ts,file]
|   |   |   |   +-- user.effects.ts,file]
|   |   |   |   +-- user.facade.mock.ts,file]
|   |   |   |   +-- user.facade.spec.ts,file]
|   |   |   |   +-- user.facade.ts,file]
|   |   |   |   +-- user.reducer.spec.ts,file]
|   |   |   |   +-- user.reducer.ts,file]
|   |   |   |   |-- user.selectors.ts,file]
|   |   |   +-- px-illustrator-data-access-code-box.module.ts,file]
|   |   |   +-- px-illustrator-data-access-code-box.module.spec.ts,file]
|   |   |   |-- px-illustrator-data-access-code-box-testing.module.spec.ts,file]
|   |   +-- index.ts
|   |   |-- test.ts
|   +-- karma.conf,file
|   +-- README.md,file
|   +-- tsconfig.lib,file
|   +-- tsconfig.lib.json,file
|   +-- tsconfig.spec.json,file]
|   |-- tslint.json,file
|   +-- data-graphql/
|   |   +-- src/
|   |   |   +-- lib/
|   |   |   |   +-- user/
|   |   |   |   |   +-- user.fragments.ts
|   |   |   |   |   +-- user.mutations.ts
|   |   |   |   |   +-- user.queries.ts
|   |   |   |   |   |-- user.subscriptions.ts
|   |   +-- index.ts
|   |   |-- test.ts
|   +-- karma.conf,file
|   +-- README.md,file
|   +-- tsconfig.lib,file
|   +-- tsconfig.lib.json,file
|   +-- tsconfig.spec.json,file]
|   |-- tslint.json,file
|   +-- data-models/
|   |   +-- src/
|   |   |   +-- lib/
|   |   |   |   +-- user/
|   |   |   |   |   +-- user.interface.ts
|   |   |   |   |   |-- user.mock.ts
|   |   +-- index.ts
|   |   |-- test.ts
|   +-- karma.conf,file
|   +-- README.md,file
|   +-- tsconfig.lib,file
|   +-- tsconfig.lib.json,file
|   +-- tsconfig.spec.json,file]
|   |-- tslint.json,file
|   +-- data-services/
|   |   +-- src/
|   |   |   +-- lib/
|   |   |   |   +-- services/
|   |   |   |   |   +-- user/
|   |   |   |   |   |   +-- user.service.ts
|   |   |   |   |   |   |-- user.service.spec.ts
|   |   +-- index.ts
|   |   |-- test.ts
|   +-- karma.conf,file
|   +-- README.md,file
|   +-- tsconfig.lib,file
|   +-- tsconfig.lib.json,file
|   +-- tsconfig.spec.json,file]
|   |-- tslint.json,file

Just a couple of points:

Data pre-fixed to each folder

Foremost, you notice that data- has been pre-fixed to each folder. This is to make it apparent to all that we intertwine these folders.

The Data Duo x 2 = 4

Yes, just these four are the core of all data across the app. Just to be cognisant that would be:

1. “Data Access” for state-related files
2. “Data GraphQL” where all GraphQL related files are placed(in our scenario Apollo Client files)
3. “Data Models” where all interfaces(Typescript, Flow, Reason etc.), and mock files will go.
4. “Data Services” where all files related to making HTTP requests and making available to front end go.

They Deserve Their Own Folder

One last point to clarify. Albeit discussed in previous articles on this topic, these four unique elements of our application should be in their own folder. While intuitive to put them in the same folder, or a part of the feature they work with, it can cause major mischief as the app grows.