Did you know that you sleep in multiple phases? At first, you lie down and close your eyes, but it's still easy to be woken up. As sleep progresses it becomes deeper, to the point where you lose your sense of time and start dreaming. This stage is called deep sleep or REM sleep and it's essential for learning, memory, and wellbeing. The catch is - you cannot progress to the REM stage until you have finished the earlier, non-REM stages.

Flow state is akin to deep sleep. When you reach your desk, you are not immediately productive. You read your emails, check Reddit or Hacker News, and then slowly ease into the flow state (at which point you get disturbed by being called for a meeting, of course!). The point is, to work efficiently, we need to progress in stages until we reach flow state.

Any external hindrance breaks the flow and forces us to start again. External distractions can be due to the surrounding environment (kids, meetings, food breaks, angry neighbors) or your tooling (compile time, documentation lookups, unrelated bugs, etc). Library and language developers cannot fix your issues with your angry neighbor, but a lot of effort has been made to improve the tools.

In this post, you will learn how REPL driven development can provide fast feedback and get you into the flow state sooner.

Hot Reload, Fast Refresh, and Fast compilation

Working with an interpreted language like Python is faster than a compiled language like C++, in part because of the feedback cycle. In the same amount of time, you can test more changes in Python code than C++ code, because you don't need to compile. Eliminating the need to compile is equivalent to eliminating external distractions. You can experiment with more ideas without hurdles, and progress more quickly towards reaching flow state. But this comes at the cost of performance.

Compiled languages have a slow feedback cycle. This leads to efficient performance, but a compromised developer experience.

Languages like Go focus on fast compilation, making the feedback loop short without compromising runtime performance.

Frontend JavaScript has tools like Browserify's Live Reload, React HMR, and Fast Refresh, which compile your program and execute it so you can reach or maintain your flow state. If it takes a long time to compile every change, you'll probably never reach flow state.

For compiled or transpiled languages, the code we write and the code that's run is inherently different. For example, you might be writing Typescript, which is converted to ES6 before being executed in the browser. The problem is that the entire representation of the codebase is flushed down each time you make a change. The transpiler is efficient and makes sure to recompile only the files that were changed and depend on the change. But it is still hard to cherrypick the exact function or variable that changed and update just that piece in the runtime.

There is no one-to-one mapping of all functions in the source to compiled code, so we resort to the next best strategy - recompilation (ie. compile the entire module).

The lack of direct mapping leads to a significant loss of power. These mappings exist to an extent in source maps, but source maps treat code as text. Lines are indexed and recorded. A source map can tell that lines 1 to 4 of source code produced lines 14 to 28 of compiled code, but it cannot tell the position or semantics of the function defined on line 4 in the source code.

This lack of mapping is mainly because C-style languages are written like a natural language. Computers are not good at parsing natural languages. Computers are good at parsing data-structures and discrete forms.

What do we gain if we can somehow get this one-to-one mapping of source and compiled code? An easier path to flow state?

Imagine a language that is not written like English prose, but expressed in terms of data structures.

Imagine if we could somehow connect the source code to the runtime (compiled code), to the extent that we could pinpoint and execute a function 

 defined in source code right from the editor. This is what it would look like:

In the GIF above, we have ClojureScript source code in a text editor, connected to a runtime (browser). We can execute functions as we write them. No refresh, no recompilation, no interpreter.

Just one function, picked up, compiled, and executed right inside your editor. And the best part is, this system has been stable and in production since 2015 (perhaps even earlier than that).

To understand the REPL and REPL driven development, we must first introduce Clojure. Clojure is a dialect of LISP (short for List Processing). LISP code is written in the form of trees, unlike C-style code which is written like natural English language.

Consider a function that takes a Hash Map like 

(defn map->query-string [m]
	(reduce
		(fn [acc [k v]]
			(str acc "&" k "=" v))
			"" m))

This code can be represented in the form of a tree as follows:

Because of the discrete data structure form, the compiler can easily create a one-to-one mapping of functions in source (CLJS) code to output in compiled (JS) code, and can also execute a selected part of the source in runtime.

 is written in ClojureScript, compiled to JavaScript, and executed, and the results are returned to the editor.

The REPL is the hidden agent that facilitates this source to runtime bridge. It takes source code, executes instructions in runtime, and brings the results right back to the point of definition, ie. the editor:

