Toilet Paper 78

A short entry in ELM

Problem

You need a statically typed pure functional programming language for web development.

Solution

Evan Czaplicki (@evancz) started to develop Elm as his master thesis in 2012. Elm is a functional programming language with the goal to avoid side effects and focus on simplicity and performance. The code is compiled to JavaScript. Elm comes with REPL, package manager, time-traveling debugger, development server, and quality tooling. Due to static type checking the project is promising to have no runtime exceptions in practice. The compiler is known to give useful hints, infer types, and return guesses for spelling mistakes. All values in Elm are immutable. The language has its own, rather small module ecosystem which is enforcing semantic versioning based on library interfaces. JavaScript interoperability in both directions is possible.

Example

The Elm Architecture is quite popular and its design has influenced the predictable state container Redux. The example code is rendering the user’s Markdown content to HTML and will demonstrate the typical Elm application structure with Model, View and Update.

  • The Model is defining a record containing the application state.
  • The View is a function taking the Model as input and returning HTML markup, representing the application state in a declarative way.
  • The Update function receives the current Model and a Message and returns a new, updated Model.
Toilet Paper #78 ELM Architecture

The resulting application is a continuous loop. New user input results in a change message with content. The update function replaces the model content. The new model is passed to the view function and rendered to HTML using a Markdown library.

Toilet Paper #78 ELM

Try out the online version of the example code under the following link: https://ellie-app.com/43JYBXN4DQ9a1

Cookie Settings

This website uses cookies to personalize content and ads, provide social media features, and analyze website traffic. In addition, information about your use of the website is shared with social media, advertising, and analytics partners. These partners may merge the information with other data that you have provided to them or that they have collected from you using the services.

For more information, please refer to our privacy policy. There you can also change your cookie settings later on.

contact icon

Contact us now