Motivation (OLD)

Design principle of App Extension

Problem Statement

The current way of building app has the following problem area that the APP Extension is aimed to solve:

  • The developers do not know the starting point

  • The code does not comply to the a10-widget and a10-framework

  • There is a lot of common code that has to be redone for an app to be produced

  • The app development takes a lot of time for even a small dashboard to be built

  • The QA has to test the same functionality again and again

  • Due to the rework the probability of same bug being introduced increases

  • The same logical bug has to be resolved at several code source

Solution Overview

The App Extension is a skeleton app proving the developer all the tools required to build an app. The base will be built on top of a10-gui-framework and a10-gui-widgets. It will act as the starting point for any app to be developed. The core of the app will be owned by the a10 team and the app developer will own the widgets built on top of the core.

Core

The core will contain of first-hand class objects from UI perspective like the Dashboard Container, Wizard Container, Log Container, Form Container and more.

App

The app will instantiate an instance of the base class to produce the desired object instance for e.g., dashboard, wizard or a log widget.

Framework

The framework of the APP Extension will be based on the a10-gui-framework and a10-gui-widgets using React.

Container

A container is a top-level component based on React, which is loaded with a lot of widgets and with particular business logic to render an app. Application developers need to specify a container in the JSON config to decide which type of app to generate.

Widget

A widget is based on a10-gui-widgets as well as the basic units in the app container to provide more features which are described in detail on this page. App developers use the attribute "widget" of the main config to compose the widgets to depict what are functionalities in the app as well as arrange the layout for each widget.

App Extension provides all the widgets for each app container as well as supporting every platform such as HC, ACOS, and TPS.

App Extension DOES NOT allow app developers using their own created React component in a widget config, must use App Extension provided ones.

UI JSON

A JSON configuration that describes the type of application to be generated, starting from the container to the widgets.

Data Source

A data source is a pre-defined request provided by App Extension. App developers can leverage a data source to get asynchronous data and assign it to a widget. Every app developer is able to contribute their desired data requests as data source into App Extension to share.

Action

Action is a set of events working for a widget or container to do something, no matter what a widget to do any event must be executed through an action. Each action also represents a Redux action as far as App Extension.

Basically, most widgets or containers have embedded one or more actions in themselves, that means app developers DO NOT need to tag any action to the config of the widget by default. Of course, App Extension allows app developers to specify action(s) to a widget to reach the purpose as well.

Functionalities

  • Creating custom dashboard

  • Creating global time range slider

  • Creating tenant context

  • Providing authentication/authorization

  • Providing API layer connectivity

  • Providing Localization

  • Providing centralized error handling

  • Creating custom wizards

  • Creating custom configuration of objects

  • Proving all the a10-widgets library access

  • Providing a10-style guidance

  • Providing messaging services

  • Providing all complex calculations pre-done required for plotting different graphs

  • Packaging of an App

  • Generating configs for wizards

  • Creating a tenant / non-tenant based APP

Architecture

Workflow of APP Extension

Interactions

  • The developer will only edit the user file section

  • App developers will just need to include the widgets in defined JSON format

  • We will also try to provide a tool in development mode to generate these config/widgets by taking form inputs

  • For the app developer it will be more of a data entry then development

  • Even the PMs, managers, and customers can do this job then

  • After adding all the configs the APP can be packaged and uploaded, in few hours

  • The App developer will be able to select the data source key for a widget and perform some aggregation supported by the App Extension framework

Debugging

App Extension supports a debugging feature for an app container and all the components or even specific components. Set debug: true in main JSON config to turn global debugging on. On the contrary, set debug: false in main JSON config but set debug: true in some specific components, that represents to debug on those components only.

Debugging messages in browser’s console

Showing the following info regarding each step for an app container:

  • Initialization

  • Parsing JSON config

  • Collecting requests data

  • Fetching requests data

  • Rendering components

  • Error handling

  • Performance

Showing the following info regarding each step for each component

  • Component rendering

  • Component updating

  • Data from API request

  • Calculating values

  • Data result after calculating

  • Error handling

  • UI behavior

  • Performance

Debugging UI

App Ext provides Debugging UI on the app GUI as long as setting debug: true in the main JSON config. App developers are able to see debugging logs on a dialog showing on the GUI page, the logs info can be from app container or all components.

UI JSON Creation Tool

TBD

PreviousICONNextUsing a VIZ

Last updated

Was this helpful?