Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A series of tutorials on ClojureScript
Clojure HTML CSS

Merge pull request #194 from sumbach/patch-13

tutorial-12: improve readability
latest commit 6f9e4483e8
@magomimmo authored

README.md

Modern ClojureScript

Modern ClojureScript (modern-cljs) is a series of tutorials that guide you in creating and running ClojureScript (CLJS) projects.

CLJS is a compiler for the Clojure programming language that targets JavaScript. It emits JavaScript code which runs in web browsers and other client-side or server-side JavaScript interpreters (e.g. nodejs).

A companion resource

The modern-cljs series now includes a port for Emacs/Eclipse users of the recent lt-cljs-tutorial - A ClojureScript Programming Language Tutorial for Light Table Users by David Nolen: the tireless, generous and amazingly creative maintainer of ClojureScript Programming Language. The port has been generated by using the cljs-start lein-template.

I consider lt-cljs-tutorial the best companion resource for the modern-cljs series because it represents the fastest path to start learning the ClojureScript Programming Language as is, in a very interactive way, and from the most competent guy for the language itself.

For those not using Emacs, Eclipse/CCW or Light Table, it should be very easy to run the port of the ClojureScript Programming Language Tutorial with any editor/IDE supporting nREPL. Pull Requests are very welcome for incrementing the list of the documented editors/IDEs.

For instructions on how to run the port of the David Nolen tutorial see the README.md file in the cljs-tutorial directory.

ATTENTION NOTE

The content of the modern-cljs series will be progressively updated in the coming months to reflect as much as possible all the recent improvements in the ClojureScript ecosystem.

Required background

These tutorials require that you have some prior programming experience. They assume you've gotten your hands dirty by trying a little Clojure, even if you're not proficient in it yet. It will also be quite helpful if you have some experience programming for the Web using HTML, JavaScript and the browser DOM.

If you don't know anything about Clojure (or about Lisp), I recommend you learn a little bit before starting these tutorials.

There are plenty of outstanding resources on Clojure that are freely available on the Internet, and you can't overestimate the benefit of reading a book on Clojure (or another Lisp dialect) to your value as a programmer.

Here are some book recommendations:

Required tools

Many people worry about which operating system and editor/IDE are best for developing in Clojure and ClojureScript. I personally use Mac OS X, Debian and Ubuntu. I use Emacs as an editor.

Because I'm an old-timer, *nix and Emacs are the OS and editor I know best. That being said, in this series of tutorials you're not going to find any suggestions or reference to operating systems or editors. Use whatever tools you already have and know. I have too much respect for people developing IDE/plugins for Clojure/CLJS to say that one is better than another, and you don't want to combine learning a new programming language with trying to learn a new programming environment.

You will need to have git installed and you'll need some familiarity with the basics of git.

Why the name Modern ClojureScript?

You might wonder why this tutorial series is named modern-cljs when ClojureScript is so recent. I started this series while trying to port a few examples from the Modern JavaScript: Develop and Design book to ClojureScript, and now it's too late to change.

The Tutorials

Introduction

This series of tutorials guides you in creating and running simple CLJS projects. The bulk of the series follows the progressive enhancement of a single project.

While working through the tutorials I strongly suggest you start at tutorial 1 and type in all the code for each tutorial yourself. In my experience this is the the best approach if you're not already very fluent with the programming language.

That being said, if you want to jump to the end and see what the final project resulting from following the tutorials looks like, and assuming you have already installed leiningen 2, you can run the project from the last tutorial by following these steps:

  1. Get the tutorial repository by running git clone https://github.com/magomimmo/modern-cljs.git
  2. cd modern-cljs
  3. run lein cljx once # used from tutorial-16 forward
  4. run lein ring server-headless
  5. open a new terminal and cd to the modern-cljs main directory
  6. run lein cljsbuild once
  7. run lein trampoline cljsbuild repl-listen
  8. open login-dbg.html and/or shopping-dbg.html in your browser
  9. you can play with the repl you started in step 7 which is now connected to the browser

Don't be concerned if the steps don't make sense to you just yet; they'll be covered in the tutorials.

