9 Totally Killer ClojureScript Tips From Someone Who Just Finished Their First App
As I promised, here’s a bunch of links, tools & tips which I found useful as a beginner. Some of them come from spending too much time trying to figure something out, some of them are well-known JavaScript practices that are as useful when applied to ClojureScript.
Alternative titles: 9 Smart Tips To Up Your ClojureScript Game, 9 ClojureScript Tips Every Beginner Should Know, 9 ClojureScript Tips From A Real ClojureScript Newbie, 9 ClojureScript Tips You’ll Wish You’d Heard When You Were Starting Out.
Shout out to site:buzzfeed.com intitle:tips for inspirations.
Learning ClojureScript #
Learn some Clojure first, it won’t hurt you. I can recommend Aphyr’s Clojure from the ground up guide. There’s also Clojure for the Brave and True which I actually bought (early access ebook, only $20!), but didn’t really had the time to dig into it, except the wonderful chapter on core.async.
As for ClojureScript itself, I just tried to build the app and learn something in the process. I really wish I had someone to tell me more about the tooling and stuff. You might find yourself in a similar situation, but fear not – Norbert is here to help you! Subscribe to his [ClojureScript Hero newsletter](bit.ly/cljs-hero), there have been two solid issues so far and I heard there’s more cool stuff coming.
Join Rich Hickey’s fandom #
WTB: an adaptation of this t-shirt with Rich Hickey on it reading “there is no complection, only Zuul” pic.twitter.com/frzCfMcniv
— software psychopomp (@ztellman) October 7, 2014Seriously, what’s better than annoying your coworkers with “You just complected X with Y!” every time you do a code review with them?
Only now you have the chance to get a compilation of Rich Hickey’s Greatest Hits completely free of charge! Go watch Simple Made Easy, it’s easily my favorite one. Hammock Driven Development is pretty cool, too.
Damn, just watch all of them. For your knowledge.
Update: Talles Lasmar actually published a repo called Rich-Hickey-fanclub. Go check it out!
Testing #
While ClojureScript now ships with some basic testing library, there’s some boilerplate you have to write and I found that the test runner written by Andrew doesn’t autoreload test files.
In case you don’t want to trouble yourself with that, go with Chas Emerick’s clojurescript.test. It works pretty much OOTB and supports a few different test runners you can choose from depending on your needs.
Debugging #
ClojureScript runs in the browser environment, so guess what? All the sweet debugging tools that browser vendors offer work with ClojureScript, too! With compile time optimizations disabled and source maps turned on (the standard setup of a dev environment), using Chrome debugger is not problematic at all.
See Shaun LeBron’s How To Debug CLJS for more information.
Profiling the code #
Same situation as with debugging: all the standard browser toolbox is available. In Chrome it’s just a matter of calling the built-in profiler.
(.proflile js/console "Profile name")
;; some code
(.profileEnd js/console)
See Jason Rudolph’s blog post for handy screenshots that explain everything.
lein-figwheel #
figwheel enables you to live reload code and CSS. The first time you get a chance to experience it’s awesomeness will leave you floored! With figwheel you can bring your app to a certain state and then modify functions that derive things from that state, without reloading the page or setting the state again.
When I was writing my version of Ultimate Tic-Tac-Toe, I could make a few moves, then adjust the function which finds the winner of a given board and see how that affects the whole app. figwheel is truly an amazing tool to have!
On a side note: make sure you don’t include the figwheel client in the release build, as it can significantly increase the total app size. However, the default figwheel template available under lein new figwheel project-name takes care of that.
Speaking of the app size…
You don’t have to worry* about the app size** #
* too much ** in most cases
The compiled JS for Ultimate TTT weighs 80 KB minified and gzipped. Is that too much? I don’t think so. It includes ClojureScript core, React, Reagent and re-frame sources.
The better question is: do I have to stress about it? In my case the answer’s also no–it’s just a game I wrote to learn CLJS.
The situation’s only going to improve: JavaScript’s going to evolve, ClojureScript along with it and it’ll be possible to further reduce the size of CLJS apps. Matter of fact, Google Closure Compiler already does a great job with that:
Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.
Closure Compiler Compilation Levels
So if you’re not using certain ClojureScript features, Closure Compiler just won’t include them in the compiled output.
Whoa, that’s pretty awesome! ???
But of course if you work on an app in which every kilobyte counts, then it might be an issue for you, but I doubt you’ll be considering a compile-to-JS language then.
Making local changes to project dependencies #
Sometimes you want to see if there’s a bug in that 3rd party library or just look around its source code and modify this and that. Leiningen has a useful feature called checkout dependencies and they can help you a lot in these situations.
Just make a local fork of a given dependency, symlink it in the checkouts folder of your app, run lein install and voilà!
Don’t use reserved JS keywords in namespace names #
It might cause weird errors along the way, like figwheel not being able to reload affected namespace. The upcoming version of ClojureScript is going to warn you about that.
I hope you found these tips as much helpful as I did. If you have some questions, feel free to message me on Twitter or shoot me an email (the "say hello" link on the bottom right).
Happy hacking! ?