Jest logo “Jest is a delightful JavaScript Testing Framework with a focus on simplicity.” Jest testing framework is used for front-end testing. You can read more about how to test with Jest here. Links https://jestjs.io https://github.com/facebook/jest »
Bruk av Redux Store i Containere og Components. Kort oppsummert (TL;DR) Send “ID” eller andre identifikatorer via Props til komponenten og la komponenten hente data fra Redux Store. Utfordring (Why?) Hvis en del av Redux Store sendes som Props så vil komponenten re-rendres ved endringer av denne Prop/Store. Det er ønskelig at komponenter ikke rendrer unødvendig. Re-rendring trigges av… Endring av Props. Endring av State som endrer Props. Kilder Redux best practices Common pitfalls Filtrering av Redux Store i mapStateToProps() ved help av Selector Kort oppsummert (TL;DR) Bruk Memoized Selector for å filtrere Redux Store til Props når Redux Store er stor. »
Kubernetes logo Kubernetes is described as container orchitrastion. That means how containers are run, exposed and all other operations that might be done on a container. Both Altinn Studio and Altinn Studio Apps consists of many different applications running in docker containers. For the Altinn Studio Apps solution this could possible over time be many thousands containers running different end user apps. Kubernetes is used to manage the containers. »
Markdown logo We’re writing all our documentation using markdown, and we use Hugo for converting the markdown to HTML. Markdown is also used to format text in apps developed in Altinn Studio. Altinn ❤️ Markdown. Links https://daringfireball.net/projects/markdown/ https://en.wikipedia.org/wiki/Markdown https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet https://code.visualstudio.com/docs/languages/markdown https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one »
Material UI logo Material UI is used in Altinn Studio as the React UI library. Material UI was chosen because It is based on the Google’s material design. It focuses exclusively on the React components Can use responsive components provided by the library Can override the style to customize the component to match the application requirements Can save time by using the components in the library instead of creating it from scratch (for example, the navigation drawers, application bar) It uses JSS as a styling solution that exposes a low-level API which helps in advanced overriding and theming mechanism React router is a third party routing library used in Altinn Studio to trigger navigation within the application. »
nginx logo Nginx is used as the load balancer in the Altinn Studio solution. It routes traffic between Repos and Designer, itself running in a docker container. Links https://www.nginx.org https://github.com/nginx/nginx https://hub.docker.com/_/nginx »
Node.js logo Our front-end is built on top of open source javascript/typescript packages from the Node.js ecosystem. We’ve also published our design system on npm. Links https://nodejs.org https://github.com/nodejs/node/ https://hub.docker.com/_/node https://code.visualstudio.com/docs/nodejs/nodejs-tutorial »
Prometheus logo Prometheus is an open-source systems monitoring and alerting toolkit that we use for monitoring. Links https://prometheus.io https://github.com/prometheus/prometheus »
React logo Modulært rammeverk for å utvikle UI komponenter som kan gjenbrukes flere steder i løsningen. Hvert React komponent har en tilstand som gir den data i henhold til hvor i applikasjonen brukeren er og hvilke handlinger som foretas. Vedlikeholdt av Facebook, under MIT lisens. Slik React blir brukt Uten redux Ved bruk av higher order components kan tilstand sendes fra rot-komponenten nedover i komponent-hierarkiet. Rot-komponenten håndterer alt av state, og sender callbacks ned i komponentene, slik at det er mulig og legge til, fjerne og endre komponenter. »
Applikasjonstilstandshåndtering En felles tilstand for hele applikasjonen Tilstanden styres av Actions som håndteres av Reducere som igjen populerer tilstanden. En Action kan f.eks. være “FETCH_POSTNUMMER” Når en slik actions kjøres, så vil en Reducer ta imot og oppdatere tilstanden slik at det er i tilstanden at applikasjonen nå henter postnummer. Når er hentingen er fullført, vil man f.eks. sende en action “FETCH_POSTNUMMER_FULFILLED” som har postnummer-data med som parameter. Reducer håndterer denne handlingen og setter postnummer-data i applikasjonens tilstand. »
