TodoMVC example (Incremental DOM via Sodium)

[clinuxrulz]

code: https://github.com/clinuxrulz/idom-sodium-todo-mvc
live: http://clinuxrulz.github.io/idom-sodium-todo-mvc/index.html

Just wanted to show it is possible to incrementally update the DOM from a view function with is defined declaratively.

Well .... it looks declarative if you squint yours eyes enough.

Instead of defining the view as a pure value and passing it to an interpreter. I just pass the interpreter into the view function directly (saves assembling and disassembling a pure data structure to process the view information). We are kinda pure still because we can pass an interpreter that constructs a pure data structure. (We can still wrap it in a pure function using local side effects.)

Note: The view function is only called once, then a reactive incremental DOM gets constructed from a reactive application state. And the DOM tries to only update the parts of itself that change.

[clinuxrulz]

There is still a connection to all that ILC stuff I keep going on about. Except it is more like the fixed point derivative of the type signature. That is where the derivative of the type signature is the same as the original type signature.

d/dt Cell a = Cell a
d/dt (Cell a, Cell b) = (Cell a, Cell b)
d/dt Cell ([(key, MyType)]) = Cell ([(key, MyType)])
where t is the transaction.

A Cell is made up of its current value and a stream providing the next value of the cell after the current transaction. So Cell contains its own change information for each transaction. That is why the application state is made of many sodium object rather than one Cell holding a data-only structure. It is done to maintain full change information during transaction so the DOM can be update incrementally instead of using a virtual DOM and diffing all the time.

Also fixed point derivative is easier to work with because the programmer does not need to think about processing deltas. Instead he/she just works with the values directly.

Edit: This is actually under-constrained. d/dt Cell a is meant to be Stream a, but Stream a is simply Operational.updates of Cell a. So all the required information for changes during transaction still exists.

Example:
In:

class FirstLastName {
    cFirstName: Cell<string>;
    cLastName: Cell<string>;
}

Your able to know whether FirstName changed, LastName changed, or both or neither during a transaction.

Where as:

class FirstLastName {
    firstName: string;
    lastName: string;
}
let cFirstLastName: Cell<FirstLastName> = ...

You only know if any of them changed or not, and you do not know which one changed (Making you require a either diffing your model or a Virtual DOM).