Skip to content

Commit 00e77bf

Browse files
committed
Publish TodoMVC post
1 parent 1633ff2 commit 00e77bf

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

_drafts/react-example-todomvc.md renamed to _posts/2015-10-07-react-example-todomvc.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: Stéphane Legrand
55
---
66

77
[TodoMVC](http://todomvc.com/) is a project which offers the same Todo
8-
application implemented using [MV*][mvc] concepts in most of the
8+
application implemented using [MV\*][mvc] concepts in most of the
99
popular JavaScript MV* frameworks. One of the aims of TodoMVC is to
1010
enable a fair comparison between several frameworks, by providing
1111
implementations of the same application. A [js_of_ocaml (JSOO)][jsoo]
@@ -28,18 +28,18 @@ divides an application into three components:
2828

2929
- the *Model* manages the data, logic and rules of the application;
3030

31-
- the *Controller* manages events from the view and accordingly updates
32-
the model;
31+
- the *Controller* manages events from the view, and accordingly
32+
updates the model;
3333

3434
- the *View* generates an output presentation (a web page for
3535
instance) based on the model data.
3636

3737
For the Todo application, we have three corresponding OCaml
3838
modules. [`Model`][modelsrc] mainly contains the task list and the new
3939
task field value. It uses [`Deriving_Json`][derivingjson] to convert
40-
the data to JSON and vice versa, in order to be able to save/restore
41-
the application state. This module is otherwise written with basic
42-
OCaml code. [`Controller`][controllersrc] produces new models
40+
the data to JSON and vice versa, in order to be able to save and
41+
restore the application state. This module is otherwise written with
42+
basic OCaml code. [`Controller`][controllersrc] produces new models
4343
according to the actions it receives. Whenever a new model is built,
4444
the model becomes the new reactive signal value. We will elaborate on
4545
this point later. [`View`][viewsrc] builds the HTML to display the
@@ -98,7 +98,7 @@ The [main function][main] creates the reactive signal with an initial
9898
(possibly empty) model. The `m` value is of type `Model.t`:
9999

100100
{% highlight ocaml %}
101-
let rp = React.S.create m in
101+
let rp = React.S.create m in (* ... *)
102102
{% endhighlight %}
103103

104104
`React.S.create` returns a tuple, the first part of which is a
@@ -174,7 +174,7 @@ let rl = ReactList.list (React.S.map visible_tasks r)
174174
We create the reactive list via the helper module
175175
[ReactList][reactlistsrc]. As for the previous example, we use
176176
`React.S.map` to build a reactive signal, `r` being again the
177-
primitive signal. The `visible_task` function generates the `<li>`
177+
primitive signal. The `visible_tasks` function generates the `<li>`
178178
elements from the task list, filtered by the current selected
179179
visibility:
180180

@@ -198,7 +198,7 @@ automatically refreshed.
198198
### Signal typing
199199

200200
You may have noticed that the code [includes the following
201-
types](https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L89-L91):
201+
types][types]:
202202

203203
{% highlight ocaml %}
204204
type rs = Model.t React.signal
@@ -213,7 +213,7 @@ for the `update` function from the `Controller` module:
213213
let update a ((r, f) : rp) = (* ... *)
214214
{% endhighlight %}
215215

216-
## Comparison with Elm implementation
216+
## Comparison with the Elm implementation
217217

218218
[Elm](http://elm-lang.org/) is a functional programming language
219219
dedicated to frontend web application development. Elm was designed by
@@ -226,15 +226,16 @@ the structure used in [all Elm
226226
programs](https://github.com/evancz/elm-architecture-tutorial/): a
227227
model, an update function, and a view. Like Elm, our example uses the
228228
functional reactive programming style, enabled in our case by the
229-
React library and the reactive modules `Tyxml_js.R` and
229+
`React` library and the reactive modules `Tyxml_js.R` and
230230
`ReactiveData`.
231231

232232
## Conclusion
233233

234-
The combination of OCaml, js_of_ocaml, and Functional Reactive
235-
Programming provides a killer feature combination for building rich
236-
web clients. OCaml static typing associated with compile-time HTML
237-
validity checking thanks to Tyxml also increase reliability.
234+
The combination of OCaml, js_of_ocaml, and functional reactive
235+
programming provides a killer feature combination for building rich
236+
web clients. Additionally, OCaml static typing can provide
237+
compile-time HTML validity checking (via TyXML), thus increasing
238+
reliability.
238239

239240
[mvc]: https://en.wikipedia.org/wiki/Model-view-controller
240241
[jsoo]: http://ocsigen.org/js_of_ocaml/
@@ -255,3 +256,4 @@ validity checking thanks to Tyxml also increase reliability.
255256
[main]: https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L393
256257
[signalval]: https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L170
257258
[derivingjson]: https://ocsigen.org/js_of_ocaml/api/Deriving_Json
259+
[types]: https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L89-L91

0 commit comments

Comments
 (0)