@@ -105,35 +105,38 @@ If you have **_any_ questions**, ***please ask***: <br />
105
105
106
106
Start with a few definitions:
107
107
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;
109
109
often referred to as the application's ` state ` .
110
- + ** U ** pdate - how the app handles ` actions ` performed
110
+ + ** Update ** - how the app handles ` actions ` performed
111
111
by people and ` update ` the ` state ` .
112
- + ** V ** iew - what people using the app can _ see_ ;
112
+ + ** View ** - what people using the app can _ see_ ;
113
113
a way to ` view ` the Model (counter) as ` HTML `
114
114
rendered in a web browser.
115
115
116
116
![ elm-muv-architecture-diagram] ( https://cloud.githubusercontent.com/assets/194400/25773775/b6a4b850-327b-11e7-9857-79b6972b49c3.png )
117
117
118
118
<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 />
125
122
126
123
<div align =" center " >
127
124
128
125
![ elm-architecture-puppet-show] ( https://user-images.githubusercontent.com/194400/41206474-62d1a6a4-6cfc-11e8-8029-e27b7aa7f069.jpg )
129
126
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
131
132
[ Attribution 4.0 International (CC BY 4.0)] ( https://twitter.com/01k/status/986528602635358208?s=20 )
132
133
133
- </div >
134
134
<br />
135
+
136
+ </div >
137
+
135
138
If 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_ )!
137
140
138
141
139
142
## _ How?_
@@ -146,6 +149,11 @@ git clone https://github.com/dwyl/learn-elm-architecture-in-javascript.git && cd
146
149
147
150
### 2. Open Example ` .html ` file in Web Browser
148
151
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
+
149
157
When you open ` examples/counter-basic/index.html ` you should see:
150
158
151
159
![ elm-architecture-counter] ( https://cloud.githubusercontent.com/assets/194400/25780607/d2251eac-3321-11e7-8e65-9abbfa204fb3.gif )
0 commit comments