Architecture

Overview

Jet is an Angular CLI-generated project that includes useful components, constants, directives, enums, guards, interfaces, services, tokens and types. The components leverage Angular Material for consistency, scalability and extensibility.

Architecture

Composition

Jet comprises the following features layered in succession, saving several hours of development, decision-making, documentation reading and trial and error.

---

No.	Feature	DIY	Jet Lite	Jet
1	Angular CLI project with routing, SCSS styles, without SSR/SSG		✔️	✔️
2	Angular Material with custom theme, global typography styles and animations enabled		✔️	✔️
3	Additional styles and theme optimisations			✔️
4	Angular PWA		✔️	✔️
5	Additional manifest.webmanifest and ngsw-config.json configuration			✔️
6	Angular CLI linting and related packages		✔️	✔️
7	Additional lint rules with recommended configuration			✔️
8	Prettier		✔️	✔️
9	Prettier configuration			✔️
10	Lint-Staged		✔️	✔️
11	Lint-Staged configuration			✔️
12	Husky with pre-commit hook and prepare script		✔️	✔️
13	Commitlint and related packages		✔️	✔️
14	Commitlint configuration and commit-msg hook			✔️
15	Transloco with ar and en languages		✔️	✔️
16	Transloco configuration			✔️
17	Transloco Keys Manager with CLI strategy to manage translation keys		✔️	✔️
18	Transloco Keys Manager configuration			✔️
19	@ngx-env/builder to manage environment variables			✔️
20	App Component rewrite with progress bar, side navigation, bottom navigation, notch handling, toolbar title handling and optimisations			✔️
21	Page Component to manage SEO meta tags of page-level components			✔️
22	Home Page Component for default route			✔️
23	Settings Page Component to manage settings			✔️
24	Analytics Directive to capture events			✔️
25	Alert Service to manage alerts			✔️
26	Analytics Service to manage events			✔️
27	Logger Service to manage logger			✔️
28	Progress Bar Service to manage progress bar			✔️
29	Settings Service to manage settings			✔️
30	Storage Service to manage storages			✔️
31	Toolbar Title Service to manage toolbar title			✔️
32	Update Service to manage service worker updates			✔️
33	Support for multiple languages, including RTL languages			✔️
34	Support for multiple fonts			✔️
35	Support for multiple themes, both light and dark			✔️
36	GitHub issue templates for Bug Report, Documentation Request, Feature Request and Question			✔️
37	Release Please Action with configuration to automate versioning			✔️
38	Helpful project-level VSCode settings in .vscode/settings.json			✔️
39	apple-touch-icon.png, logo.svg, og-image.jpg, robots.txt, sitemap.xml and .npmrc placeholder files			✔️
40	Related constants, enums, guards, interfaces, tokens and types			✔️
41	Helpful index.html tweaks for performance, SEO, security and UX			✔️
42	Helpful package.json scripts to calculate test coverage, commit, format code and update dependencies			✔️
43	TSConfig Paths and Type Checking rules			✔️
44	New features			✔️
45	Regular updates		✔️	✔️

---

Conventions

1. Page-level component names are suffixed with Page (e.g. HomePageComponent, SettingsPageComponent) and use the Page Component to update their SEO meta tags.

2. All file names are suffixed with .<type> (e.g. default-font.constant.ts, settings.interface.ts) for easy navigation.

3. All classes log their initialisation using the Logger Service to help during debugging.

4. Translations are scoped by components, with their selector as the key.

Folder Structure

Jet retains the original structure of an Angular CLI-generated project but organizes elements by type within the app folder. This folder structure works well for small to medium complexity apps. However, as the number of features grows, it is advisable to group elements by feature.

Folder structure

Dependencies

Production

package.json

"dependencies": {
  "@angular/animations": "^18.2.4",
  "@angular/cdk": "^17.3.10",
  "@angular/common": "^18.2.4",
  "@angular/compiler": "^18.2.4",
  "@angular/core": "^18.2.4",
  "@angular/forms": "^18.2.4",
  "@angular/material": "^17.3.10",
  "@angular/platform-browser": "^18.2.4",
  "@angular/platform-browser-dynamic": "^18.2.4",
  "@angular/router": "^18.2.4",
  "@angular/service-worker": "^18.2.4",
  "@jsverse/transloco": "^7.4.3",
  "rxjs": "^7.8.1",
  "tslib": "^2.7.0",
  "zone.js": "^0.14.10"
}

Development

package.json

"devDependencies": {
  "@angular-devkit/build-angular": "^18.2.4",
  "@angular/cli": "^18.2.4",
  "@angular/compiler-cli": "^18.2.4",
  "@commitlint/cli": "^19.5.0",
  "@commitlint/config-conventional": "^19.5.0",
  "@commitlint/prompt-cli": "^19.5.0",
  "@jsverse/transloco-keys-manager": "^5.1.0",
  "@ngx-env/builder": "^18.0.1",
  "@types/jasmine": "^5.1.4",
  "angular-eslint": "^18.3.1",
  "eslint": "^9.10.0",
  "husky": "^9.1.6",
  "jasmine-core": "^5.3.0",
  "karma": "^6.4.4",
  "karma-chrome-launcher": "^3.2.0",
  "karma-coverage": "^2.2.1",
  "karma-jasmine": "^5.1.0",
  "karma-jasmine-html-reporter": "^2.1.0",
  "lint-staged": "^15.2.10",
  "ngx-build-plus": "^18.0.0",
  "prettier": "^3.3.3",
  "prettier-plugin-organize-attributes": "^1.0.0",
  "typescript": "^5.5.4",
  "typescript-eslint": "^8.5.0"
}