@@ -105,35 +105,38 @@ If you have **_any_ questions**, ***please ask***: <br />
105105
106106Start with a few definitions:
107107
108- + ** M ** odel - or "data model" is the place where all data stored;
108+ + ** Model ** - or "data model" is the place where all data stored;
109109often referred to as the application's ` state ` .
110- + ** U ** pdate - how the app handles ` actions ` performed
110+ + ** Update ** - how the app handles ` actions ` performed
111111by people and ` update ` the ` state ` .
112- + ** V ** iew - what people using the app can _ see_ ;
112+ + ** View ** - what people using the app can _ see_ ;
113113a way to ` view ` the Model (counter) as ` HTML `
114114rendered in a web browser.
115115
116116![ elm-muv-architecture-diagram] ( https://cloud.githubusercontent.com/assets/194400/25773775/b6a4b850-327b-11e7-9857-79b6972b49c3.png )
117117
118118<br />
119- If you're not into flow diagrams, don't worry, there not everyone is, <br />
120- a _ much_ more "user friendly" _ explanation_
121- of ** The Elm Architecture** ("TEA") <br />
122- is
123- [ ** Kolja Wilcke** 's] ( https://twitter.com/01k/status/986528602635358208?s=20 ) _ fantastic_
124- [ "View Theater" diagram] ( https://github.com/w0rm/creating-a-fun-game-with-elm/blob/001baf05b3879d12c0ff70075e9d25e8cc7c4656/assets/the-elm-architecture1.jpg ) :
119+ If you're not into flow diagrams,
120+ here is a much more "user friendly" explanation
121+ of The Elm Architecture ("TEA"): <br />
125122
126123<div align =" center " >
127124
128125![ elm-architecture-puppet-show] ( https://user-images.githubusercontent.com/194400/41206474-62d1a6a4-6cfc-11e8-8029-e27b7aa7f069.jpg )
129126
130- Creative Commons License:
127+ <br />
128+ 129+ [ ** Kolja Wilcke** 's] ( https://twitter.com/01k/status/986528602635358208?s=20 )
130+ [ "View Theater" diagram] ( https://github.com/w0rm/creating-a-fun-game-with-elm/blob/001baf05b3879d12c0ff70075e9d25e8cc7c4656/assets/the-elm-architecture1.jpg )
131+ Creative Commons License
131132[ Attribution 4.0 International (CC BY 4.0)] ( https://twitter.com/01k/status/986528602635358208?s=20 )
132133
133- </div >
134134<br />
135+ 136+ </div >
137+ 135138If this diagram is not clear (_ yet_ ), again, don't panic,
136- it will all become clear when you start seeing it in _ action_ (_ below_ )!
139+ it will all be clarified when you start seeing it in _ action_ (_ below_ )!
137140
138141
139142## _ How?_
@@ -146,6 +149,11 @@ git clone https://github.com/dwyl/learn-elm-architecture-in-javascript.git && cd
146149
147150### 2. Open Example ` .html ` file in Web Browser
148151
152+ > ** Tip** : if you have ** node.js** installed, simply run ** ` npm install ` ** !
153+ > That will install ** ` live-server ` ** which will _ automatically_ refresh
154+ your browser window when you make changes to the code!
155+ (_ makes developing faster!_ )
156+ 149157When you open ` examples/counter-basic/index.html ` you should see:
150158
151159![ elm-architecture-counter] ( https://cloud.githubusercontent.com/assets/194400/25780607/d2251eac-3321-11e7-8e65-9abbfa204fb3.gif )
0 commit comments