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)
main = 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.

main = 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

main =

beginnerProgram (model = data, view = view, update = messageHandlers}

Here we call the main entry point with the three components, model, view and update.

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.

When you look at Elm application, you potentially will have view, model and updates all in single Elm file. During deployment, elm will compile this file and spit out, HTML and Javascript.

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

We as the product owners need to know if and when an outage happen, and we need to go in front it rather than knowing by a customer calling support. The good news is that most of the teams understand the need and are ramping up the effort for monitoring. Also, fortunately, most of all our modern applications/APIs have some health check which we rely heavily on monitoring. It is an excellent start; we need to know if the APIs are up and running, but that alone will not help.

Let me introduce to a new term and must have as we embark on building new monitoring and alerting, ‘Synthetic Transaction Monitoring.’Synthetic transaction monitoring is running a script by simulating the most typical user behavior of our application end to end. Think of it as your core smoke test. One is to check if the site is up and API’s are all responding and another is to check if the application as a whole behaving as it is supposed to. Find out what is the most critical and most used path of the user in the application, script the behavior and run in production as often as you can.

During the production release, most of the products run some smoke tests before handing it for manual tests. So we can leverage one or more of those smoke test as synthetic transactions quickly.

The core principals of Synthetic Transaction Monitoring are

It should mimic most typical user behavior of our application end to end.

It can be more than one.

It must be one of the first tests you run right after production release for validation.

We need to run this script as often as we can in production.

Alert if and when it fails.

These monitorings need to run in all environments, not just production.

Make these synthetic transactions as a part of the performance test in CI pipeline so that no one accidentally decreases the performance.

The fourth point “We need to run this script as often as we can in production” is deceivingly simple but it is very critical. We should be able to execute the synthetic transaction every minute. If for some reason the synthetic transactions take more than a minute to run then we need to ask the questions to ourselves;

if that transaction indeed a core user behavior?

If it is core behavior, is it acceptable to have that performance?

One final note, when we start building synthetic transactions, we rely on domain experts and business analyst to develop these behaviors but in long run, we should be able to look at the logs to identify true customer usage and modify these synthetic transactions.

For those coming from Microsoft world. Python tool sets are available to develop in Visual Studio. Recently I was working on a situation where I have check a particular website every couple of hours. I did not know at I have to do it for some time, so first time I did not manually and then second time when I did, I know I have to code it. I remember someone told me Python is available in Visual Studio so I thought I will try python in Visual Studio.

Install:

First thing we need to do is to install python tools. When you start a new project in Visual Studio, pick python and if it is not installed, it will ask you to install python tool set and acknowledge it and install them. It normally take couple of mins to install them.

Now that we have python installed, open VS again and create a new python project. We normally use PIP to install python packages if we were using traditional python programming. We need to do the same in VS environment as well. Here is the stackoverflow question and answer. I followed the first answer and able to install the packages I wanted.

There is a possibility you might find ‘pip’ in there, make sure you follow this comment

@cal97g When the panel is smaller, you just have to change the dropdown menu from “Overview” to “pip”. I just expanded it in the picture to show it all at once

Now that we have pip. Select ‘install selenium’ and that’s it. It will install selenium and we are all set to go.

Selenium:

Now that we have all the pre-requisite. Let’s jump in and start coding. For my testing, I started out with the example from selenium-python documentation. I used the code as it is to see how it works before I start experimenting with it.

I used the above code the chapter 2. Now with no other changes, copy the code in the python file and try to run it. There is a possibility you will run into this error

“selenium.common.exceptions.WebDriverException: Message: ‘geckodriver’ executable
needs to be in PATH.”

We can solve this by getting the latest version of geckodriver from here and adding it to the system PATH. Before you continue, restart the VS so that it has latest path.

Lets try again, now if the path was picked up properly, it should open the firefox. In case you run into an error like this

“Message: Expected browser binary location, but unable to find binary in default location, no ‘moz:firefoxOptions.binary’ capability provided, and no binary flag set on the command line”

It is because it does not find FireFox in the Path. It can be solved couple of ways. One way is use explicit path of Firefox in the code like the example here. But I like the solution of adding firefox.exe to the system path.