home

Table of Contents

• devon4ng
  • Motivation
  • Contents
    • Layers
    • Guides
    • Angular
    • Ionic
    • Layouts
    • NgRx
    • Cookbook
    • devon4ng templates

devon4ng

This guide describes an application architecture for web client development with Angular.

Motivation

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.

Contents

• Architecture Overview

This section introduces in an easy way the main principles and guidelines based on Angular Style Guide.

• Client Meta Architecture

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.

Layers

This section provides a condensed explanation about the different layers a good Angular application must provide.

• Components Layer

• Services Layer

Guides

This section introduces concepts to help developers with the tooling and package managers.

• Package Managers

• Package Managers Workflow

• Yarn 2 Support

Angular

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.

• Accessibility

• Angular Elements

• Angular Lazy Loading

• Angular Library

• Angular Material Theming

• Angular Progressive Web Apps

• App Initializer

• Component Decomposition

• Consuming REST services

• Error Handler

• File Structure

• Internationalization

• Routing

• Testing

• Update Angular CLI

• Upgrade devon4ng applications

• Working with Angular CLI

Ionic

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.

• Ionic Getting started

• Ionic to Android

• Ionic Progressive Web Apps

Layouts

Any SPA application must have a layout. So, the purpose of this section is to explain the Angular Material approach.

• Angular Material Layout

NgRx

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.

• Introduction

• State, Selection and Reducers

• Side effects with NgRx/Effects

• Simplifying CRUD with NgRx/Entity

Cookbook

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.

• Abstract Class Store

• Angular Electron

• Mock Service

• Cypress e2e testing

• Angular ESLint

devon4ng templates

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.