This document provides an introduction to using Datascript and Reagent for building web applications in ClojureScript. It includes tips on setting up the development environment, creating and rendering elements, and engaging with interactive features like mood changes for a dog profile page. Additionally, it offers prompts for further enhancements and links to relevant documentation and tutorials.

1. Getting started with
Datascript & Reagent
for webapps
Brice Fernandes
@fractallambda
brice@fractallambda.com
tiny.cc/reactive-datascript

2. DataScript:
Datomic-like queries on Clojurescript browser objects
Reagent:
Clojurescript wrapper around Facebook’s
React.js reactive UI library

3. Hints
Use lein cljsbuild auto to rebuild
whenever your files are modified
Create a new tabset in LightTable: ^-space
then search for Tabset: Add a tablet
Create a browser tab in LightTable: ^-space
then search for Browser: Add browser tab

4. Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5

6. Your turn.
Make a basic profile
page for a dog

7. Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5

9. Your turn.
Let a dog change
mood by clicking a
button

10. Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5

11. …
…

12. Listing all dogs

13. …

14. Dog Match-Making

16. …
…

17. Your turn.
Match male dogs of
similar age (~1 year)
into packs and
list possible packs

18. Datomic Query Docs:
http://docs.datomic.com/query.html
Datascript Test Examples:
http://tiny.cc/datascript-test
Datalog/Datascript Tutorial:
http://www.learndatalogtoday.org/

19. !
What Happens
when you change
the DB?

20. …

21. :(Nothing…

22. Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
More Fun with Datascript5

25. …
…

26. 1
2

27. Your turn.
Update
1) The members count
2) The pairings

28. Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5

29. Your turn.
Add to the app :-)
Suggest looking at
one:many relations
(parents / child)

30. Brice Fernandes
@fractallambda
brice@fractallambda.com
tiny.cc/reactive-datascript
?
Bind and Unbind Function from
https://gist.github.com/allgress/11348685