DIGIT UI: Frontend Architecture Design

Owned by Abhinav Kushwaha
Last updated: Jan 17, 2021 by Sathish P
6 min read

Prerequisite reference study materials

Development and implementation team

Development team

 

Frontend Components

Broadly, the frontend components can be categorized as followings:

  1. CLI Tool

  2. Templates

  3. CSS Library

  4. Component Libraries

  5. UI Modules

The CSS Library, Component Libraries, and UI modules are based on templates created by CLI Tool.

Nomenclature

The first line contains the Architecture Component name or info, the second line has npm-package and in the bracket, we have a template based on which the component will be created.

CLI Tool

This tool will be used to bootstrap libraries and micro frontend frameworks for the DIGIT platform. It contains a “template” folder, which will have several starter apps.

The following will be in the template:

  • Default (WIP) - A default pure js template.

  • React-component (Done) - Starter template to make the component library based on React.

  • Module (React based) - Micro frontend framework, which will act as a base for different modules we will create.

  • … more to come

Features

  • Easy-to-use CLI

  • Handles all modern JS features

  • Bundles commonjs and es module formats

  • create-react-app for example usage and local dev for React-based libraries

  • Rollup for bundling

  • Babel for transpiling

  • Supports complicated peer-dependencies

  • Supports CSS modules

Example

Answer some basic prompts about your module, and then the CLI will perform the following steps:

  • copy over the template

  • install dependencies via yarn or npm

  • link packages together for local development

  • initialize local git repo

 

Templates

The templates have the following folder structure:

The components related to the template are inside the src folder of the template and an example is created to use and showcase the app created by the template.

Architecture

We have two repos:

  • digit-ui-internals - https://github.com/egovernments/digit-ui-internals

    • Meant for eGov development team to build components and default modules.

    • Contains following modules:

      • CSS Library

      • UI Components (presently react-components)

      • Utils Library: Contains Services, Localization handling and React Hooks.

      • UI Modules

        • Core - containing login, routing and global state.

        • PGR

        • FSM

        • PT

        • Payment

  • digit-ui - https://github.com/egovernments/digit-ui

    • Meant for state team to manage, make changes and deploy

    • Import digit-ui-internals modules.

    • Customizations

      • View

      • Services

    • Build and deploy scripts

      • Dockerfile & nginx.conf

      • build-config.yaml

 

 

 

CSS Library

The CSS Library will have all the classes both in the module and compiled form.

 

 

 

 

 

 

Can be imported like

import "@egovernments/digit-ui.css/Button"

or like this for full CSS import

import "@egovernments/digit-ui.css"

Component Libraries

Component Library will have the set of all the required components defined in them.

# Atoms <egov-button text action /> <egov-checkbox name value /> <egov-textarea placeholder /> # Molecules <egov-list data> <egov-list-item /> </egov-list> <egov-searchbox placeholder action /> <egov-list-filter> <egov-input /> <egov-list data /> </egov-list-filter>

Utils Library

This will have the followings:

  • Workflows

  • API handling - API caching and handling strategies will be here, imported, and shared by all modules. Published as a function, can be used by anyone.

  • Internationalization (i18n)

  • getConfig

    • This will be like MDMS config service

    • The default and state configs will be stored on GitHub.

    • getConfig will fetch the latest config on runtime and initiate the module.

default config:

state config:

getConfig:

 

Modules

The module will be a black box for the states, they will only access throw node_modules or CDN. Any state-specific components can be passed during the initialization of the module inside the state’s employee or citizen app.

The modules structure will look like:

The module code is in src and an example is created to show how it will be imported in the core app and can be modified at the state level.

The components passed to the module from the core app are:

  • components (optional): Any custom component that is created outside of module scope.

  • onRouteChange: This is a callback function that will be called by the module itself to alert the core app about the route changes so the sidebar handler can change the active item.

  • theme (optional): This is a set of CSS variables which states can modify to change the theme of the module.

 

 

 

 

 

Eg, PGRModule:

Modules will have the followings inbuilt

  • Theme - this may change if we later decide to use any css-in-js library, like styled-components.

  • Components

  • Routes

  • State management

  • Business logic

  • API integrations

Employee / Citizen App

The app will import the developed module.

Another method will be importing from CDN:

 

https://docs.google.com/spreadsheets/d/1q_JDrzpB1z-Jj6NALgRFfPphX1WBIHjzWUqpJ1y_LJY/edit?usp=sharing

 

At the next phase, the Employee and Citizen app can be rewritten to be a single app with role and permissions based rendering.