Home

Awesome

functional-frontend-architecture

This repository is meant to document and explore the implementation of what is known as "the Elm architecture". A simple functional architecture for building frontend applications.

High level overview

The entire state is contained in a single data structure. Things can happen and the state should change accordingly. The number of things that can happen is described as a set of actions. Actions flow unidirectionally down the application. Actions are handled by pure update functions. Such a function takes an action and a state and returns a new state. The state is handed to a view function that returns a virtual DOM representation. A module is an encapsulated set of actions, an update function and a view function. Modules can be nested inside other modules and modules can contain other modules. This makes the architecture nestable and modular.

Features/goals/ideas

Documentation

Examples

Libraries

The architecture is implementation independent. It can be implemented with varied combinations of libraries. It only requires a virtual DOM library and a way to update JavaScript data structures without mutations. Having a nice representation of actions is also useful.

Virtual DOM libraries

The view layer in the architecture consists of pure functions that takes part of the applications state and returns a description of it's view. Such a description will typically be a virtual DOM representation that will later be rendered with a virtual DOM library. A number of options exists.

Updating data structures

When handling actions inside update functions it is necessary to update ones state without mutating it. Libraries can provide a help with regards to this.

Representing actions