Now that we know how all things work together, let’s try our Hello World program in couple of ways.
The first and very simple way to impress people
import Html exposing (text)
text “Hello World!”
When you write front end application using Elm, you write everything in Elm including HTML. Will talk about it later. For now when you are in Elm you will everything in Elm except CSS. Let’s look at the code above
import Html exposing (text)
We are importing the Html function sets and we are only exposing text function for this code to work.
text “Hello World!”
All Elm program starts with “main”, this is the entry for browser to know where to start. The main program executes text function which takes just one string parameter and create the DOM element for browser to render. This is the simple and easy to way to do it. But if you were following along you will notice, there is no model, view or update of any kind. Well that is because it is simple hello world program.
When I started learning Angular once I understood the angular life cycle, learning Angular was easy. So I would like to do the same here for Elm also. Elm’s anatomy is simple. In my previous blog, I mentioned what are all the components constitute elm application.
Elm application has three components, model, view and update along with the main entry point. Now let’s look at how the whole thing work.
All elm application starts with entry point main. Elm comes with great bootstrap for us get started call beginnerProgram, which hides all the wiring to connect all the parts. So to get started our main entry point will be something like the following
beginnerProgram (model = data, view = view, update = messageHandlers}
Here we call the main entry point with the three components, model, view and update.
The flow of control
1. On program entry, Elm reads the model data to build the view
2. View generates HTML to render with the data from the model
3. User interacts with view on each user interaction, message gets generated.
4. Messages passed to update function. Update look at the incoming messages and create new instance of the model. (It is functional program, model is immutable)
5. The new model will trigger the creation of new view and the loop repeats.
That is it.
Before you go head first into building, it is good understand the basic architecture of Elm. Most of the application follows one of the MV* pattern. Elm also follows the pattern in a different way. Elm has three distinct parts in the application
Model: As the name suggests the state of the application. You data model. Model defines and holds the current state of the application.
View: This holds the visual representation of the application, HTML, Think of this as HTML template.
Update:These are the events which triggers change in model state which triggers change in view.
With the above architecture, one would always need to have entry point to the application and that is represented by ‘main’. We will see more details how they all fit together tomorrow.
I found this video of Evan Czaplicki’s. For anyone interested in learning Elm, this is a good one to listen to. It is every entertaining and educational at the same time. There are lot of stuff in it but the one thing that caught my eye was ‘Gradual Learning’. Learning to do work in functional language is very difficult for normal programmers. Functional programming is considered theory and it has lot of constraints. The main one sticks out quickly is immutability. For people coming from C# or Java, it is a no go. It is one of the main reason there is not much adoption of functional programming. There are pockets of companies and people building enterprise grade application in functional programming but main stream always found it difficult to adopt.
Coming back to the point which caught my attention ‘Gradual Learning’. If you can get developers going quicker and then build on it over time instead of two month dedicated training will be a big win. For me, Elm provides that and I have experienced it. It is very easy to get started without knowing in and out of FP. You can build simple applications in clean Elm way in five to ten minutes. Compare to when Angular was released, this is steady learning and improving instead of wave of easy to do and then step back and spend time experimenting things before you can hit the next level.
Elm provides lot of boiler plates code for you to get started, over the period you can start to peel the layers and learn under the covers, this provides the satisfaction of progression and learning. You will see that first hand as you go through the tutorials.
Over the next three weeks I am planning to start writing about my journey into creating a crypto currency exchange rates web app using Elm. Two objectives with that,
- Learn to program using Elm
- Create an exchange application where I can subscribe for notification which I would like to use.
I have been using Elm at very small level for experimental purposes. There are lot of frameworks out there to build highly performing web application. Angular Js, React to name a few front runners. I have developed application using Angular 1.x, haven’t really took the plunge into 2.0 yet. So I will not be comparing any other frameworks. I will be focusing on Elm and for the benefits I will quoting other documents in the web.
There are two reasons why I chose to do my web development using Elm
- I am a big fan of functional programming. Elm is pure functional front end framework
- Run time errors, Based on my reading, code generated using Elm will not create ugly runtime errors
Technorati Tags: #elmlang