Quick introduction on how to use Datascript with Reagent to build web applications. Given to the Cambridge NonDysFunctional Programmers Meetup on November 13th 2014.

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