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!
Want this 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.
A one-page sheet with the basics for creating Reagent components for use with Re-frame. Get started with Re-frame right away.
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.
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.
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.
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.
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
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
We explore how Reagent Hiccup treats attributes with true, false, and nil valued attributes.
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.
Hiccup class Pattern
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
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
We learn of a little-used shortcut for avoiding too much nesting in our HTML tree.
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
Reagent Hiccup allows you to easily embed subcomponents right in the markup of your components.
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.
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.
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.
Atoms are an important feature of Reagent to store state and reactively re-render components that access it.
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
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
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.
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.
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.
Effects are actions your app will take. We specify them using Effect Handlers.
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 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.
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
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 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 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
We walk through exactly how reactive subscriptions will re-calculate so we can reason about them.
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.
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.
These are my recommendations for initializing the Database when the application first loads.
Deeply nested databases
How three built-in Clojure functions help us keep our database organized without much fuss.
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.
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.
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.