Elm – Funktionale Frontend-Entwicklung

Elm ist eine funktionale Programmiersprache, die zu JavaScript kompiliert. Eine Besonderheit ist dabei die statische Typisierung, welche es in JavaScript nicht gibt und die in Elm über den Compiler realisiert ist. So erzeugt der Compiler verlässlichen Code, in dem keine Laufzeit-Exceptions vorkommen können. Die statische Typisierung zieht sich dabei durch bis in die View: Das Template, welches in elm-html geschrieben wird, setzt wie React auch auf dem Konzept des Virtual DOM auf.

Die Syntax ist für jemanden ohne funktionale Programmiersprachenkenntnisse anfangs etwas gewöhnungsbedürtig, nichtsdestotrotz sehr klar und meiner Meinung nach schnell zu erlernen. Die folgenden Artikel geben einen Einblick in die funktionale Frontend-Programmierung mit Elm.

Grundlagen

  • Elm lernenFunktionale Frontend-Entwicklung[de | en]

    Elm ist eine funktionale Programmiersprache, die zu JavaScript kompiliert. Eine Besonderheit ist dabei die statische Typisierung, welche es in JavaScript nicht gibt und die Elm-seitig über den Compiler realisiert ist. mehr

  • Elm SetupInstallation und das erste Projekte bauen[de | en]

    Wie installiert man Elm und was für Tools benötigt man, um ein erstes Projekt zu bauen? Anschließend sehen wir uns an, wie die Toolchain für ein Projekt aussehen kann, wenn es über das einfache Hello World hinausgeht. mehr

  • Elm Module und ImportsDas Modulsystem[de | en]

    Durch das Importieren/Laden eines Moduls werden dessen Funktionalitäten im Kontext der importierenden Datei bereitgestellt. In Elm gibt es verschiedene Formen des Modulimports, die wir uns in diesem Artikel näher ansehen werden. mehr

  • Elm FunktionenSyntax, Piping und Currying[de | en]

    Dieser Artikel widmet sich dem zentralen Sprachkonstrukt in Elm: Den Funktionen. Wie sieht die Definition und der Aufruf von Funktionen aus, wie kann man Funktionen über Piping verbinden und was ist überhaupt Currying? mehr

  • Elm Datenstrukturen (1)Listen, Arrays, Sets und Dictionaries[de | en]

    In Elm gibt es verschiedene Datenstrukturen, die Elemente enthalten können. Dieser Artikel widmet sich den iterierbaren Strukturen Listen, Arrays, Sets und Dictionaries. mehr

  • Elm Datenstrukturen (2)Records und Tupel[de | en]

    Records und Tupel können beliebig viele Elemente enthalten – im Gegensatz zu Listen, Arrays, Sets und Dictionaries müssen die enthaltenen Elemente jedoch nicht vom gleichen Datentyp sein. mehr

  • Elm Datenstrukturen (3)Union Types[de | en]

    Durch die Definition eines Union Type erstellt man immer einen neuen Typ. Ein Union Type kann eine Vereinigung verschiedener Typen sein – jedoch muss er dies nicht. mehr

  • Elm MaybeHandling problems explicitely[en]

    Opposed to JavaScript and many other programming languages, Elm does not have the concept of undefined or null values. Of course there are cases in which variables contain nothing or functions cannot return a proper value – but instead of leaving it up to you whether or not to handle these cases, Elm makes them explicit with a type called Maybe and enforces the handling thereof. mehr

  • Elm Type Annotations[en]

    As Elm is a statically typed language, everything has a type. Type annotations are an optional feature and the compiler can infer the types of your functions and value. Even though you do not have to write the type annotations yourself you probably should: They document your code and make it more explicit. mehr

  • Elm Tools and Resources[en]

    A list of tools and resources I found valuable when working with Elm. It contains useful tools that will help in your day to day work and links to learn Elm as well as to deepen your knowledge. mehr

  • Elm Atom Plugins[en]

    Some very good and useful plugins that will enhance your Elm editing in Atom. mehr

  • The Elm ArchitectureSimple, yet powerful – An overview by example[en]

    The beauty of The Elm Architecture lies in its simplicity: It structures applications into four parts and it defines how these interact with each other. In Elm there is only this one determined way to handle interactions and manage state – and it provides a good foundation for modularity, code reuse, and testing by default. mehr