Elm language

Functional Programming Language – ELM

Some Basics of Elm

Elm is functional language which is completely different from Object Oriented Programming. It is front end language and used for making single page web apps. Here in this blog i am showing some of basics and examples that must be known by a elm programmer. For this elm must be installed on your system.
This blog assumes that you have basic understanding of programming and some basic knowlegde of elm required. It will make you easy to understand when you gone through these examples.

So you want to be a functional programmer. Firstly you have to understand between OOPS and functional programming. When you switching from oops to functional language then at first sight it becomes odd because it is completely different from each other. I have switched from JAVA to ELM for some time. but functional language is good for learn. The main thing is to considered, no particular programming language matters, the way you think , the way to solve the problems is remain same. Just syntax is changed logic remains the same.

Functional programming is a coding style to develop a software using functions.In this style we concentrate on functions rather than oops concepts.It relay on expressions and declarations rather than statements. Here everything is a function.

Functional programming terminology

Pure functions – Functions that take set of input parameters and have some output. Input parameters should be known and some unknown parameters are there (like static variables).

Function composition – It means a function from two or more functions.

Immutability – Functions state in functional programming is immutable. It does not maintain any state of any data or it has no objects.

Isolate – Functions state in functional programming is immutable. It does not maintain any state of any data or it has no objects. Functions in it are purely isolate , isolate them from rest of the software code . Separating them having less side effects on the rest of software.

Basic architecture of Elm :
It has three components Model, View and Update.

Model : In Elm we represent the state of an application with something called a model. A model is just a data structure that contains important information about the application and store data at any state.
We define it as:

View : The view function takes a model and returns HTML code. Behind the scenes, the div function in Elm produces the <div> element in HTML, and the button function produces the <button> element.
The text function doesn’t represent any HTML tag.
It just displays a plain text by escaping special characters so that the text appears exactly as we specify in our code

Update: When user performs some actions through the View and then update function handles Msg type and return model that again render to the view.

As we initialize our current model and this model sent to run time elm ,then it populate to view. User perform some events from view in the form of Msg type and it goes to update function. On the basis of Msg , update perform some actions and again give model as output and when model changes the updated model populated to the view. It uses virtual DOM instead of static DOM.

Like in our current architecture of Html every time we have to refresh the page but Elm dom is dynamic whenever model changes it again populated to the view.

Example 1: ToDo application (Add data in list,show on UI and perform operations with checking and unchecking the each row)

Models.elm

Msgs.elm

View.elm

Update.elm

main.elm

 

Maybe
It is data structure that help us represent data that may be absent
Example

You can also use this

Result
It is data structure that represents output of computation that may fail with an error

Example 2. ToDo App on add data in the Html table dynamically.

List.elm

Models.elm

Msgs.elm

Update.elm

main.elm

Example 3. Fetch data through JSON(Decode & Encode)

 

Please follow and like us:

Post Author: Ambrish Rajput

Leave a Reply

Your email address will not be published. Required fields are marked *