Introduction

Before we start understating importance of TEA or The Elm Architecture. We need to go back and try to understand little bit history of web and single page application.

Since the start of web we always wanted to do something on client side. There was a flash and then silver light. If you are old enough then you might remember something like java running in web.

But since the age of JQuery we moved more towards JavaScript. Not to confuse with Java. After that it was taken over by JavaScript nouns like knockout, backbone, angular, batman (yes, seriously batman), react, vue etc. I can literally can go on for whole chapter.

Basically we can write almost any noun and append with js and there is pretty good chance that you will find library.

So, why bother about one more thing? Why bother about Elm or any other library following Elm Architecture?

Let's start with code first.

You can check out chapter-2 branch for the code.

Go to Client.fs copy paste below code. Don't worry about old code, we gonna reach there again.

module Client
open Elmish
open Elmish.React
open Fable.Helpers.React
open Fable.Helpers.React.Props
module Types =
type Model = string
type Msg =
| ChangeStr of string
module State =
open Types
let init () : Model * Cmd<Msg> =
"", []
let update msg model : Model * Cmd<Msg> =
match msg with
| ChangeStr str ->
str, []
module View =
open Fable.Core.JsInterop
open Types
let root model dispatch =
div[ ][
str "Hello World Example"
p[ClassName "control" ][
input[ ClassName "input";
Type "text";
Placeholder "Type your name here";
DefaultValue model;
AutoFocus true;
OnChange (fun ev -> !!ev.target?value |> ChangeStr |> dispatch ) ]
]
br [ ]
span[ ][ str (sprintf "Hello %s" model) ]
]
#if DEBUG
open Elmish.Debug
open Elmish.HMR
#endif
Program.mkProgram State.init State.update View.root
#if DEBUG
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
#if DEBUG
|> Program.withDebugger
#endif
|> Program.run

Too much code just to do hello world... yes, It is. But trust me, if you can do data binding Hello World in seconds using some framework then you are surely going to face problem in future.

Above way of writing code allow us to create self contained components that can be combined, composed and reused in very different variety. It is very much useful when you are scaling your front end application.

If you are still not convinced then watch this small video by Richard Feldman

Still if you don't get things then don't worry. We will understand all things in great detail in this book. So, stay tuned.