Elm programming language

Elm is a functional programming language for declaratively creating web browser based graphical user interfaces.

Elm uses the Functional Reactive Programming style and purely functional graphical layout to build user interface without any destructive updates.

Description
The primary implementation of Elm compiles to JavaScript and HTML, with the use of CSS styles.

In Elm, Functional Reactive Programming takes the place of event handlers and callbacks; it also manages all screen updates automatically. Purely functional graphical layout takes the place of working with the DOM. Elm also allows Markdown to be embedded directly.

Syntax and Semantics
Elm adopts a Haskell styled syntax, with influences from OCaml and FSharp. For example, "has type" is written with a single colon, and forward and backward function application use the   and   operators where   equals   equals.

Elm has extensible records which safely provide much of the flexibility of Javascript's object model.

The type system supports primitive types like integers and floats, structured data like tuples and records, and custom ADT's.

Elm's version of Functional Reactive Programming is event-driven, meaning that updates are only performed as necessary. It shares the closest resemblance to Event-Driven FRP and Arrowized FRP.

The following program displays the position of the mouse as it moves around the screen, automatically updating the screen in real-time. Note: Elm's import corresponds to Haskell's import qualified.

The value of main is displayed on screen. Function Graphics.Element.show turns any value into a displayable textual representation. Mouse.position is a value that changes over time, called a signal. Function Signal.map ensures that show is applied to Mouse.position every time the mouse moves.

Elm has a small but expressive set of language constructs, including if-expressions, let-expressions, case-expressions, anonymous functions, and list interpolation.

Elm also has both a module system and a foreign function interface for JavaScript.

The predefined functions are in the Prelude module.

Values
Values are immutable:

>> toForm turns any Element into a Form. This lets you use text, gifs, and video in your collage. This means you can move, rotate, and scale an Element however you want.
 * Bool, Int, Float.
 * Char, String, (styled) Text.
 * Time, Date.
 * Element (html structural elements).
 * graphic representations (called Forms), shapes and paths.


 * Records values.
 * Algebraic data types (data clause) values.

Signals
Signals are value varying items and have types as.

They include time varying items (also called behaviors) and event driven sources.

Html form input elements, may vary in style and state. Their generator functions mostly return a pair (element signal, status signal) as in

Dependent signals
Dependent signals are like formula cells in a spreadsheet. They may react to updates of their operand signals.

The one defined as main starts the scanning of the dependency/reaction directed graph to find the independent signal variables for inclusion in the source event loop.

You define signal formulas by using signal filter functions, or by applying lifted value functions to previously defined signals. To apply a function of N parameters, you have to lift the type of a values function to a signals function, either through the lift function, or by applying lift to the function, followed by signal applicative terms as  for functional parameters application exposed below.

You can use a value in a signal position by lifting its type through the Signal.constant function.

Signal as a Haskell's Functor instance
See Functor class def. From Elm's Signal library:

Signal as a Haskell's Applicative instance
See Applicative class def. From Elm's Signal library:

Composable signal transformers. Automatons
This is used to generate signal transformers as a chain.

Individual chain links, with type  behave like computation (side effect) functions with only one parameter.

To chain two of them the input type of the follower must match the output result type of the precedent.

This concept is borrowed from Haskell's arrows (effects sequencing through chaining of morphisms).

You may apply them to a Signal with the Automaton.run library function, specifying the Automaton and a default result for the case of lack of input value.

From Elm's Automaton library:

Containers
See ref.
 * List, Set, Dict
 * Maybe (for optional parameters, and partially defined function results, as Just v or Nothing)
 * Either (error aware results, as Right correct_result or Left error)

To process a list of signals as one:

Tools

 * Online editor and tester: elm-lang.org/try
 * Learn by example
 * Elm libraries
 * Predefined functions.
 * Offline UNIX installation with Haskell's cabal-dev

Examples
Imported module members should be used qualified, except if listed at import module (members...) or when import open is used for namespace inclusion.

Styled text
You may try it in the online editor/compiler/executor.

Polymorphism on Record types
See records.
 * embedding it in a div element


 * compile and test offline

Parameterizing an Elm script
The port FFI (Foreign function interface with JavaScript) feature gives the oportunity to supply parameters at the html level.

Signals (varying) examples

 * lift: is like Haskell's fmap for Signals
 * lift&lt;N&gt; : applies a function of N values to N Signals; it acts like Haskell's Applicative liftA&lt;N&gt;.
 * (<~) and (~) are Elm replacements for Haskell's infix Applicative operators (&lt;$&gt;) and (&lt;*&gt;).

Tictac varying graphics
Using Graphics.Collage library.

Password double field retype checker
With color changing submit button.

Note, as of Elm 0.10 Strings are no longer lists of characters, so the above becomes something more like this: