Tame the frontend with Elm

Elm is a functional programming language that compiles to JavaScript and allows building robust and safe web apps. Jeremy Fairbank dives into Elm's syntax and its Model-View-Update architecture, explaining the advantages Elm offers for developing frontend apps and how to structure a simple app with pure functions, and shares steps to getting started with Elm.

Elm is a functional programming language that compiles to JavaScript and allows building robust and safe web apps. Jeremy Fairbank dives into Elm’s syntax and its model-view-update architecture, explaining the advantages Elm offers for developing frontend apps and how to structure a simple app with pure functions, and shares steps to getting started with Elm. Jeremy begins by analyzing some of the pain points in the world of frontend development, such as data flow architecture, safety guarantees, and JavaScript fatigue, before exploring Elm’s syntax and the many of the benefits of Elm. Because Elm is a functional language, functions are pure and composable and therefore predictable in their output. Autocurried functions provide building blocks for highly modular and reusable code. Elm code is also terse and declarative, meaning it is easier to read and understand. Elm is also a strong, statically typed language, preventing incorrectly typed programs from compiling and runtime exceptions from occurring. In addition to the typical data types like strings and lists, Elm offers union types that provide a powerful mechanism for representing custom types and the values they can take on. With no null data type, Elm also avoids null-reference errors by supplying built-in union types such as maybe and result that guarantee code handles null-like situations. Jeremy then examines Elm’s architecture, which espouses a unidirectional Model-View-Update pattern. Elm applications provide a view function for displaying their state and an update function for creating new state and represent possible changes to their state via messages, which are typically implemented with union types. While this architecture sounds similar to Redux, it offers greater safety through static typing and pure functions. To better explain how Elm applications work, Jeremy walks you through creating a model, view function, and update function in a simple Elm application. He also discusses how to manage side effects such as HTTP requests in a pure manner via commands. You’ll leave ready to start incorporating Elm into your frontend development.