development

Getting started

The frontend is made up of several React applications. Each application covers a functional area. Technologies and frameworks https://reactjs.org/ https://redux.js.org/ https://redux-saga.js.org/ Structure The applications are grouped by the 2 solutions: Altinn Studio Altinn Apps Altinn Studio Altinn Apps Architecture All of the apps are set up with the same overall architecture: Component: The react component Props: Define how the component should render Store: Contains all global state data used by the components Action: Triggered when a component updates Reducer: Listens to actions and updates the store according to which action is triggered Redux-Saga: Middleware. »

Developing

App frontend Follow the instructions here to set up an app to run locally, up to step 5 (do not do step 6 yet.) Make sure Altinn Studio is not running. If it is, run docker-compose down from altinn-studio/src/studio before proceeding with the instructions linked above. In the app that will be running, edit the <path-to-app>/App/views/Home/Index.cshtml file, and replace https://altinncdn.no/toolkits/altinn-app-frontend/<version>/ with http://localhost:8080/. Run the app (from <path-to-app>/App/): »

React

React React is a library for developing component based applications. It is done by having declared html as xml in javascript code, and that is again transpiled into vanilla javascript for the browser to render into a page. Get started by looking at the Getting started docs or trying the tutorial. Important concepts The 2 most important concepts when working with React components are state and props. State is a collection of properties, controlled by the component, that say what the current state of the component is - this can be used to determine how the component should be rendered. »

Redux

Redux is used to manage the states of the applications. The components update the states in the Redux store, instead of keeping state only within the component. This allows components to easily react to state changes from other components. Redux Toolkit As of 2021, we have started using Redux Toolkit rather than the traditional Redux setup. This allows us to get rid of a lot of boilerplate code. Read more about Redux Toolkit here. »

Debug

Debugging Google Chrome has many debugging tools, but most used in altinn.studio is breakpoints in the react-code. This allows for code to run, and pause at the desired codeline, so the developer can then inspect different values that is present when the desired code is ran. Debugging tools Google Chrome React Devtools Google Chrome Redux Devtools »

App for automated test

Rules Conditional rules Prefill Change of name app This is an app which should only be used to run automated tests against. It contains these components: Title Input Textarea Checkbox Radio button Attachment Datepicker Button Rules The rules appends the text from the text feilds for new first, middle and last name and displays in a new field. The relevant code: nyttNavn: (obj) => { obj.fornavn = obj. »

App template and deps

Process for updating app template and its dependencies Updating app template (Template files + depentent supporting projects) Complete changes in template Get PR approved Push alpha nugets & update reference in Altinn.Apps/AppTemplate Merge to master Complete testing of new feature Once testing is completed and successful Create new branch. Push nugets without alpha based on the branch Duplicate changes in Altinn Studio template Update nuget reference in Altinn Studio template. »

Async programming

The way our solution is built there is a large need for asynchrous functionality. It is important for the development teams to be aware of best practices as well as which antipatterns to avoid. Best Practices Async Antipatterns Keep an eye out for anti-patterns and help the team to maintain a high quality in our code base. Blocking on tasks with .Result When an asynchronous call is needed in a synchronous method, the implementation below is quite common. »

Azure Dev Spaces

This page is a work-in-progress. Currently we don't have azure dev spaces set up for tjeneste 3.0 Azure Dev Spaces Azure dev spaces is an offering from Azure for a rapid, iterative Kubernetes development experience for teams. AZDS gives the opportunity to iteratively run and debug containers directly in Azure Kubernetes Service (AKS) with minimal dev machine setup. You can read more about AZDS, setup and configuration for visualstudio or Visualstudiocode here. »

Azure DevOps

Pipelines Quality checklist and overview of pipelines in Azure DevOps We use Azure DevOps for building and deploying both our solution and the app owners applications. »