NOTE: If you want to skip ahead or back and access the code of any single tutorial without typing it or pasting it in, you can do as follows:

  • run git clone https://github.com/magomimmo/modern-cljs.git
  • cd modern-cljs
  • run git checkout tutorial-n # n is 01 for tutorial 1, 02 tutorial-02, etc.

Tutorial 1 - The Basics

Create and configure a very basic CLJS project.

Tutorial 2 - Browser CLJS REPL (bREPL)

Set up a browser-connected CLJS REPL (bRepl) using an external http-server.

Tutorial 3 - Ring and Compojure

Replace the external http-server with Ring, a Clojure HTTP server and middleware, and Compojure, a routing library for Ring.

Tutorial 4 - Modern ClojureScript

Have some fun with CLJS form validation by porting the JavaScript login form example from Modern JavaScript: Develop and Design to CLJS.

Tutorial 5 - Introducing Domina

Use the Domina library to make our login form validation more Clojure-ish.

Tutorial 6 - The Easy Made Complex, and the Simple Made Easy

Investigate and find two different ways to solve an issue from the last tutorial.

Tutorial 7 - Compilation Modes

Explore CLJS/CLS compilation modes by using the lein-cljsbuild plugin of leiningen, and discover a problem and solve it using a feature of the lein-cljsbuild plugin.

Tutorial 8 - Introducing Domina Events

Use Domina events for a more Clojure-ish approach to handing DOM events.

Tutorial 9 - DOM Manipulation

Programmatically manipulate DOM elements in response to DOM events.

Tutorial 10 - Introducing AJAX

Use AJAX to let the CLJS client-side code communicate with the server.

Tutorial 11 - A Deeper Understanding of Domina Events

Apply Domina events to the login form example from the 4th Tutorial.

Tutorial 12 - HTML on Top, Clojure on the Bottom

Explore the highest (HTML5) and deepest (Clojure on the server) layers of the login form example from the previous tutorial.

Tutorial 13 - Don't Repeat Yourself

Respect the Don't Repeat Yourself (DRY) principle by sharing validators between the client-side CLJS and the server-side Clojure.

Tutorial 14 - Better Safe Than Sorry (Part 1)

Set the stage for unit testing by learning about the Enlive template sytem and starting the shopping calculator example. Use code refactoring to satisfy the DRY principle and to solve a cyclic namespaces dependency problem.

Tutorial 15 - Better Safe Than Sorry (Part 2)

Add validators to the shoppingForm, and do some unit testing.

Tutorial 16 - Better Safe Than Sorry (Part 3)

Make our unit tests portable between Clojure and CLJS by using the clojurescript.test lib and the cljx lein plugin.

Tutorial 17 - REPLing with Enlive

Integrate the form validators from the server-side Shopping Calculator into the Web UI, so the user is notified with the right error messages when typing invalid values into the form.

Tutorial 18 - Housekeeping!

A digression to cover two topics on CLJS developer productivity: setting up a more comfortable browser REPL based on nREPL, and a more comfortable project structure using the profiles features of Leiningen.

Tutorial 19 - Livin' On the Edge

Learn how to contribute something we need to someone else's library, and how to publish snapshot releases on clojars to use the enhancement in our own project.

Tutorial 20 - Learning by Contributing (Part 1)

Look at the Enfocus library with the objective of sharing as much code as possible with Enlive. Start an open source collaboration by proposing a few improvements to the Enfocus directory structure and the adoption of the clojurescript.test library for implementing unit tests.

Tutorial 21 - Learning by Contributing (Part 2)

Package Enfocus into a jar, instrument it with the Piggieback library, publish it on clojars, and use it as a dependency in a very simple project to see that the changes we made don't affect the Enfocus codebase, which still works as expected.

Tutorial 22 - Learning by Contributing (Part 3)

Improve Enfocus by applying separation of concerns and implementing a few unit tests. In the process, discover some bugs and correct them by first interacting with Enfocus in the REPL.

License

Copyright © Mimmo Cosenza, 2012-2015. Released under the Eclipse Public License, the same license as Clojure.

Something went wrong with that request. Please try again.