Kasper kasper573

Frontend guidelines

This document explains what practices to follow while working in the frontend codebase.

Coding

Keep it simple

Solve the problems at hand. Avoid premature optimization and architecture. Refactoring is and should be simple.

Use Typescript

State management

Use mobx in strict mode for state management and follow the flux architecture. This yields a unidirectional data flow:

state -> view -> action -> state

This creates a natural separation between view and state, which simplifies testing and makes the flow of code easier to follow.

Using state

Application structure

This document explains how the application code flows and is structured, ie. "what code goes where" and teaches you application specific terminology.

The application is a Single Page Application bundled by webpack.

Webpack outputs an index.html with the script tags required to bootstrap the application already embedded. All required assets and scripts will be output to the dist folder. To serve the application simply serve the dist folder.

In development we use webpack-dev-server to automate this process, so this is something that you only need to care about if working with the build or deployment infrastructure.

In production we also render the application server side to improve SEO (see server.tsx).


	// Declare and name FormField instances containing the state of form fields.
	const fields = {
	name: new FormField(),
	age: new FormField(),
	description: new FormField()
	};

	// Render a Form component, which automates the presentation of these fields.
	// Internally it analyzes the type of each field and chooses the proper control component to render per field.

	import {when} from 'mobx';
	import {Resource} from './Resource';

	describe('Resource', () => {
	it('initial value is the default value when default getter is available', () => {
	const defaultValue = 1;
	const asyncValue = 2;
	const r = new Resource('test', async () => asyncValue, () => defaultValue);
	expect(r.value).toBe(defaultValue);
	});

	type AProps = {foo: string, prop?: string};
	type BProps = {bar: number};

	class A extends React.Component<AProps> {}
	class B extends React.Component<BProps> {}

	class AB extends React.Component<AProps & BProps> {
	render () {
	const {aProps, bProps} = split(runtime AProps, runtime BProps, this.props);
	return (

	import {I18nStore} from 'state/I18nStore';
	import {SnackStore} from 'state/SnackStore';
	import {CookieStore} from 'state/CookieStore';
	import {cookieConsentBehavior} from './cookieConsentBehavior';

	describe('cookieConsentBehavior', () => {
	let cookieStore: CookieStore;
	let snackStore: SnackStore;
	let i18nStore: I18nStore;

	import * as React from 'react';
	const hoistNonReactStatic = require('hoist-non-react-statics');

	/**
	* Decorator to form a HOC that acts like a react context consumer.
	* Useful when you want context to be made available in an entire component and not just in render.
	*
	* Example:
	* type MyContextProps = {foo: string};
	* const MyContext = createContext<MyContextProps>({foo: 'bar'});

	/**
	* Updates the RouteStore with static routes.
	*/
	export function setStaticRoutes ({state, apiClient}: AppContextProps) {
	state.routes.setRoot(() => ({
	// Require locale url prefix
	path: `:locale<${localeRegexString}>`,
	populate: () => state.i18n.availableLocales,

	// Always render the Layout

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Edge 100% height window resize issue</title>
	<style type="text/css">
	html, body, #root {
	width: 100%;
	height: 100%;
	margin: 0;