Before we start understating importance of
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
batman (yes, seriously batman),
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-2branch for the code.
Client.fs copy paste below code. Don't worry about old code, we gonna reach there again.
module Clientopen Elmishopen Elmish.Reactopen Fable.Helpers.Reactopen Fable.Helpers.React.Propsmodule Types =type Model = stringtype Msg =| ChangeStr of stringmodule State =open Typeslet init () : Model * Cmd<Msg> ="", let update msg model : Model * Cmd<Msg> =match msg with| ChangeStr str ->str, module View =open Fable.Core.JsInteropopen Typeslet 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 DEBUGopen Elmish.Debugopen Elmish.HMR#endifProgram.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
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.