Understanding Re-frame

A comprehensive guide to the best ClojureScript frontend framework.

This course is not yet completed. I am still working on it and releasing lessons as I finish them. The course is available as part of the PurelyFunctional.tv Early Access Program, but sales are no longer open. However, members of PurelyFunctional.tv have access to all existing content and any new content that comes out.

Want this course?

Membership

$49/mo
  • HD Downloads
  • Watch Online
  • Full access
  • All Content
  • For an individual
Get access

Love it or leave it guarantee

If you don't learn as much from this course as you thought, just ask for a refund within 30 days and I'll give you your money back.

Extra Resources

Register for a free account or log in to access these resources.

  • Re-frame Components Reference Sheet

    A one-page sheet with the basics for creating Re-frame components. Get started with Re-frame right away.

  • Re-frame Reference Sheet

    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.

  • React Lifecycle Reference for Re-frame

    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.

Understanding Re-frame

Lessons

Video time: 06h17m

0 / 30

Re-frame Stack Overview
  • 9 min
  • free

Let's take a high-level view of the entire Re-frame stack. That includes the DOM, React, Reagent, and Re-frame.

Reagent components
  • 24 min

We look at how to create Reagent components, which are used directly in Re-frame, with some recommendations for best practices.

Basic HTML with Hiccup
  • 7 min

We look at the basics of representing HTML with Hiccup, which is a very convenient way of embedding markup right in our code.

Hiccup true, false, and nil Attributes
  • 5 min

We explore how Reagent Hiccup treats attributes with true, false, and nil valued attributes.

Hiccup Style Attributes
  • 6 min

Normal HTML uses CSS strings in the style attribute. Hiccup breaks that up into a map so that the inline styles are easier to calculate.

Hiccup class Pattern
  • 5 min

HTML tags can have multiple classes separated by spaces. We create a helper function to make it easier to generate them.

Hiccup id and class Shortcuts
  • 5 min

Hiccup gives us a nice shortcut for defining tags with ids and classes. I give my recommendations for how they should be used.

Hiccup Nested Tag Shortcut
  • 3 min

We learn of a little-used shortcut for avoiding too much nesting in our HTML tree.

React Events
  • 11 min

The DOM has its own event system. React wraps it up to make it more consistent across events and across browsers. Learn how to stop the natural propagation of events and the default behaviors of elements.

Hiccup and subcomponents
  • 6 min

Reagent Hiccup allows you to easily embed subcomponents right in the markup of your components.

Hiccup lists, keys, and laziness
  • 16 min

We explore how Reagent deals with lists of elements and how that interacts with React. We address some common warnings that come up when using lists and especially lazy lists.

Accessing DOM nodes
  • 19 min

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.

Form component best practices
  • 27 min

Forms are very important in web applications. They allow you to collect information from the user. We go over some of the best practices for building forms.

Reagent Atoms
  • 19 min

Atoms are an important feature of Reagent to store state and reactively re-render components that access it.

Component Re-rendering
  • 15 min

We need to understand re-rendering in order to control our GUIs. But instead of learning a list of rules, it's better to learn how to uncover what is rendering and why.

Embedding strings of HTML
  • 6 min

Sometimes you have a string filled with HTML and you want that HTML to show up in a component. This is sometimes unsafe (if the HTML was written by a user) but sometimes it's not (if you controlled the HTML generation). Don't do it if it's unsafe, but in this lesson, we look at how to embed that HTML directly in the component.

Embedding Native JS React Components
  • 9 min

If you want to tap into the vast React JS ecosystem outside of the ClojureScript community, you might want to embed some React components written in JavaScript. Reagent has a way to conveniently embed those components.

Re-frame flow overview
  • 14 min
  • free

We take a broad view of all of the parts of Re-frame and how a button click might be translated into Re-frame.

Dispatching Events
  • 10 min

Re-frame is all about giving you places to put things in such a way that it helps you build applications for long term. Events provide a level of indirection between components and the rest of the app.

Handling Events
  • 20 min

We've seen how to dispatch Events, so how do we handle them? We register Event Handlers, which translate Events into Effects, as pure functions.

Effect Handlers
  • 10 min

Effects are actions your app will take. We specify them using Effect Handlers.

Co-effects
  • 12 min

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.

Interceptors overview
  • 8 min

Interceptors are an "advanced" concept. You can go a long way without using interceptors. However, they're very useful for cross-cutting concerns. My recommendation is to watch this lesson now, but not to worry if it doesn't seem useful yet. If you need it later, you'll know it's there.

Interceptor example
  • 19 min

We go over how to identify a cross-cutting concern and implement it as an interceptor. We use Undo as an example.

HTML DB Isolation
  • 14 min

Why are there so many parts to Re-frame? Does it have to be so complicated? In this lesson, I talk about the biggest benefit you get from Events and Subscriptions.

Subscriptions
  • 15 min

Subscriptions let you get values out of the Database and reactively re-render components as that value changes. They provide encapsulation from changes to the Database, so your components won't need to change if you restructure things.

Reactive Subscriptions
  • 18 min

Reactive Subscriptions are a cool way to chain one Subscription onto another. Imagine a long line of Subscriptions. If the first one changes, the second one will recalculate. A new value will bubble out to the end. However, if one of the Subscriptions happens to not change value, it will stop recalculating further down the chain!

Reactive Subscriptions walkthrough
  • 13 min

We walk through exactly how reactive subscriptions will re-calculate so we can reason about them.

Choosing where to store state
  • 16 min

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.

Naming Events and Subscriptions
  • 18 min

How do we name our Events and Subscriptions so that the names won't go out of date? We go over the guidelines with an example.