How I built TextikOr another way to design a front-end web application

Textik

Usual design of web front-end apps

View Model 1

View Model 4

View Model 3

View Model 2

View 3

View 4

View 2

View 1

Works great, but..

In case of exception it’s hard to figure out what happened

Many inputs, many code paths

The synchronous design

{:foo  “bar”    :bla  “bla”    …}    

View

Mutators

Rendering

Events

Change data

Global State

Works great, and..

We have only one global code path

We have a full state of the app, when bad things happen

ReactNot really handy to use raw React from ClojureScript

• Om • Quiescent • Reagent

Quiescent

Quiescent• Very lightweight• Simple to use• Opinionless

Cons:

• Slowly developing• Has bugs fixed in Om

The lifecycle

Init!! Call render

View!!

Render Send payload to channel

Mutators!!

Change dataData

Dispatch!!

Listen to channel Call mutators Call render

via core.async channel

How cool is that?!!

Textik http://textik.com

Textik - source code https://github.com/astashov/tixi

Quiescent https://github.com/levand/quiescent

Links

Mintik - minimal app uses the described architecture https://github.com/astashov/mintik