Architecture
Last updated
Last updated
Jet is an Angular CLI-generated project that includes useful classes, components, constants, directives, enums, guards, interfaces, services, tokens and types. The components leverage Angular Material for consistency, scalability and extensibility.
Jet comprises the following features layered in succession, saving several hours of development, decision-making and documentation reading.
| 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 | ||||
5 | Additional | |||
6 | ||||
7 | Additional lint rules with recommended configuration | |||
8 | ||||
9 | ||||
10 | ||||
11 | ||||
12 | Husky with | |||
13 | Commitlint and related packages | |||
14 | Commitlint configuration and | |||
15 | Transloco with | |||
16 | ||||
17 | Transloco Keys Manager with CLI strategy to manage translation keys | |||
18 | ||||
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 | ||||
34 | ||||
35 | ||||
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 | |||
39 |
| |||
40 | Related classes, constants, directives, enums, guards, interfaces, tokens and types | |||
41 | Helpful | |||
42 | Helpful | |||
43 | TSConfig Paths and Type Checking rules | |||
44 | New features | |||
45 | Regular updates |
Page-level component names are suffixed with Page (e.g. HomePageComponent, SettingsPageComponent) and use the Page Component to update their SEO meta tags.
All file names are suffixed with .<type> (e.g. default-font.constant.ts, settings.interface.ts) for easy navigation.
All classes log their initialisation using the Logger Service to help during debugging.
Translations are scoped by components, with their selector as the key.
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.
