Implement PoC (proof of concept) of the State Management that increase performance

Open
  • Is something wrong?
#231 1 comment 0 reactions 1 assignee View on GitHub

@korel-san is already working on this.

Since Feb 14, 2023.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
20/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start by investigating elf, effector, and ng-state against the stated lightweight, simple, routing-subscription, and session-storage criteria. Then review the existing routing-state parsing and StringHelpers.encodeObjToUrlString usage before creating src/state/actual-route-state.repository.ts. Done means a unified actual route state is available through a local-only repository and no instance exists in production.

Written by the indexing model from the issue text.

Description

Tech debt

The main goal of the task: create State Service that contains the parsed actual route state.

More details:
The routing state depends on the page and functionality of the page. Now many components trying to parse it, which increased code duplication and worked not properly in some cases. So, for the unification of the actual routing state, we consider separating functionality in service, which would handle the actual route state, and every component would be asked from its real data for their purposes.
We don't want to use current state management ngrx due to the high level of tied dependency of the current implementation, so not to add extra naming and have a more lightweight solution, we want to use another tool for this PoC will allow us to not affect the current performance.

Actual implementation plan:

  1. investigate 2-3 state management packages: elf, effector, ng-state
    Points on which we need to focus
  • it should be lightweight
  • it should be pretty simple
  • package should allow to manipulate of routing (subscription, session storage)
  1. create a state folder in the src and add there actual-route-state.repository.ts. In this file, we need to create a repository that would manage the routing state. Please, take into account, that this state management should work only for the local environment. On prod env, this instance should not exist.
  2. In some cases probably you will need to create Adapters that would convert the current routing state to a meaningful one. For example for pages where we have protected query parameters via the encoding of StringHelpers.encodeObjToUrlString. So after this implementation, every developer should be allowed to see the state of this service on every page of the project.
Dominant language
TypeScript
Stars
12
Forks
7
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AbsaOSS/spline-ui

All issues in AbsaOSS/spline-ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.