PurelyFunctional.tv

Would you like to build frontend applications in ClojureScript?

Frontend applications are incredibly complex. They're built using multiple languages (HTML, CSS, and ClojureScript) and they deal with one of the most difficult aspects of programming--the UI. In addition, they're distributed systems by nature--running on a client you can't control!

In short, they're really complicated.

Frontend frameworks are supposed to help you avoid the many problems of web app programming.

Do any of these apply to you?

  • You need to build your application on a solid foundation for the long term--and avoid framework fatigue.

  • You want your framework to guide you to build a better, more maintainable application.

  • You want a clear and straightforward process for building features--not a bag of tools you have to put together yourself.

  • You love highly interactive, fast-feedback development.

  • You already have a backend you need to integrate with--or you're totally flexible.

  • You prefer working in a vibrant ecosystem, where many problems are already solved.

  • A good testing story would be nice.

If you relate to any of those points, Re-frame is my recommended frontend framework for ClojureScript. It is the best (and most popular) way to create frontend applications with CLJS and it addresses all of those points and more.

But like any advanced piece of technology, it's not trivial to learn. The docs are great, but they don't paint as complete a picture as one would like.

In fact, the first time I read the docs I was quite intimidated by the scope of it. However, once I dove in, I discovered how amazing the framework really is.

So I started talking to people. Here are the problems people had. Can you relate to these?

  • There are so many parts to learn--and no clear reason for the apparent complexity.

  • Difficulty understanding the boundaries between React, Reagent, and Re-frame.

  • Lack of a clear process for adding features.

  • Worry that maybe you should learn React first--and how much work that will be.

  • Fear of getting it wrong--and having to redevelop your app later.

I wanted to address all of these concerns with one big course. It would teach the whole React-Reagent-Re-frame stack in a comprehensive tour--and give lots of best-practice recommendations along the way to ensure success.

Introducing: Understanding Re-frame

It's a comprehensive tour of the whole stack. It is what you need to get started building frontend apps in Re-frame with confidence.

After months of work, the course is ready for purchase.

In this course, you'll learn:

  • Exactly the parts of React you'll need to know--you'll be surprised by how little that is!

  • Many tips for using React as a complete HTML view system--and avoiding the complexity trap of traditional HTML views.

  • How to use Subscriptions and Events to isolate your UI components from the database--allowing you to add features quickly.

  • The best practices for naming things to ensure long-term maintainability.

  • How your database should be structured to make your app development and your life easier.

  • and so much more! It's 8 hours long!

Now, I want to be very honest here: building a frontend app will still require a lot of knowledge of CSS and HTML, which I don't go into much.

And this course does not contain anything about accessing a backend or testing. Those are two things I really wanted to put in, but, frankly, each of those is a course in itself. I may make those courses in the future, but both of those issues are well-covered by libraries from the makers of Re-frame themselves.

However, despite those two missing things, this course is awesome and will set you up for success in your frontend app.

I've been getting all sorts of great feedback on this course. And my written Re-frame guides are frequently cited on the Clojurians slack.

This is a chance to look over my shoulder, into my text editor, as I explain the concepts and how to use them. There are also a few lessons with me in front of the whiteboard, diagramming out the whole thing.

Don't miss this chance to build awesome fontend apps!

Understanding Re-frame

Updated June 21, 2018

Want this course?

Team License

$999
Get this course
HD Download
Watch Online
Lifetime Access
For your company
$999.00 – ADD TO CART

Download License

$249
Get this course
HD Download
Watch Online
Lifetime Access
For an individual
$249.00 – ADD TO CART

Online License

$199
Get this course
--
Watch Online
Lifetime Access
For an individual
$199.00 – ADD TO CART

Membership

$49/mo
Get all courses
HD Download
Watch Online
Monthly/Yearly access
For an individual
$49/mo - 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.

Reagent Components Reference Sheet

A one-page sheet with the basics for creating Reagent components for use with Re-frame. 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

Video time: 08h43m
0 / 37
0 / 37

Lessons

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.

Getting Set Up

20 min

Let's get everything set up so you can follow along with the code in the lessons. This lesson shows you how to get the code for this course, navigate around using git tags, and start a development workflow with Figwheel. You'll also see the optional setup of how I use Emacs with Cider to integrate the Figwheel REPL with my editor.

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 Free

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 Free

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 Free

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.

Initialization recommendations

11 min

These are my recommendations for initializing the Database when the application first loads.

Deeply nested databases

23 min

How three built-in Clojure functions help us keep our database organized without much fuss.

Keep Events and Subscriptions Together

16 min

My recommendations for how to organize Events and Subscriptions, which often change together, so that they can be maintained for the long term.

Calculations in Subscriptions

22 min

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.

Indexed Entities

39 min

Because Subscriptions and Events form an interface that encapsulates the structure of the Database, the question becomes "what structure should the Database have?" In this lesson, we explore a small evolution of the Database, from a single use case to a completely general solution. The pattern we use is called Indexed Entities.

Indexed Entity Order

14 min

We restructured our Database to use Indexed Entities, meaning hash maps keyed on the id of the entity. However, by using hash maps, we lost something important: order. Hash maps don't guarantee the order of their elements, so how do we add order back in?