Anatomy of Elm

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.

The flow of control

clip_image001

  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.

Elm – Basic Architecture

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.

Elm – Gradual Learning

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.

Starting out with Elm

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,

  1. Learn to program using Elm
  2. 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

  1. I am a big fan of functional programming. Elm is pure functional front end framework
  2. Run time errors, Based on my reading, code generated using Elm will not create ugly runtime errors
Technorati Tags:

Synthetic Transaction Monitoring

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.

Getting started with Python & Selenium

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.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Firefox()
driver.get("http://www.python.org")
assert "Python" in driver.title
elem = driver.find_element_by_name("q")
elem.clear()
elem.send_keys("pycon")
elem.send_keys(Keys.RETURN)
assert "No results found." not in driver.page_source
driver.close()

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.

 

MS Orleans 1.2 data persistence

In my opinion, Orleans under appreciated framework out there. It is by far one of the best framework came out of MS. I knew of Actor models from Erlang and Scala and what it gives and finally to see it in MS was amazing.

Here are the reasons why I like Orleans or more to do with Actor implementations

  • As a developer, it is easy to write a single threaded model program. In Orleans, all the code we write will be single threaded program.
  • Concurrency is very difficult and Orleans hides those details from development.
  • Each grain holds its state and handles reading and writing to the back end store. I thought it is pretty cool. This kind of eliminate the data layer/ORM layer from our development mindset.

There are more reasons for why would one like Orleans. But I want to stop at the third point and explain a problem I ran into and how Orleans team helped me fix it.

I was following an example to learn data persistence. Most of the document on the web are all kind of old and if you were to get the latest version from the Orleans (as of writing it is 1.2.0) you get latest version and they did change the template model for how one would use data persistence.  Earlier you would need a configuration file to let Silo know how to build the persistence. From 1.2.0, it is done through program. Based on what I see there is a method to load from configuration but I did not try it.

So far anyone following example, everything is same except couple of things, starting 1.2.0. They are

  • Now you should see a new file in the project called orleanshostwrapper.cs
  • This code loads Silo with proper configuration.
  • By default, it sets the data provider as “MemoryStore”.
  • If you want to change it, you can change it by changing the default parameters of “config.AddMemoryStorageProvider();” method call.
  • In the old model, the state objects were defined as interface, now change that to standard class. If you get an error that undefined variable, make sure the field in the class is ‘Public‘.

I was stuck on this issue for a day or two till I got great help from Sergey. Thanks a lot for the great help.