Elm Language - Getting Started:
Installation, Package Manager, & Demo
Introduction to Elm
Elm is a Functional Reactive Programming (FRP) language focused on creating reactive graphical user interfaces (GUIs). Functional reactive programming for those that are unaware, is essentially, the implementation of the reactive programming model applied using functional programming techniques. Although Elm compiles to Javascript, the architecture of Elm provides an easier and more concise understanding, so for users who are familiar with functional programming, Elm is definitely an upgrade. Elm provides an elegant command-line interface, a supportive compiler, and an intuitive debugger.
Installation
The first step, is to install the Elm language compiler. This can be done here.
Once you have installed the compiler on your device, you will need a text editor. Atom is a great one, but there are other options available, all with Elm plugins. These include: Brackets, Emacs, IntelliJ, Light Table, Sublime Text, VS Code, and Vim.
Installing Elm on your workstation is made simple by a packaged executable which can be found either through the official install guide or through the project GitHub. Running this executable will make the binaries available to your environment through the terminal and allow you to become productive with the language in a short amount of time.
Package Manager
Following the installation of the binaries you will want to install a number of packages that will increase Elm capabilities without having to write a large library yourself. Elm makes this extremely simple as well as all packages are located in a single repository, package.elm-lang.org, and are installed through the terminal by using the command:elm install "root"/"package". This command modifies the compiler file elm.json to add the required dependencies that your code will call upon when compiling. For example, to install the package that allows you to make HTTP requests, you would type: elm install elm/http.If you find yourself in need of a reminder and don’t want to go searching the web, typing the command elm --help will provide you with a number of helpful reminders.
Basic Elm Demo
The official Elm guide provides a great demo program which I have included below:
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = 0, update = update, view = view }
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
After you type your code into your editor, run the project in your command-prompt or terminal. In order to do that, create a directory where you would store your projects.
Once you created and change to the desired directory, type “elm init” to initialize your source folder that will store all of your elm files. The prompt will also provide a link so the user will have a deeper understanding on how to add files, how to see it in your browser, etc.
To compile the program, type “elm make” and the destination of the elm file.
Once you receive this message, type “elm reactor” to build your project and the prompt will return a link to your server which you can navigate to your elm file.
Once you enter to your server, go to your source folder and your elm file should be available. If you followed this demo your screen should like this.
