Re-frame is a ClojureScript web framework built on top of Reagent, which is in turn built on React. It provides a comprehensive approach to create frontend applications (it has no backend story). It provides a place to store application state (the Database), ways to capture user intent (Events), and ways to create reactive calculations (Subscriptions), in addition to Reagent's components. By putting these pieces together, you can build an app that will stand the test of time.
Events, Effects, Co-effects, and Subscriptions! This reference sheet shows you the most common forms of all of these so you can get started with Re-frame right away.
Download Resources
PDFs, code, and other downloads to help you learn Learn the four important React Lifecycle methods you’ll need when using Re-frame, when to use them, and how. Get started with Re-frame right away. A one-page sheet with the basics for creating Reagent components for use with Re-frame. Get started with Re-frame right away.React Lifecycle Reference for Re-frame
Reagent Components Reference Sheet
Written Guides
Pragmatic and in-depth guides to a topic. Your Database is going to contain a lot of important information. When
you鈥檙e first starting out your app, you don鈥檛 know exactly what you鈥檙e
going to store in there. In addition, you don鈥檛 know how you鈥檙e going
to want to access it. Both of these will evolve over time as you
understand more of the domain and you uncover the complexities of your
UI. We want some help from the framework (Re-frame) to help us deal
with this evolution. Reagent is a ClojureScript wrapper around React. It makes it easy to create React components using functions and hiccup, and state managed in Atoms. How do we deal with that little bit of time between when the user clicks and the server confirms the change is saved? Well, like many things in life, there are two ways: optimistically and pessimistically. We look at a sequence diagram to organize the parts of Re-frame. Learn the 4 React Lifecycle Methods you’ll need to know for Reagent/Re-frame and why the other 6 are not needed. Re-frame gives us several places to put our state. So how do we choose? It turns out the decision is easy.Database Structure in Re-frame
Guide to Reagent
Optimistic Update in Re-frame
Re-frame, a Visual Explanation
React Lifecycle for Re-frame
State in Re-frame
Learning Paths
Curated selections of courses on a specific topic If you’re looking to watch absolutely all of the courses on this site, I’ve put together a suggested order. Start at the beginning and just watch everything straight through. Be sure to click those checkmarks to track your progress. Web development is an extremely popular use for Clojure. If you want to learn web programming, here are the courses I recommend you watch. I am assuming you already are familiar with Clojure. Be sure to click those checkmarks to track your progress. Backend You’ll want to learn Ring. It is a unifying set of […]The Everything Learning Path
Web Programming Learning Path
Video Courses
Screencasts, Whiteboards, and Slides produced to help you learn Sometimes we want to see how individual components are built. We want to know how to reproduce common components easily using Re-frame. In this course, we take that approach. We build individual, interactive components, going through the design decisions we have to make. A comprehensive guide to the ClojureScript Single Page Application framework built on top of React and Reagent.Building Re-frame Components
Understanding Re-frame
Video Lessons
Parts of courses on specific topics Sometimes we need to get a reference to the real DOM node that React normally manages for us. For instance, when we need to play an embedded video, the API requires access to the DOM node of the video element. React gives us a feature called Refs that let us get access to any DOM node it creates. You know those HTML components that show you some headers and let you expand the content underneath? Yeah! Let’s build one! We look at the basics of representing HTML with Hiccup, which is a very convenient way of embedding markup right in our code. In this lesson, we learn to move our calculations from our components into Reactive Subscriptions. We don’t want to store calculated values in the database, because that would de-normalize the data. We learn how calculated subscriptions are a solution to database de-normalization. There are four places Re-frame allows to store state in. We go over a framework of three criteria to decide where to put it. Co-effects are the impure data your Event Handlers need to run. This might include the current value of the Database, the current time, or even a value stored in LocalStorage.Accessing DOM nodes
Accordion Component
Basic HTML with Hiccup
Calculations in Subscriptions
Choosing where to store state
Co-effects
Technical Articles
Down on React? You should check it out from the ClojureScript perspective. I had to choose between Re-frame and Om Next when building a course. Here are the reasons why.6 things Reacters do that Re-framers avoid
Why Re-frame instead of Om Next
