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 July 30, 2021

Want this course?

ClojureScript Frontend: An Eric Normand Signature Course

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.

Video time: 08h43m
0 / 37
0 / 37

Lessons

9 min Free

1. Re-frame Stack Overview

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

20 min

2. Getting Set Up

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.

24 min

3. Reagent components

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

7 min

4. Basic HTML with Hiccup

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

5 min

5. Hiccup true, false, and nil Attributes

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

6 min

6. Hiccup Style Attributes

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.

5 min

7. Hiccup class Pattern

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

5 min

8. Hiccup id and class Shortcuts

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

3 min

9. Hiccup Nested Tag Shortcut

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

11 min

10. React Events

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.

6 min

11. Hiccup and subcomponents

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

16 min

12. Hiccup lists, keys, and laziness

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.

19 min

13. Accessing DOM nodes

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.

27 min

14. Form component best practices

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.

19 min

15. Reagent Atoms

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

15 min

16. Component Re-rendering

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.

6 min

17. Embedding strings of HTML

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.

9 min

18. Embedding Native JS React Components

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.

14 min Free

19. Re-frame flow overview

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

10 min

20. Dispatching Events

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.

20 min

21. Handling Events

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.

10 min

22. Effect Handlers

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

12 min

23. Co-effects

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.

8 min

24. Interceptors overview

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.

19 min Free

25. Interceptor example

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

14 min

26. HTML DB Isolation

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.

15 min

27. Subscriptions

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.

18 min

28. Reactive Subscriptions

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!

13 min

29. Reactive Subscriptions walkthrough

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

16 min

30. Choosing where to store state

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.

18 min

31. Naming Events and Subscriptions

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.

11 min

32. Initialization recommendations

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

23 min

33. Deeply nested databases

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

16 min Free

34. Keep Events and Subscriptions Together

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

22 min

35. Calculations in Subscriptions

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.

39 min

36. Indexed Entities

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.

14 min

37. Indexed Entity Order

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?

Extra 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.