Client

The A12 architecture puts a strong emphasis on simplifying client-side application development. It features a pre-configured build setup, engines for working with models and widgets for reusable UI components.

Standards where possible – Individual solutions where necessary

All parts of A12 – BAP Client, Engines, Widgets, and Plasma– are designed for extensibility and customizability. A12 aims at providing stable solutions for recurring problems while allowing for individual application-specific additions where necessary:

  • Application-specific UI parts can use Plasma directly
  • Application-specific components can coexist and interact with Widgets and Engines on the same screen

Plasma, Widgets and Engines provide structures and conventions, which can be used and applied to project-specific components and code.

The BAP client features a well-designed layered architecture. All code is written in Typescript (popular type-safe variant of JavaScript) and fully embraces React, Redux and useful extensions like Redux Sagas for handling asynchronous work and communication. A12 client services like localization, validation and logging is built on this foundation. The A12 Plasma widgets are pure React UI components and are the building blocks for the A12 engines, which compose the widgets according to a form model.

The BAP core and extensions (blue boxes in Fig 1) provide all means to develop applications. The core is central for a working application and extends Redux with some useful abstractions:

  • The application model specifies UI interactions, menus, routing and UI component resolution. It can be defined in a UI tool editor.
  • Activities as an abstraction for units of work in the client. Activities can depend on each other but also run in parallel. This abstraction provides the foundation for master/detail, multitasking etc.
  • Application frame and a flexible UI architecture around layouts, regions and views. Regions can be nested and use a layout to show its sub-regions and views. Engines, widgets and any UI containers are rendered in the views. The UI can is driven by the application model based on which activities are currently running. Activities drive views.
  • The Data Hub is responsible for loading data for the activities, like a data document to edit in a form, or the list of search results in a list view. It is completely decoupled from the UI and runs in the background. Actual data loading/saving is delegated to registered data loader components.

The BAP core supports modularization (bottom-up construction of an app made of modules).

The BAP client extensions is a collection of features that extend the core functionality, including dirty handling, showing static pages (like FAQ, help), deep linking, notifications, the connector for the A12 services, fully automated presentation of lists, forms, and relationships between data documents including loading, validation and saving.

React/Redux

component written in TypeScript and React/Redux. It is designed for optimal integration into BAP Client based applications, but it can also be used as a standalone component in any Redux, React or even non-React application.

The Form Engine is fully integrated into the BAP Client Activities and Views mechanisms. All data loading, manipulation and persistence is done using BAP Client APIs. The Form Engine can be placed inside of BAP Client Layouts.

Like the BAP Client, it supports common A12 APIs like localization, validation and logging.
The Form Engine provides a great range of customizing APIs for rendering and behavior.

Rendering is done using A12 Widgets by default and can be customized in a very fine-grained way on Widget and Form Model level. This allows to slightly tweak or completely replace parts of the UI, from a single input field to a complete section.

All behavior like changing values, validation/computation or navigation is implemented as Redux middlewares, strictly separated from the UI. The built-in behavior can therefore be changed or completely replaced – completely independent from UI customizing.

„React in a Big Way“
Baschir Jaghoori and Martin Backschat are sharing their experiences of developing a React-based framework.
Read more