Tinycanva: Clojure for React Developers

Clojure offers many control flow conditionals, like if-else blocks. In this chapter, we'll study the API of a few such methods.

Atoms are thread-safe containers for handling mutable state. In this chapter, we'll learn how to create and manipulate atoms. We'll also learn how to hook into an atom's lifecycle and execute side-effects.

There are many ways to define a function and parse arguments. In this chapter, we'll learn more about function definition, destructuring and some helpful higher-order functions.

Clojure sequences are abstract. In this chapter, we'll make sense of what exactly we mean by that, and learn about common operations.

Nested calls can become hard to manage. Threading macros help us take control. In this chapter, we'll learn about the concept of threading macros and study three commonly-used versions.

Clojure lets you write code close to the metal ie the host language. In this chapter, we'll learn about constructs and techniques to interact with JavaScript within Clojure.

Walkthrough the components and concepts we will implement, with a video demo of the final app.

In this chapter, we will bootstrap a project using create-cljs-app and understand the code generated. We'll also study Hiccup, a CLJS alternative for JSX, and various ways to require namespaces.

Reagent is a minimalist Clojure wrapper for React. It exposes all React APIs including hooks and is one of the most popular Clojure projects. This chapter is a theoretical introduction to Reagent. We'll learn about components, third-party integrations and local state.

We have already learned how third-party components fit with Reagent. In this chapter, we'll implement React Router in the Tinycanva app.

In this chapter, we'll set up our UI library and CSS build process using PostCSS.

Reframe is a flux-like library for uni-directional data flow. In this chapter we'll study the six-step Reframe loop.

Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!

Set up Firebase project and configure authentication.

In this chapter, we'll initiate the Reframe loop for our login form, dispatch form submit events and handle them, ie implement steps 1 and 2.

We dispatched an event and wrote a handler. The handler returned an effects map, with a custom effect `:firebase/email-auth`. In this chapter, we'll create the custom effect handler and initialize the Firebase app.

In this chapter, we'll connect the UI to the Reframe loop and create loading indicators and subscriptions to check if the user logged in successfully.

We have authenticated our users, but now they're stuck on the login screen. This chapter is about building re-usable containers to redirect users to authorized pages.

In this chapter, we will integrate Reframe and Firebase to save the graphic "entity". This is analogous to a POST request with a traditional REST API.

Create Reframe handlers to read and delete graphics. Analogous to GET and DELETE in a REST API.

Integrate Reagent and Reframe to create UI for listing and deleting graphics.

Making graphic list items clickable; and the editor(detail) route. In the process, we'll learn how to use React's Higher Order Components with Reagent.

In this chapter, we will integrate FabricJS with our app and create an HTML canvas-based editor.

We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase. We will also extend the editor functionality.

Packaging an app consists of multiple steps, like configuration, minification etc. In this chapter, we'll package our app with production configuration and create an optimized JS bundle, that can be deployed on any CDN.

Large apps degrade user experience and one way to control that is to split our code into chunks. This chapter will walk through tools afforded by Shadow to split our app code. We'll also implement the splits and analyze performance gains.

Shadow comes bundled with a test runner. Clojure comes bundled with a unit testing library. In this chapter, we'll implement the two and learn about testing techniques for Reframe handlers.

Going forward - information about online Clojure communities, server-side Clojure concepts, companies and job boards.