Elm is a functional programming language for declaratively creating web browser based graphical user interfaces.
| Elm | |
|---|---|
| Paradigm | functional reactive, functional |
| Designed by | Evan Czaplicki |
| First appeared | 2011 |
| Stable release | 2.5.8 (August 18, 2005) [±] |
| Typing discipline | static, strong, inferred |
| Filename extensions | .elm |
| Website | elm-lang.org |
| Influenced by | |
| Haskell, Standard ML, OCaml | |
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 HTML, CSS, and JavaScript.
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's adopts a Haskell styled syntax.[1]
The target Javascript object model is disguised as records with extensibility.[2]
The type system adds Int's, tuples, lists and ADT's to the Javascript ones.[3]
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 [4][5] and Arrowized FRP.[6][7]
The following program displays the position of the mouse as it moves around the screen, automatically updating the screen in real-time.
main = lift asText Mouse.position
The value of main is displayed on screen. Function asText turns any value into a displayable textual representation. Mouse.position is a value that changes over time, called a signal. Function lift ensures that asText 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.[1][8]
Elm also has both a module system and a foreign function interface for JavaScript.[9]
The predefined functions are in the Prelude module.[10]
Examples
Record polymorphism
module MyModule where
import Color
type Named a = { a | name : String } -- records with a ''name'' field
getName : Named a -> String
getName {name} = name
dude = {name="John Doe", age=20}
lady = {name="Jane Doe", eyesColor = Color.blue}
names : [String]
names = [ getName dude, getName lady]
fullData = [show dude, show lady]
main = flow down <| map plainText
["Names: " ++ show names
, show fullData
]
- embedding it in a div element
<!DOCTYPE HTML>
<!-- MyModule.html -->
<html>
<head><meta charset="UTF-8">
<title>MyModule</title>
<script type="text/javascript" src="/home/your-account/elm/cabal-dev/share/Elm-0.8.0.3/elm-runtime.js"></script>
<script type="text/javascript" src="MyModule.js"></script>
</head>
<body>
<div id="myId" style="width:100;height:100;"> </div>
<script type="text/javascript">Elm.byId('myId',Elm.MyModule)</script>
<noscript></noscript>
</body></html>
- compile and test
$ elm --make -s --only-js MyModule.elm
$ browser MyModule.html
References
- ^ a b The Syntax of Elm
- ^ Elm - Extensible Records
- ^ Elm - Getting started with Types
- ^ Wan, Zhanyong; Taha, Walid; Hudak, Paul (2002). "Event-Driven FRP". Proceedings of the 4th International Symposium on Practical Aspects of Declarative Languages: 155–172.
- ^ Elm - What is Functional Reactive Programming?
- ^ Attention: This template ({{cite doi}}) is deprecated. To cite the publication identified by doi:10.1145/581690.581695, please use {{cite journal}} (if it was published in a bona fide academic journal, otherwise {{cite report}} with
|doi=10.1145/581690.581695instead. - ^ Elm - The Libraries You Need Automaton as an arrow implementation
- ^ About ElmElm features
- ^ Elm - JavaScript Integration
- ^ Elm's Prelude