ELM – Environment Setup

Elm – Environment Setup ”; Previous Next This chapter discusses steps to install Elm on Windows, Mac and Linux platforms. Local Environment Setup Consider the steps shown below to install Elm in your local environment. Step 1 − Install node Since elm is compiled to JavaScript, the target machine should have node installed. Refer to TutorialsPoint NodeJS course for steps to setup node and npm Node setup. Step 2 − Install elm Execute the following command on the terminal to install elm. Note that the stable version of elm was 0.18 at the time of writing this course. npm install -g [email protected] After installation, execute the following command to verify the version of Elm. C:Usersdell>elm –version 0.18.0 Step 2 − Install the Editor The development environment used here is Visual Studio Code (Windows platform). Visual Studio Code is an open source IDE from Visual Studio. It is available for Mac OS X, Linux and Windows platforms. VSCode is available at https://code.visualstudio.com/. Installation on Windows In this section, we will discuss the steps to install Elm on Windows. Download https://code.visualstudio.com/. for Windows. Double-click on VSCodeSetup.exe to launch the setup process. This will only take a minute. You may directly traverse to the file’s path by right clicking on File → Open in command prompt. Similarly, the Reveal in Explorer option shows the file in the File Explorer. Installation on Mac OS X Visual Studio Code’s Mac OS X specific installation guide can be found at VSCode Installation-MAC. Installation on Linux Visual Studio Code’s Linux specific installation guide can be found at VSCode Installation-Linux. Step 4 − Install the elm Extension Install the elm extension in VSCode as shown below. Elm REPL REPL stands for Read Eval Print Loop. It represents a computer environment like a Windows console or Unix/Linux shell where a command is entered and the system responds with an output in an interactive mode. Elm comes bundled with a REPL environment. It performs the following tasks − Read − Reads user”s input, parses the input into elm data-structure, and stores in memory. Eval − Takes and evaluates the data structure. Print − Prints the result. Loop − Loops the above command until the user exits. Use the command :exit to exit REPL and return to the terminal. A simple example to add two numbers in REPL is shown below − Open the VSCode terminal and type the command elm REPL. The REPL terminal waits for the user to enter some input. Enter the following expression 10 + 20. The REPL environment processes the input as given below − Reads numbers 10 and 20 from user. Evaluates using the + operator. Prints result as 30. Loops for next user input. Here we exit from loop. Print Page Previous Next Advertisements ”;

ELM – Variables

Elm – Variables ”; Previous Next A variable, by definition, is “a named space in the memory” that stores values. In other words, it acts as a container for values in a program. A variable helps programs to store and manipulate values. Variables in Elm are associated with a specific data type. The data type determines the size and layout of the variable”s memory, the range of values that can be stored within that memory and the set of operations that can be performed on the variable. Variable Naming-Rules In this section, we will learn about the Variable Naming-Rules. Variable names can be composed of letters, digits, and the underscore character. Variable names cannot begin with a digit. It must begin with either a letter or an underscore. Upper and lowercase letters are distinct because Elm is case-sensitive. Variable Declaration in Elm The type syntax for declaring a variable in Elm is given below − Syntax 1 variable_name:data_type = value The “ : ” syntax (known as type annotation) is used to associate the variable with a data type. Syntax 2 variable_name = value– no type specified The data type is optional while declaring a variable in Elm. In this case, the data type of the variable is inferred from the value assigned to it. Illustration This example uses VSCode editor to write an elm program and execute it using the elm repl. Step 1 − Create a project folder – VariablesApp. Create a Variables.elm file in the project folder. Add the following content to the file. module Variables exposing (..) //Define a module and expose all contents in the module message:String — type annotation message = “Variables can have types in Elm” The program defines a module Variables. The name of a module must be the same as that of the elm program file. The (..) syntax is used to expose all components in the module. The program declares a variable message of the type String. Step 2 − Execute the program. Type the following command in the VSCode terminal to open the elm REPL. elm repl Execute the following elm statement in the REPL terminal. > import Variables exposing (..) –imports all components from the Variables module > message –Reads value in the message varaible and prints it to the REPL “Variables can have types in Elm”:String > Illustration Use Elm REPL to try the following example. C:Usersdellelm>elm repl —- elm-repl 0.18.0 ————————————— ——————– :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl> ————————————- —————————————— > company = “TutorialsPoint” “TutorialsPoint” : String > location = “Hyderabad” “Hyderabad” : String > rating = 4.5 4.5 : Float Here, the variables company and location are String variables and rating is a Float variable. The elm REPL does not support type annotation for variables. The following example throws an error if the data type is included while declaring a variable. C:Usersdellelm>elm repl —- elm-repl 0.18.0 —————————————– —————— :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl> —————————————- —————————————- > message:String — SYNTAX PROBLEM ——————————————– repl-temp-000.elm A single colon is for type annotations. Maybe you want :: instead? Or maybe you are defining a type annotation, but there is whitespace before it? 3| message:String ^ Maybe <http://elm-lang.org/docs/syntax> can help you figure it out. To insert a line break while using the elm REPL, use the syntax as shown below − C:Usersdellelm>elm repl —- elm-repl 0.18.0 ————————————– ——————— :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl> —————————————— ————————————– > company — firstLine | = “TutorialsPoint” — secondLine “TutorialsPoint” : String Print Page Previous Next Advertisements ”;