Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How I built Textik 
Or 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 
Vi...
Works great, but.. 
In case of exception it’s hard to figure 
out what happened 
Many inputs, many code paths
The synchronous design 
Rendering 
Global State 
{:foo 
“bar” 
:bla 
“bla” 
…} 
View 
Mutators 
Events 
Change data
Works great, and.. 
We have only one global code path 
We have a full state of the app, 
when bad things happen
React 
Not 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 
via core.async 
channel 
Mutators! 
! 
C...
How cool is that?!!
Textik 
http://textik.com 
Links 
Textik - source code 
https://github.com/astashov/tixi 
Quiescent 
https://github.com/le...
Upcoming SlideShare
Loading in …5
×

How I build Textik or another way to design a front-end web app.

1,231 views

Published on

The approach which I used to design http://textik.com, using ClojureScript, React and Quiescent.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

How I build Textik or another way to design a front-end web app.

  1. 1. How I built Textik Or another way to design a front-end web application
  2. 2. Textik
  3. 3. 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
  4. 4. Works great, but.. In case of exception it’s hard to figure out what happened Many inputs, many code paths
  5. 5. The synchronous design Rendering Global State {:foo “bar” :bla “bla” …} View Mutators Events Change data
  6. 6. Works great, and.. We have only one global code path We have a full state of the app, when bad things happen
  7. 7. React Not really handy to use raw React from ClojureScript • Om • Quiescent • Reagent Quiescent
  8. 8. Quiescent • Very lightweight • Simple to use • Opinionless Cons: • Slowly developing • Has bugs fixed in Om
  9. 9. The lifecycle Init! ! Call render View! ! Render Send payload to channel via core.async channel Mutators! ! Change data Data Dispatch! ! Listen to channel Call mutators Call render
  10. 10. How cool is that?!!
  11. 11. Textik http://textik.com Links Textik - source code https://github.com/astashov/tixi Quiescent https://github.com/levand/quiescent Mintik - minimal app uses the described architecture https://github.com/astashov/mintik

×