This application is generated with Angular CLI.
This is a multi-repo version of the lab, and represents a successor of a mono-repo version. Within this version of the lab each project (app or lib) has its dedicated repository (one project = one repository).
Every project has a specific deployment pipeline. In addition, projects don’t need to share the same dependencies any more. Hence, all projects are versioned with a concrete version numbers (not SNAPSHOT), and everyone can use any version. You have to deal with a private NPM in order to share all versions of projects.
Some teams are writing successful applications leveraging libraries, and at companies like Google and Facebook there is a long tradition of using mono-repos.
The application consumes a restfull API that exposes a JWT enabled authorization (OAuth2) endpoints for managing
StackBlitz is a lightning fast online IDE that allows you to live edit and view this Angular CLI project in-browser: https://stackblitz.com/github/ivans-innovation-lab/my-company-angular-fe
Feature and Presentational Component Design pattern has been called many things such as:
A Feature component is a top level component that contains all other components in our feature. This commonly is a routed component in Angular. Our feature components are responsible for gathering data from various services for our feature to use. If our user saves data the feature component is responsible to pass that data to our Angular Services to save the data to our server API. Feature components are very slim with the amount of application logic. We try to defer this logic to Services if possible. For this example the
blog.component is our Feature Component and it is composed of many Presentational components.
Presentational Components behave like pure functions taking in the data via @Input and emitting data via @Output. This allows the majority of our UI to not know the underlying implementation detail of where the data came from. For example a
side-item.component takes in a @Input of an item to display. This allows the
side-item.component component to have the only responsibility of rendering the item when the data is passed to it.
Many if not most Presentational Components can be abstracted into a style guide or UI library for the project. Using a shared style guide for an organization or project improves reusability, increases the consistency between the different views that form a web application and encourages the communication between the different teams. It can also ensure that a unified brand is used across different products. To get ideas of component design and style guide maintainability I recommend Brad Frost’s book Atomic Design.
There are downsides to this though. As the feature grows in complexity we may have a deeply nested component structure. Since presentation component events only bubble up one level at a time we will have to manually pass up to each parent component. Introducing other sub feature components (
blog-new.component) can help elevate this. The communication between feature components is event driven, and enables loose coupling. For example a
blog-new.component will trigger an event on successfull creation of a blog post, and
blog-list.component is subscribed to it so it can re-fetch and refresh a list of blog posts.
Presentational components are packaged in a [lib/module].(https://www.npmjs.com/package/@my-company-frontend/presentational-components)
Let’s place components into a layout and articulate the design’s underlying content structure:
Our application supports use of potentially unlimited number of different themes. This is useful in itself but these themes will only style components provided by the Angular Material library itself.
We put our general layout and styling to the
main-list-blog.component.scss, but we also create a new file
main-list-blog.component.theme.scss where we are using style rules which have something to do with the color. In our mixin, we retrieved all the necessary theme variables needed for the styling of our custom component.
To use our custom component theme, we have to include it in main styles.scss file.
I like the simple list that Alex Russell lists on What, Exactly, Makes Something A Progressive Web App?.
For this application I have choosen (beta 16) version of @angular/service-worker. It integrates with Angular CLI, search for configuration
"serviceWorker": true in
angular-cli.json. You can find more about the plans for Angular PWA support here: https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7
Please use Lighthouse. It is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. It will generate a nice report for you.
This application requires a restfull API.
Please follow the instructions below to run it:
$ git clone https://github.com/ivans-innovation-lab/my-company-monolith.git
$ cd my-company-monolith $ ./mvnw spring-boot:run
ng serve for a dev server. Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can login with credentials:
Please note that only ADMIN role is authorized to manage (create, update, delete)
ng generate component component-name to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
$ cd src/app $ ng g module users $ ng g component users $ ng g component users/users-new $ ng g component users/users-list $ ng g component users/users-detail
ng build to build the project. The build artifacts will be stored in the
dist/ directory. Use the
-prod flag for a production build.
ng test to execute the unit tests via Karma.
ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via
To get more help on the Angular CLI use
ng help or go check out the Angular CLI README.