Tinycanva: Clojure for React Developers
This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.
5.0 61 students started
2h 27m
Published |Updated
This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.
What You Will Learn
The concept of tree-based codes aka LISPs
Editor integrations that make writing LISPs easy
Mental models for Clojure's rich standard library
Understanding of tools like NREPL to aid fast feedback
Hosted nature of Clojure and its ability to tap into JVM, JavaScript, CLR and other language ecosystems
Syntaxlessness and expressiveness of the language
How to create React applications with Clojure
Flux-like state management with Reframe
Integration with APIs using Google Firebase
Key-based authentication and access control
Unit testing
Integration with React Router and Fabric JS
Lazy loading and code splitting
Map of communities and resources that can help when you get stuck
Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR).
Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.
In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.
This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours.
We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure.
The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
The backend is hosted on Google Firebase.
Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.
Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.
By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.
Course Content
Getting Started
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
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
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
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
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
Your Instructors
Frequently Asked Questions
Who is this course for?
This course is for React and JavaScript developers who want to explore functional languages and concepts.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
Are there any prerequisites?
Yes. The course assumes that you have a fair understanding of React, SPA routing and Redux like state management.
Student Review
highly recommended - course rich on content - content consists not only of videos but also written sections in tutorial style - however it goes beyond a tutorial and tries to put things into context - instructor is experienced developer an does transfer this over into the course - full source code available