Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa4d787

Browse files
committed
Updates some typos and flow up until no. 7 of the basic counter #44 
1 parent a47b24c commit aa4d787

File tree

2 files changed

+31
-28
lines changed

2 files changed

+31
-28
lines changed

‎README.md‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@ When compared to _other_ ways of organizing your code,
6565
+ Easier to _understand_ what is going on in more advanced apps because there is no complex logic,
6666
only one basic principal
6767
and the "_flow_" is _always_ the same.
68-
+ ***Uni-directional data-flow*** means "state"
68+
+ ***Uni-directional dataflow*** means the "state"
6969
of the app is always _predictable_;
70-
given a specific starting "state" and sequence of update actions
70+
given a specific starting "state" and sequence of update actions,
7171
the output/end state will _always_ be the same. This makes testing/testability
7272
very easy!
7373
+ There's **no** "***middle man***" to complicate things
7474
(_the way there is in other application architectures
7575
such as
76-
[Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_.)
76+
[Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_).
7777

7878
> _**Note**: **don't panic** if any of the terms above are strange
7979
or even confusing to you right now.
@@ -118,12 +118,12 @@ Start with a few definitions:
118118
+ **Model** - or "data model" is the place where all data is stored;
119119
often referred to as the application's `state`.
120120
+ **Update** - how the app handles `actions` performed
121-
by people and `update` the `state`,
121+
by people and `update`s the `state`,
122122
usually organised as a `switch` with various `case` statements corresponding
123123
to the different "_actions_" the user can take in your App.
124124
+ **View** - what people using the app can _see_;
125-
a way to `view` the Model (counter) as `HTML`
126-
rendered in a web browser.
125+
a way to `view` the Model (in the case of the first tutorial below,
126+
the counter) as `HTML`rendered in a web browser.
127127

128128
![elm-muv-architecture-diagram](https://cloud.githubusercontent.com/assets/194400/25773775/b6a4b850-327b-11e7-9857-79b6972b49c3.png)
129129

@@ -179,18 +179,20 @@ When you open `examples/counter-basic/index.html` you should see:
179179

180180
Try clicking on the buttons to increase/decrease the counter.
181181

182-
### 3. Edit Some Code!
182+
### 3. Edit Some Code
183183

184184
In your Text Editor of choice,
185185
edit the _initial value_ of the model
186-
(_e.g: change the initial value from 0 to 9_):
186+
(_e.g: change the initial value from 0 to 9_).
187+
Don't forget to save the file!
187188

188189
![elm-architecture-code-update](https://cloud.githubusercontent.com/assets/194400/25780662/adff6418-3323-11e7-8089-fae4bdc515e8.gif)
189190

190191
### 4. Refresh the Web Browser
191192

192193
When you refresh the your Web Browser you will see
193-
that the "_initial state_" is now **9**:
194+
that the "_initial state_" is now **9**
195+
(or whichever number you changed the initial value to):
194196

195197
![update-initial-model-to-9](https://cloud.githubusercontent.com/assets/194400/25780667/c84d0bf4-3323-11e7-929d-2019f5face2c.png)
196198

@@ -245,8 +247,8 @@ where your app will be "_mounted to_". In other words your app
245247
will be _contained_ within this root element. <br />
246248
(_so make sure it is empty before `mount`ing_)
247249

248-
The first line in `mount` is to get a _reference_ to the root DOM element <br />
249-
we do this _once_ in the entire application to _minimze_ DOM lookups.
250+
The first line in `mount` is to get a _reference_ to the root DOM element; <br />
251+
we do this _once_ in the entire application to _minimize_ DOM lookups.
250252

251253
#### `mount` > `signal` > `callback` ?
252254

@@ -281,7 +283,7 @@ buttons each time it creates a "_chain reaction_" which almost
281283
instantly _exceeds_ the "***call stack***"
282284
(_i.e. exhausts the allocated memory_) of the browser!
283285

284-
The putting the `callback` in a _closure_ means we can pass a _reference_
286+
Putting the `callback` in a _closure_ means we can pass a _reference_
285287
to the `signal` (_parent/outer_) function to the `view` function.
286288

287289
##### Further Reading on Closures
@@ -296,7 +298,7 @@ or you want _more_ detail/examples,
296298
#### 5.1.1 `mount` > render initial view
297299

298300
The last line in the `mount` function is to _render_ the `view` function
299-
for the first time passing in the `signal` function, initial model ("state")
301+
for the first time, passing in the `signal` function, initial model ("state")
300302
and root element. This is the _initial_ rendering of the UI.
301303

302304

@@ -340,7 +342,7 @@ function update(model, action) { // Update function takes the current model
340342
} // (default action always returns current)
341343
}
342344
```
343-
However this if the "_handlers_" for each `action` were "_bigger_",
345+
However if the "_handlers_" for each `action` were "_bigger_",
344346
we would split them out into their own functions e.g:
345347

346348
```js
@@ -356,12 +358,12 @@ function update(model, action) { // Update function takes the current state
356358
switch(action) { // and an action (String) runs a switch
357359
case Inc: return increment(model); // add 1 to the model
358360
case Dec: return decrement(model); // subtract 1 from model
359-
default: return model; // if no action, return curent state.
361+
default: return model; // if no action, return current state.
360362
} // (default action always returns current)
361363
}
362364
```
363365
This is _functionally_ equivalent to the simpler `update` (_above_) <br />
364-
But does not offer any _advantage_ at this stage. (_just remember it for later_)
366+
But does not offer any _advantage_ at this stage (_just remember it for later_).
365367

366368
### 5.4 Define the `view` Function
367369

@@ -380,8 +382,8 @@ function view(signal, model, root) {
380382
```
381383

382384
The `view` receives three arguments:
383-
+ `signal` defined above in `mount` (_above_) tells each (DOM) element
384-
how to to "handle" the user input.
385+
+ `signal` defined above in `mount` tells each (DOM) element
386+
how to "handle" the user input.
385387
+ `model` a reference to the _current_ value of the counter.
386388
+ `root` a reference to the root DOM element where the app is _mounted_.
387389

@@ -400,10 +402,10 @@ The `view` creates a _list_ (`Array`) of DOM nodes that need to be rendered.
400402
The `view` makes use of three "helper" (_DOM manipulation_) functions:
401403

402404
1. `empty`: empty the `root` element of any "child" nodes.
403-
_Essentially_ `delete` the DOM inside which ever element passed into `empty`.
405+
_Essentially_ `delete` the DOM inside whichever element's passed into `empty`.
404406
```js
405407
function empty(node) {
406-
while (node.firstChild) { // while there are stil nodes inside the "parent"
408+
while (node.firstChild) { // while there are still nodes inside the "parent"
407409
node.removeChild(node.firstChild); // remove any children recursively
408410
}
409411
}
@@ -425,9 +427,9 @@ function button(buttontext, signal, action) {
425427
}
426428
```
427429

428-
3. `div`: creates a `<div>` DOM element and apply an `id` to it,
430+
3. `div`: creates a `<div>` DOM element and applies an `id` to it,
429431
then if some `text` was supplied in the _second_ argument,
430-
create a "text node" to display that text.
432+
creates a "text node" to display that text.
431433
(_in the case of our counter the `text` is the current value of the model,
432434
i.e. the count_)
433435
```js
@@ -446,15 +448,15 @@ function div(divid, text) {
446448
[`elm-html`](http://package.elm-lang.org/packages/evancz/elm-html/latest/)
447449
package, but we have defined them in this counter example
448450
so there are **no dependencies** and you can see **exactly**
449-
how everything is "made" from "**first principals**"_
451+
how everything is "made" from "**first principals**"_.
450452

451453
Once you have read through the functions
452454
(_and corresponding comments_), <br />
453455
take a look at the _tests_.
454456

455457
> _**Pro Tip**: Writing code is an **iterative** (repetitive) process,
456458
**manually refreshing** the web browser each time you update
457-
some code get's **tedious** quite fast, Live Server to the rescue!_
459+
some code gets **tedious** quite fast, Live Server to the rescue!_
458460

459461
### 6. (_Optional_) Install "Live Server" for "_Live Reloading_"
460462

@@ -463,7 +465,8 @@ e.g. if you are on a computer where you cannot install anything,
463465
the examples will still work in your web browser.
464466

465467
Live Reloading helps you iterate/work faster because you don't have to <br />
466-
_manually_ refresh the page each time, simply run the following command:
468+
_manually_ refresh the page each time.
469+
Simply run the following command:
467470

468471
```
469472
npm install && npm start

‎examples/counter-basic/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
// empty the contents of a given DOM element "node" (before re-rendering)
2121
function empty(node) {
22-
while (node.firstChild) { // while there are stil nodes inside the "parent"
22+
while (node.firstChild) { // while there are still nodes inside the "parent"
2323
node.removeChild(node.firstChild); // remove any children recursively
2424
}
2525
} // Inspired by: stackoverflow.com/a/3955238/1148249
@@ -28,7 +28,7 @@
2828
var div = document.createElement('div');
2929
div.id = divid;
3030
div.className = divid; // use divid as CSS class name
31-
if(text !== undefined) { // if text is passed in render it in a "Text Node"
31+
if(text !== undefined) { // if text is passed in, render it in a "Text Node"
3232
var txt = document.createTextNode(text);
3333
div.appendChild(txt);
3434
}
@@ -63,7 +63,7 @@
6363
button('+', signal, Inc), // create button (defined below)
6464
div('count', model), // display the "state" of Model
6565
button('-', signal, Dec) // button to decrement counter
66-
].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
66+
].forEach(function(el){ root.appendChild(el) }); // forEach is ES5, works in IE9+
6767
} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
6868

6969
// Mount Function receives all MUV and mounts the app in the "root" DOM Element

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /