Welcome to

Tinycanva: Clojure for React Developers

Example Code Download

You can download the complete example code by clicking here.

Getting Started

5 lessons

Installation

In this chapter, we'll setup our system to run Clojure. We'll install all the required dependencies and run the "Hello World" program.

LESSON

Editor Tools

We need help from our editors to tame the LISPy syntax. This chapter walks through the tools we will need and why.

LESSON

VSCode Setup

Set up VS-Code for Clojure development.

LESSON

IntelliJ IDE Setup

Setup IntellJ IDE for Clojure development.

LESSON

Emacs Setup

Setup Emacs for Clojure development.

LESSON

Language Semantics

8 lessons 50m total

Hosted Nature

Clojure is neither compiled nor has its own VM. Instead, it runs on VMs of other languages. In this lesson, we'll learn about official and unofficial ports and support status.

LESSON

2:31 minutes

Syntax and Native Data Types

Let's get our hands dirty with native data types and common operations.

LESSON

12:35 minutes

Syntaxlessness

C-style languages invisibly impose a syntax, whereas Lisps do not. This makes Lisps more expressive and easier to grasp.

LESSON

2:20 minutes

Build tools and package management

Since Clojure is hosted, it can tap into ecosystems of other languages. This has led to multiple build tools for different ecosystems. Choosing the right build tool might get tough for a beginner as the pros and cons might not be known. In this module, we'll learn about the general state of build tools in Clojure and choose the right tool for our project.

LESSON

3:16 minutes

Project structure

Enough talking, let's create a new repository and set up a project from scratch, using Shadow CLJS.

LESSON

11:12 minutes

Shadow CLJS API

Our first project is now in place. In this chapter, we'll learn how to build and run it. We'll also explore some other build targets and explore Shadow with Reagent, a ClojureScript wrapper to React.

LESSON

9:00 minutes

NREPL and Inline Evaluation

The REPL is an essential element of a Lisper's toolkit. In this chapter, we'll solidify our grasp of the REPL and editor integration. We'll also learn about some problems that come with the REPL.

LESSON

9:06 minutes

Paredit

Paredit is a tool to help with structural editing. It helps you write and modify S-Expressions with so much ease that the brackets will almost disappear! In this chapter, we'll learn fundamental Paredit commands.

LESSON

Standard Library

6 lessons 38m total

Conditionals

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

LESSON

4:08 minutes

Atoms

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.

LESSON

4:39 minutes

Function definitions

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.

LESSON

7:47 minutes

Sequence Operations

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

LESSON

12:22 minutes

Threading Macros

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.

LESSON

4:04 minutes

Transparent interoperability

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.

LESSON

5:09 minutes

Tinycanva

18 lessons 51m total

Overview

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

LESSON

2:36 minutes

Project Setup

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.

LESSON

6:22 minutes

Reagent

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.

LESSON

7:08 minutes

React Router

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

LESSON

UI and CSS

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

LESSON

Introduction to State Management

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

LESSON

9:27 minutes

App Structure and Authentication UI

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

LESSON

1:55 minutes

Firebase Project Setup

Set up Firebase project and configure authentication.

LESSON

Auth Event Handlers

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.

LESSON

4:38 minutes

Auth Effects and Firebase Initialization

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.

LESSON

6:58 minutes

Auth Subscriptions

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.

LESSON

6:46 minutes

Auth Containers

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.

LESSON

Create Graphics

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.

LESSON

Read and Delete Graphics

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

LESSON

Create, Read and Delete UI

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

LESSON

Graphic details page

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.

LESSON

5:47 minutes

Graphics Editor

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

LESSON

Saving graphics

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.

LESSON

Advance Concepts

4 lessons 7m total

Production packaging

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.

LESSON

Code splitting

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.

LESSON

7:22 minutes

Unit testing

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.

LESSON

Conclusion

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

LESSON