ClojureScript Loves NPM

Jacek Schæ — Fri, 15 Feb 2019 11:37:09 +0000

Every languge that complies/transpiles to JS want to connect to npm to use this huge ecosystem. The master of this is of course Ecma Script. The second one - in my humble opition - is ClojureScript, due to shadow-cljs.

Disclaimer: I know there is a lot of work going on in differnt communities that tap into npm. By all means I don't try to diminish any of that and state that CLJS (ClojureScript) is the best . I want to give you a glance how this works in ClojureScript.

Installing npm packages

In ClojureScript we would install npm packages as we would in JavaScript. We would use standard package.json and shadow-cljs build tool would figure out the rest.

After the installation we would have to require the package. The require statment is almost identical to import from JS. In CLJS we swap the order - first we say from where and then what.

Every ClojureScript file starts with a ns - namespace declaration. Following that we have require, instead of import . And then we are defining a function with defn . This function will tap into our required firebase packages and instead of using . to navigate to our method initializeApp we are using / . We make sure that when we invoke JS method initializeApp we are converting CLJS map (datastructure) to JS Object with #js.

Let's try some other npm packages to get a better feeling for interop between npm and ClojureScript.

React

How about using React? ClojureScript has a couple of wrappers for React - the most popular one is Reagent. Here is a simple counter example with React hooks and Reagent.

In both examples we are first importing/requiring React and Reagent. Then we are defining state in React - using hooks and in Reagent using atoms.What follows is JSX (JavaScript) and hiccup (ClojureScript) component. This is cool, but how would we use React UI Libraries from Reagent?

React UI Libraries

One of the most popular UI libraires is material-ui. After the installation we require this library and then import our Button component as well as React. In Clojure Script we only require the Button. We don't need to require Reagent since it's in our ClojureScript deps. To interop with React we would use :> form and pass all of the properties that we want in a {}.

Redux

How about Redux you ask? Well, there is a library that is build on top of Reagent, called re-frame. First designed in Dec 2014, it even pre-dates the official Elm Architecture.

By now you should have a pretty good picture why CLJS loves npm ecosystem and how easy it is to interop from CLJS to JS. Maybe this is interesting for you, and your are wondering why? Why should you even try ClojureScript?

Why?

Immutable

All ClojureScritp data structures are immutable and presistant. You don't need to learn new API if you want to leaverge something like ImmutableJS.

Functional

ClojureScript embraces Functional Programming ideas at its core. You don't need Lodash or Ramda.

Simple

With shadow-cljs you don't need to spend time configuring your builds. You require what you need and the build tool will do the job.

Concise

You liability is the LoC you write . ClojureScript is one of the most concies programming languges out there. Chek out the last section of this comparision.

Powerful

ClojureScript uses Google Closure Tools for code minification and tree shaking. The same tolls that Google is using to build Gmail, Google Calendar, Google Docs, Google Maps.

JavaScript

It compiles/transpiles to JavaScript. Just as ES (EcmaScript) ReasonML,PureScript, and Elm.

Friendly

ClojureScript community is the most friendly and welcoming group of people that I have ever met online. We mainly hang out on Slack and ClojureVerse.

Full-Stack

ClojureScript older brother - Clojure embraces all of these ideas with Java. If you want to write your server on one of the most performant and stable platform there is - Java Virtuel Machine - you can do that using the same language.

If you like this article you should follow me on Twitter. I only write/tweet about programming and technology - mainly about ClojureScript and Clojure.

Learn how to build Functional Front-ends with ClojureScript and React.

Jacek Schæ — Sun, 30 Sep 2018 18:12:53 +0000

You probably heard about React, and did you hear about Reagent? Reagent is a minimalistic interface between ClojureScript and React.

ClojureScript, just as Elm, ReasonML and EcmaScript compile/transpile to JavaScript.

With Reagent you can define components using nothing else but plain ClojureScript functions and data structures.

Let’s take a look at a couple examples and see how they compare. This is not a rant on React. React is awesome! Nor a rant on JS. JS is awesome too! This is to show how React looks like in a language with immutable and persistent data structures.

A Stateless Component

The simplest component in Reagent and in React is just a function.

Very often in JavaScript you would see them as const one liners:

const HelloMessage = props => <div>Hello {props.name}</div>;

A Statefull Component

Since Reagent is build on top of CLJS (ClojureScript) immutable data structures there is no need for extra libraries (Redux, MobX) or syntax (this.setState) to work with your state. In CLJS you would use atoms (reference type in CLJS) for dealing with your state.

In this example we are creating a let binding for an atom — inside our function - defn. The let binding is available only inside the scope of the function and then we are swap!-ing the value with on-click by using inc (increment) function.

A Class Component with Life Cycle Methods

This example shows a class component with life cycle methods.

In Reagent we would use them less than 1%. The reason for that are — atoms — they will keep track when they should be updated. In Reagent we could write this component, without a need for componentDidMount:

(defn timer []
  (let [seconds (r/atom 0)]
    (fn []
      (js/setInterval #(swap! seconds inc) 1000)
      [:div
       "Seconds: " @seconds])))

Want to learn more?

If you would like to learn more about ClojureScript and Reagent try this FREE video course and build GIGGIN app.

More information about the course at learnreagent.com

And if you like this article you should follow me on DEV and Twitter I only write/tweet about programming and technology.

Forem: Jacek Schæ