How I build Textik or another way to design a front-end web app.
Click here to load reader
-
Upload
anton-astashov -
Category
Internet
-
view
330 -
download
1
description
Transcript of How I build Textik or another way to design a front-end web app.
![Page 1: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/1.jpg)
How I built TextikOr another way to design a front-end web application
![Page 2: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/2.jpg)
Textik
![Page 3: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/3.jpg)
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
![Page 4: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/4.jpg)
Works great, but..
In case of exception it’s hard to figure out what happened
Many inputs, many code paths
![Page 5: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/5.jpg)
The synchronous design
{:foo “bar” :bla “bla” …}
View
Mutators
Rendering
Events
Change data
Global State
![Page 6: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/6.jpg)
Works great, and..
We have only one global code path
We have a full state of the app, when bad things happen
![Page 7: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/7.jpg)
ReactNot really handy to use raw React from ClojureScript
• Om • Quiescent • Reagent
Quiescent
![Page 8: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/8.jpg)
Quiescent• Very lightweight• Simple to use• Opinionless
Cons:
• Slowly developing• Has bugs fixed in Om
![Page 9: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/9.jpg)
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
![Page 10: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/10.jpg)
How cool is that?!!
![Page 11: How I build Textik or another way to design a front-end web app.](https://reader038.fdocuments.in/reader038/viewer/2022100517/5538d32b550346e93a8b485b/html5/thumbnails/11.jpg)
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