Altinn / Altinn/app-frontend-react

Analysis: Template for app frontend

Open
#200 1 comment 0 reactions 1 assignee Claimed by @nkylstad View on GitHub
kind/analysis
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Description
Decide on needs/scope for a template for app frontend

## In scope
> What's in scope of this analysis?

React app template
- What is the minimum requirement

## Out of scope
> What's **out** of scope for this analysis?

- Templates using other technologies

## Constraints
> Constraints or requirements (technical or functional) that affects this analysis.

How should the app developers include/host the generated .js-file so that it can be referenced from the .netcore app? Can we include it as a static file in the .netcore app? This works ok locally, but we would need to figure out how to handle f.ex .routing when the apps are deployed.

## Analysis
Creating a template can be done in several steps.

### Step 1: A stripped down version of app frontend
Unnecessary functionality/functionality that is strongly connected to the standard app frontend implementation, is removed. This should still then be a working react application, with basic functionality like
- instantiation
- party selection
- receipt
- fetch initial data like
- profile
- instance ?
- languages/texts

already available, as well as some helper functionality like
- get/submit form data
- update validations?

Process-specific views will be removed, and replaced by a generic custom view, that a developer can build on/replace. Developers need to make their own implementation of the different process step views.

Build scripts should be set up and working.

### Step 2
Split app frontend into multiple parts

Split out the parts that might not be so relevant for customization to begin with:
- instantiation
- party selection
- receipt

Outlining some alternatives to do this:

#### Alternative 1: Sub-apps
In Designer, we use the sub-app concept to combine several react applications into one at build time. We could structure the app template in the same way, with a top-level application to control standard functionality like fetching profile/texts/etc, and sub-apps for things like:
- instantiation/party selection
- instance/process
- receipt

This would still mean a lot of code is included in the template, but the app developer would only have to focus on the subapp(s) that are relevant to their needs, simplifying the structure significantly.

#### Alternative 2: Dynamically load js at runtime
Split the frontend into several projects, each of which generate their own .js-file.
Use a top-level application to load relevant .js-files runtime. Not sure if this would actually work, would need to do a POC.
As with sub-apps, this would allow developers to only focus on the relevant parts of their custom app. However, we would not be able to share things like profile/user data accross, each "app" would have to handle that themselves. Might cause some duplicate api-calls.
Would potentially allow us to load smaller chunks of .js at a time. However, we would need to address any security concerns about loading js at runtime.

#### Alternative 3: Multiple .netcore views
Could also potentially help with loading times as we would reduce the size of each .js-file that is loaded at the different stages. However, the same issues regarding duplicate api-calls would be present here.

### Step 3
Publish reusable components/functions to a component library that can be imported, both by custom app frontends and the standard app frontend.
- Form components
- Components in Altinn Shared
- Themes
- Utils

## Conclusion
> Short summary of the proposed solution.

A basic template for app frontend can be created by simplifying the existing standard app frontend and removing code that is unnecessary for a more generic custom implementation.

This can then be extended, both by reducing the template even further by splitting the app frontend into multiple parts, and by moving code/components that are reusable across apps out to npm libraries (or similar) to be imported.

## Tasks
- [ ] Is this issue labeled with a correct area label?
- [ ] QA has been done

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.