@@ -5,7 +5,7 @@ author: Stéphane Legrand
5
5
---
6
6
7
7
[ 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
9
9
popular JavaScript MV* frameworks. One of the aims of TodoMVC is to
10
10
enable a fair comparison between several frameworks, by providing
11
11
implementations of the same application. A [ js_of_ocaml (JSOO)] [ jsoo ]
@@ -28,18 +28,18 @@ divides an application into three components:
28
28
29
29
- the * Model* manages the data, logic and rules of the application;
30
30
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;
33
33
34
34
- the * View* generates an output presentation (a web page for
35
35
instance) based on the model data.
36
36
37
37
For the Todo application, we have three corresponding OCaml
38
38
modules. [ ` Model ` ] [ modelsrc ] mainly contains the task list and the new
39
39
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
43
43
according to the actions it receives. Whenever a new model is built,
44
44
the model becomes the new reactive signal value. We will elaborate on
45
45
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
98
98
(possibly empty) model. The ` m ` value is of type ` Model.t ` :
99
99
100
100
{% highlight ocaml %}
101
- let rp = React.S.create m in
101
+ let rp = React.S.create m in ( * ... * )
102
102
{% endhighlight %}
103
103
104
104
` 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)
174
174
We create the reactive list via the helper module
175
175
[ ReactList] [ reactlistsrc ] . As for the previous example, we use
176
176
` 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> `
178
178
elements from the task list, filtered by the current selected
179
179
visibility:
180
180
@@ -198,7 +198,7 @@ automatically refreshed.
198
198
### Signal typing
199
199
200
200
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 ] :
202
202
203
203
{% highlight ocaml %}
204
204
type rs = Model.t React.signal
@@ -213,7 +213,7 @@ for the `update` function from the `Controller` module:
213
213
let update a ((r, f) : rp) = (* ... * )
214
214
{% endhighlight %}
215
215
216
- ## Comparison with Elm implementation
216
+ ## Comparison with the Elm implementation
217
217
218
218
[ Elm] ( http://elm-lang.org/ ) is a functional programming language
219
219
dedicated to frontend web application development. Elm was designed by
@@ -226,15 +226,16 @@ the structure used in [all Elm
226
226
programs] ( https://github.com/evancz/elm-architecture-tutorial/ ) : a
227
227
model, an update function, and a view. Like Elm, our example uses the
228
228
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
230
230
` ReactiveData ` .
231
231
232
232
## Conclusion
233
233
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.
238
239
239
240
[ mvc ] : https://en.wikipedia.org/wiki/Model-view-controller
240
241
[ jsoo ] : http://ocsigen.org/js_of_ocaml/
@@ -255,3 +256,4 @@ validity checking thanks to Tyxml also increase reliability.
255
256
[ main ] : https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L393
256
257
[ signalval ] : https://github.com/slegrand45/examples_ocsigen/blob/d6766d404a449d0b1d36ad3cd916b0c444390a19/jsoo/todomvc-react/todomvc.ml#L170
257
258
[ 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