2. The Shadow (compiler) converts this code to browser ready JavaScript

3. The REPL then sends execution instructions to the compiled code

4. This is then executed in the runtime (Node or Browser) and the result is returned to the editor

REPL driven development leads to lightning-fast feedback. You just write pure functions and execute them as you are typing them. No need to leave the editor, no need to hot reload, no need to interact with the UI.

In this talk at JSFOO Bangalore, I showcased REPL driven development (Start at [4:39] to get to the juice):

This talk explains how the REPL fits in with common frontend tasks, like building forms and handling state.

the REPL is a user interface to your program

. Think of it as a way to execute parts of your code with immediate feedback. This makes it a powerful development tool. You already saw how functions can be executed in the REPL in 

Since the REPL can execute any source code, you can use it to check the methods a third party library exposes.

 Inspecting methods exposed in the React package

A large part of UI development involves interacting with state. The REPL can be used to read the data structure storing your state.

Form states are generally saved using one-way binding(like in React) or two-way binding (like in Vue). Since the object that stores the state is defined somewhere in the code, you can use the REPL to fill forms by changing interactions with the object.

I highly recommend checking the 📹 video from the JSFoo conference (above) to see the form filling in action. It seems like magic!

If you are building a multi-step process like checkout or signup, filling the initial steps might become tedious as your flow grows. You can define the steps in your source code, and execute it in the REPL. The UI will respond respectively.

Simulating UI events on a React Native app

In the GIF above, we have a Status App (A free, libre, open-source | GitHub.com/status-im/status-react) messenger running on an Android device, and a REPL connected to it. We can simulate events in the REPL, essentially letting us develop complex flows, without even touching the device. If you are a mobile developer, imagine the time saved if you never needed to take your hands off the keyboard to interact with the app. And the feedback is fire 🔥.

Flows like this can be saved as a comment alongside your source code and committed to git. This acts like documentation of what the developer was thinking while they developed this flow.

Clojure is a hosted language that can compile to JavaScript, Java, and .NET. JavaScript can be used to build mobile apps with React Native and Desktop apps with Electron.

This means that you can run the REPL on every imaginable platform. Clojure is the closest we are to the "Learn once, run anywhere" philosophy.

Fast feedback = more chances to achieve flow

Once you get used to developing in the REPL, reaching flow state becomes more achievable. The entire act of transpilation, seeing the UI, clicking buttons, checking console changes, and executing functions all happens in the REPL.

This method brings you close to the runtime and lets you inspect the internals of your application with ease.

The Shell (like the Python or Node shell) is a rudimentary version of the REPL. It's different in the sense that it cannot reload pieces of code like Clojure's REPL. This is partly because of how Clojure and LISP-like languages are written.

It is also different because no stable tooling exists to connect the Shell to the editor. I would go as far as saying that Clojure is the only stable language with a fully-featured REPL plugin for all major editors.

I first learned about the REPL after 8 years of building full-stack applications. My mind was blown and I wondered why this wasn't the norm. Why didn't more people talk about it? Why was I not able to find it?

Clojure is not as well-known as JavaScript. On top of that, when you get started, all you see is ugly syntax, with brackets in the wrong place. The concepts that this article showcases might be a bit overwhelming at first.

I was lucky to get a job working with experienced Clojure developers at mission-critical systems. I bundled my experience into Tinycanva - A frontend ClojureScript course for React developers. In this course, we'll set up Clojure from scratch, learn about the eco-system and developer tools, and build a Canva clone with a Firebase backend.

If you like the idea of fast feedback and flow state, check out our course 

