Home - devonfw/devon4ng GitHub Wiki
This guide describes an application architecture for web client development with Angular.
Front-end development is a very difficult task since there are a lot of different frameworks, patterns and practices nowadays. For that reason, in devonfw we decided to make use of Angular since it is a full front-end framework that includes almost all the different patterns and features that any SPA may need and provides a well defined architecture to development, build and deploy.
The idea with devon4ng is to define an architecture which is a compromise between, on the one hand, leveraging the best practices and latest trends like reactive style development, on the other hand, providing a short on-boarding time while still using an architecture that helps us scale and be productive at the same time.
At the same time devon4ng aims to help developers to solve common problems that appear in many projects and provide samples and blueprints to show how to apply this solutions in real situations.
This section introduces in an easy way the main principles and guidelines based on Angular Style Guide.
The goal of this topic is to support the non-functional requirements for the client, i.e. mostly maintainability, scalability, efficiency and portability. As such it provides a component-oriented architecture following the same principles listed already in the devonfw architecture overview.
This section provides a condensed explanation about the different layers a good Angular application must provide.
This section introduces concepts to help developers with the tooling and package managers.
This is the main section of the documentation, where the developer will find guidelines for accessibility, how to use the Angular toolchain, how to refactor components, create libraries and, in general, maintain Angular applications. But last and not least, developers will also find solutions to common problems many of the Angular projects may have.
|
âšī¸
|
All the different topics are demonstrated in the samples folder with a small application.
|
As part of the devon4ng stack, we include a small section to explain how to develop hybrid mobile Ionic/Angular applications and create PWAs with this UI library. As the previous section, the contents are demonstrated in the samples folder.
Any SPA application must have a layout. So, the purpose of this section is to explain the Angular Material approach.
State Management is a big topic in big front-end application. This section explains the fundamentals of the industry standard library NgRx, showing its main components.
The Cookbook section aims to provide solutions to cross-topic challenges that at this moment do not fit in the previous sections. As the Angular section, some of the topics are demonstrated with a sample located in the samples folder.
In order to support CobiGen generation tool for Angular applications, devon4ng demos realization and provide more opinionated samples, the following templates are also included in devon4ng contents:
-
devon4ng-application-template: It is the Angular application template used by the CobiGen code generation tool.
-
devon4ng-ngrx-template: It is the Angular application template used by the CobiGen code generation tool that makes use of NgRx for state management.
-
devon4ng-ionic-application-template: It is the Ionic mobile application template used by the CobiGen code generation tool.
This documentation is licensed under the Creative Commons License (Attribution-NoDerivatives 4.0 International).
