Altinn / Altinn/app-frontend-react

Improve performance on lower-end devices

Open
#1,597 0 comments 0 reactions 0 assignees View on GitHub
Epic quality/debt
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Background
When trying to use app-frontend-react on lower-end devices, over slow networks, etc, performance is sub-optimal. There are most likely multiple reasons for this:
1. Our frontend is loaded in one large file, which takes time to download and requires a lot of memory and time to parse/initialize
2. Our APIs are split into many different endpoints, and we have to wait until everything is loaded and ready before we can start filling out forms
3. Unnecessary re-renders (often because we've messed up fetching some state and/or we're using a broad hook for a niche use-case).
4. Redux and Sagas have shown that execution and queuing of lots-and-lots of actions (and their effects) for every form change will slow down the browser. On my outdated old iPad, even typing seems sluggish.
5. The layout hierarchy is re-calculated and expressions are re-executed too often.
6. Other causes not yet known (we should research this by doing some performance testing).

### Proposed solution for problem 1: Code splitting
We should implement code splitting to serve smaller assets to the browser. This would most likely require a restructuring of how we store the app-frontend on CDN.

Resources:
- https://v8.dev/blog/cost-of-javascript-2019

### Proposed solution for problem 2: Serve assets in the index.html file
- https://github.com/Altinn/app-lib-dotnet/issues/108#issuecomment-1420550736

### Proposed solution for problem 3: Clean up
We should clean up these problems by using profiling tools in the browser and find solutions for preventing re-rendering when we don't have to.

### Proposed solution for problem 4: v4
In v4 we're hopefully getting rid of Redux and Sagas entirely, so this problem should vanish with them.

### Proposed solution for problem 5: #1182
- #1182

```[tasklist]
### Tasks
- [ ] https://github.com/Altinn/app-lib-dotnet/issues/108
- [ ] #1182
- [ ] https://github.com/Altinn/app-frontend-react/issues/1867
- [ ] https://github.com/Altinn/app-frontend-react/issues/1974
```

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked tasks (#108, #1182, #1867, and #1974) and profiling app-frontend-react on a lower-end device and slow network. Use the findings to select one cause—code splitting, asset delivery, re-renders, or state-action overhead—and define a measurable improvement. The issue is complete when the selected bottleneck is addressed and the performance gain is demonstrated.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, redux, typescript
Domain
frontend, performance
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.