the newline Guide to Clojure for React Developers. 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Reaching flow state with Clojure's REPL</h1><p>Did you know that you sleep in multiple phases? At first, you lie down and close your eyes, but it's still easy to be woken up. As sleep progresses it becomes deeper, to the point where you lose your sense of time and start dreaming. This stage is called deep sleep or REM sleep and it's essential for learning, memory, and wellbeing. The catch is - you cannot progress to the REM stage until you have finished the earlier, non-REM stages.</p><p>Flow state is akin to deep sleep. When you reach your desk, you are not immediately productive. You read your emails, check Reddit or Hacker News, and then slowly ease into the flow state (at which point you get disturbed by being called for a meeting, of course!). The point is, to work efficiently, we need to progress in stages until we reach flow state.</p><p>Any external hindrance breaks the flow and forces us to start again. External distractions can be due to the surrounding environment (kids, meetings, food breaks, angry neighbors) or your tooling (compile time, documentation lookups, unrelated bugs, etc). Library and language developers cannot fix your issues with your angry neighbor, but a lot of effort has been made to improve the tools.</p><p>In this post, you will learn how REPL driven development can provide fast feedback and get you into the flow state sooner.</p><h2 class="heading-anchor-text" id="hot-reload,-fast-refresh,-and-fast-compilation"><span>Hot Reload, Fast Refresh, and Fast compilation</span><a class="d-inline" href="#hot-reload,-fast-refresh,-and-fast-compilation">#</a></h2><p>Working with an interpreted language like Python is faster than a compiled language like C++, in part because of the feedback cycle. In the same amount of time, you can test more changes in Python code than C++ code, because you don't need to compile. Eliminating the need to compile is equivalent to eliminating external distractions. You can experiment with more ideas without hurdles, and progress more quickly towards reaching flow state. But this comes at the cost of performance.<br><br>Compiled languages have a slow feedback cycle. This leads to efficient performance, but a compromised developer experience.<br><br>Languages like Go focus on fast compilation, making the feedback loop short without compromising runtime performance.<br><br>Frontend JavaScript has tools like Browserify's Live Reload, React HMR, and Fast Refresh, which compile your program and execute it so you can reach or maintain your flow state. If it takes a long time to compile every change, you'll probably never reach flow state.</p><h2 class="heading-anchor-text" id="problems"><span>Problems</span><a class="d-inline" href="#problems">#</a></h2><p>For compiled or transpiled languages, the code we write and the code that's run is inherently different. For example, you might be writing Typescript, which is converted to ES6 before being executed in the browser. The problem is that the entire representation of the codebase is flushed down each time you make a change. The transpiler is efficient and makes sure to recompile only the files that were changed and depend on the change. But it is still hard to cherrypick the exact function or variable that changed and update just that piece in the runtime.</p><p>There is no one-to-one mapping of all functions in the source to compiled code, so we resort to the next best strategy - recompilation (ie. compile the entire module).</p><p>The lack of direct mapping leads to a significant loss of power. These mappings exist to an extent in source maps, but source maps treat code as text. Lines are indexed and recorded. A source map can tell that lines 1 to 4 of source code produced lines 14 to 28 of compiled code, but it cannot tell the position or semantics of the function defined on line 4 in the source code.</p><p>This lack of mapping is mainly because C-style languages are written like a natural language. Computers are not good at parsing natural languages. Computers are good at parsing data-structures and discrete forms.</p><h2 class="heading-anchor-text" id="shoot-for-the-stars"><span>Shoot for the stars</span><a class="d-inline" href="#shoot-for-the-stars">#</a></h2><p>What do we gain if we can somehow get this one-to-one mapping of source and compiled code? An easier path to flow state?<br><br>Imagine a language that is not written like English prose, but expressed in terms of data structures.</p><p>Imagine if we could somehow connect the source code to the runtime (compiled code), to the extent that we could pinpoint and execute a function <code>f</code> defined in source code right from the editor. This is what it would look like:</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201219081714648_repl-demo.gif" attachmentid="04c60f5c-d5c2-48d6-92f1-19f2c0173842" contenteditable="false" data-width="1440" data-height="900"><div></div></figure><p><strong><em>Figure 1: </em></strong><em>Executing functions in the REPL<br></em><br>In the GIF above, we have ClojureScript source code in a text editor, connected to a runtime (browser). We can execute functions as we write them. No refresh, no recompilation, no interpreter.</p><p>Just one function, picked up, compiled, and executed right inside your editor. And the best part is, this system has been stable and in production since 2015 (perhaps even earlier than that).</p><h2 class="heading-anchor-text" id="what-is-repl-and-repl-driven-development"><span>What is REPL and REPL driven development</span><a class="d-inline" href="#what-is-repl-and-repl-driven-development">#</a></h2><p>To understand the REPL and REPL driven development, we must first introduce Clojure. Clojure is a dialect of LISP (short for List Processing). LISP code is written in the form of trees, unlike C-style code which is written like natural English language.</p><p>Consider a function that takes a Hash Map like <code>{:a "b" :c "d"}</code> and returns a query string like <code>"a=b&amp;c=d"</code>:<br></p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-sgDGe" id="cm-sgDGe">(defn map-&gt;query-string [m]
	(reduce
		(fn [acc [k v]]
			(str acc "&amp;" k "=" v))
			"" m))</textarea><p>This code can be represented in the form of a tree as follows:</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201219082406554_tree.svg" attachmentid="92a47474-cb57-45dc-b083-877590fde13d" contenteditable="false" data-width="422" data-height="270"><div></div></figure><p><br><strong><em>Figure 2</em></strong><em>:</em> <em>Tree representation of LISP code</em></p><p>Because of the discrete data structure form, the compiler can easily create a one-to-one mapping of functions in source (CLJS) code to output in compiled (JS) code, and can also execute a selected part of the source in runtime.</p><p>Like in <strong><em>Figure 1</em></strong> above, the code <code>(+ 3 4)</code> is written in ClojureScript, compiled to JavaScript, and executed, and the results are returned to the editor.</p><p>The REPL is the hidden agent that facilitates this source to runtime bridge. It takes source code, executes instructions in runtime, and brings the results right back to the point of definition, ie. the editor:</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201219082703461_repl-scope.png" attachmentid="df3c43e9-0415-4539-91e0-eeb2f867347e" contenteditable="false" data-width="862" data-height="802"><div></div></figure><p><strong><em>Figure 3:</em></strong><em> Scope of the REPL</em></p><p>1. Your source code lives in your editor<br>2. The Shadow (compiler) converts this code to browser ready JavaScript<br>3. The REPL then sends execution instructions to the compiled code<br>4. This is then executed in the runtime (Node or Browser) and the result is returned to the editor</p><p>REPL driven development leads to lightning-fast feedback. You just write pure functions and execute them as you are typing them. No need to leave the editor, no need to hot reload, no need to interact with the UI.</p><p>In this talk at JSFOO Bangalore, I showcased REPL driven development (Start at [4:39] to get to the juice):</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FBs44qdAX5yo%3Fstart%3D279%26feature%3Doembed%26start%3D279&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBs44qdAX5yo&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBs44qdAX5yo%2Fhqdefault.jpg&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=youtube" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p><br>This talk explains how the REPL fits in with common frontend tasks, like building forms and handling state.</p><h2 class="heading-anchor-text" id="what-can-you-do-with-the-repl?"><span>What can you do with the REPL?</span><a class="d-inline" href="#what-can-you-do-with-the-repl?">#</a></h2><p>According to the official Clojure docs, <a href="https://clojure.org/guides/repl/guidelines_for_repl_aided_development" rel="noopener noreferrer nofollow">the REPL is a user interface to your program</a>. Think of it as a way to execute parts of your code with immediate feedback. This makes it a powerful development tool. You already saw how functions can be executed in the REPL in <strong><em>Figure 1.</em></strong></p><h3 class="heading-anchor-text" id="inspect-third-party-libraries"><span>Inspect third-party libraries</span><a class="d-inline" href="#inspect-third-party-libraries">#</a></h3><p>Since the REPL can execute any source code, you can use it to check the methods a third party library exposes.</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201219170955642_lib-optimized.gif" attachmentid="2b5d2431-6d2c-43f2-a06f-fe786c333180" contenteditable="false" data-width="1792" data-height="1120"><div></div></figure><p><br><strong><em>Figure 4:</em></strong><em> Inspecting methods exposed in the React package</em></p><h3 class="heading-anchor-text" id="inspect-state"><span>Inspect state</span><a class="d-inline" href="#inspect-state">#</a></h3><p>A large part of UI development involves interacting with state. The REPL can be used to read the data structure storing your state.</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201219171220458_state-optimized.gif" attachmentid="578a7002-dfe5-4b2d-8bc2-3acaa93fab04" contenteditable="false" data-width="1792" data-height="1120"><div></div></figure><p><strong><em>Figure 5: </em></strong><em>Inspecting app state in real-time</em></p><h3 class="heading-anchor-text" id="fill-forms"><span>Fill forms</span><a class="d-inline" href="#fill-forms">#</a></h3><p>Form states are generally saved using one-way binding(like in React) or two-way binding (like in Vue). Since the object that stores the state is defined somewhere in the code, you can use the REPL to fill forms by changing interactions with the object.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>I highly recommend checking the 📹 video from the JSFoo conference (above) to see the form filling in action. It seems like magic!</p></div></div><h3 class="heading-anchor-text" id="execute-ui-flows"><span>Execute UI flows</span><a class="d-inline" href="#execute-ui-flows">#</a></h3><p>If you are building a multi-step process like checkout or signup, filling the initial steps might become tedious as your flow grows. You can define the steps in your source code, and execute it in the REPL. The UI will respond respectively.</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201220073216472_My%20Movie-half.gif" attachmentid="47b312f9-a9cd-48a6-a968-9b59dbee674f" contenteditable="false"><div></div></figure><p><strong><em>Figure 6:</em></strong> <em>Simulating UI events on a React Native app</em></p><p>In the GIF above, we have a Status App (A free, libre, open-source | GitHub.com/status-im/status-react) messenger running on an Android device, and a REPL connected to it. We can simulate events in the REPL, essentially letting us develop complex flows, without even touching the device. If you are a mobile developer, imagine the time saved if you never needed to take your hands off the keyboard to interact with the app. And the feedback is fire 🔥.</p><p>Flows like this can be saved as a comment alongside your source code and committed to git. This acts like documentation of what the developer was thinking while they developed this flow.</p><h2 class="heading-anchor-text" id="works-on-every-clojure-runtime"><span>Works on every Clojure runtime</span><a class="d-inline" href="#works-on-every-clojure-runtime">#</a></h2><p>Clojure is a hosted language that can compile to JavaScript, Java, and .NET. JavaScript can be used to build mobile apps with React Native and Desktop apps with Electron.</p><p>This means that you can run the REPL on every imaginable platform. Clojure is the closest we are to the "Learn once, run anywhere" philosophy.</p><h2 class="heading-anchor-text" id="fast-feedback-=-more-chances-to-achieve-flow"><span>Fast feedback = more chances to achieve flow</span><a class="d-inline" href="#fast-feedback-=-more-chances-to-achieve-flow">#</a></h2><p>Once you get used to developing in the REPL, reaching flow state becomes more achievable. The entire act of transpilation, seeing the UI, clicking buttons, checking console changes, and executing functions all happens in the REPL.<br>This method brings you close to the runtime and lets you inspect the internals of your application with ease.</p><h2 class="heading-anchor-text" id="how-is-this-different-from-shell?"><span>How is this different from Shell?</span><a class="d-inline" href="#how-is-this-different-from-shell?">#</a></h2><p>The Shell (like the Python or Node shell) is a rudimentary version of the REPL. It's different in the sense that it cannot reload pieces of code like Clojure's REPL. This is partly because of how Clojure and LISP-like languages are written.</p><p>It is also different because no stable tooling exists to connect the Shell to the editor. I would go as far as saying that Clojure is the only stable language with a fully-featured REPL plugin for all major editors.</p><h2 class="heading-anchor-text" id="conclusion"><span>Conclusion</span><a class="d-inline" href="#conclusion">#</a></h2><p>I first learned about the REPL after 8 years of building full-stack applications. My mind was blown and I wondered why this wasn't the norm. Why didn't more people talk about it? Why was I not able to find it?</p><p>Clojure is not as well-known as JavaScript. On top of that, when you get started, all you see is ugly syntax, with brackets in the wrong place. The concepts that this article showcases might be a bit overwhelming at first.</p><p>I was lucky to get a job working with experienced Clojure developers at mission-critical systems. I bundled my experience into Tinycanva - A frontend ClojureScript course for React developers. In this course, we'll set up Clojure from scratch, learn about the eco-system and developer tools, and build a Canva clone with a Firebase backend.</p><p>If you like the idea of fast feedback and flow state, check out our course <em><a href="https://www.newline.co/courses/tinycanva-clojure-for-react-developers" rel="noopener noreferrer nofollow">the newline Guide to Clojure for React Developers. </a><br></em></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Reaching flow state with Clojure's REPL

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript