REPL-driving the browser by Josh Glover

March 13, 2024

In the presentation REPL-driving the browser, Josh Glover discusses his experience using ClosureScript, a JavaScript compiler, and REPL technology. He expresses his preference for using Emacs and his frustration with the inefficiency of engaging with ClosureScript through a terminal and REPL window. He introduces Skittle and SAI from the closure community, explaining their roles as small closure interpreters. Josh demonstrates how to write and execute ClosureScript code in a web page using Emacs and Skittle, and discusses his frustration with JavaScript’s lack of closure features. He then explains the process of loading and interpreting Skittle JavaScript and encounters a cors error while using Babashka, a ClosureScript presentation software. Josh expresses his excitement about using Babashka to write a web server and run a browser in REPL for more efficient coding. He sets up a terminal, installs Skittle, and connects it to a REPL server using Cider, successfully connecting to the REPL environment in his web browser. Josh also discusses the use of Rich Hickey comments in Clojure for testing and experimentation without affecting the running code. Throughout the presentation, Josh shares his goals of creating a web page named cljcaster for real-time conversations and podcast creation without external tools.

REPL-driving the browser: A comprehensive overview

Introduction to ClojureScript and REPL

Josh Glover began by discussing his experience with ClojureScript, a compiler for JavaScript, and the use of REPL (Read-Evaluate-Print Loop) technology. While ClojureScript compiles down to JavaScript, Josh noted that the typical workflow involves using a terminal and REPL window, which he found less efficient than coding directly in his text editor, Emacs. He mentioned trying out Figwheel but eventually turned to Shadow-cljs for its better integration with the JavaScript ecosystem, despite facing challenges with npm and yarn.

 

Exploring Skittle and Sai

In an exciting part of the presentation, Josh introduced two concepts from the Clojure community: Skittle and SAI. Skittle is a small Clojure interpreter that can be used within script tags on a webpage, while SAI is a configurable interpreter for scripting and domain-specific languages (DSLs). Josh highlighted the importance of SAI, describing it as a meta-circular interpreter capable of evaluating Clojure code within itself. He then demonstrated wrapping SAI in JavaScript for browser use.

 

Hands-on demonstrations

Josh’s hands-on demo was a highlight of the session. He created a simple web page, adding Skittle tags to write and execute ClojureScript code directly in the browser. By downloading a file from npm and writing ClojureScript within the Skittle tag, Josh showcased real-time code execution by reloading the page and inspecting the element. To add some excitement, he created a function called “exciteMe!” that triggered an alert message.

 

JavaScript interop and advanced techniques

Josh discussed JavaScript interop in ClojureScript, addressing his frustrations with JavaScript’s lack of closure features and the need for workarounds like exporting functions and manipulating objects. He explained the process of loading and interpreting Skittle JavaScript, moving the code into a conventional .cljs file and ensuring proper formatting with Emacs.

Despite encountering a cors error — a security feature that prevents the execution of untrusted code — Josh introduced Babashka, a fast native ClojureScript runtime. Babashka supports various features, including data transformation, HTTP client and server capabilities, and HTML representation, although not all Clojure libraries are compatible with it.

 

Leveraging Babashka for efficient coding

To overcome limitations in Bash scripting, Josh introduced Babashka, allowing him to write a web server using a file called bb.Eden. Babashka also includes a task runner for parallel task execution, enhancing efficiency. By setting up an HTTP server and running a browser in REPL, Josh demonstrated how to write and test code seamlessly.

 

Interactive development with REPL

Josh connected a REPL environment called Cider to his web browser, showcasing real-time code evaluation. He demonstrated writing code in the REPL and seeing immediate results in the browser. This interactive development approach allowed for testing and experimentation without affecting the running code, a feature particularly useful for building robust applications.

 

Practical applications and future goals

Josh aimed to clone Zen Caster, a web-based podcasting platform, demonstrating the practical applications of his techniques. He began coding the UI for his project, changing the page title, adding a video element, and listing webcams. Despite some initial errors, Josh successfully manipulated JavaScript code to filter device objects and use the getUserMedia function for video input.

 

Addressing challenges and sharing insights

Throughout the presentation, Josh tackled challenges with promises in functional programming, introducing Promesa, a library that manages asynchronous tasks efficiently. He also discussed the importance of converting data to Clojure format early and utilizing macros for imperative-style coding.

 

Conclusion

Josh concluded his presentation by discussing the advantages of using ClojureScript, including its lower memory usage compared to traditional JavaScript frameworks. He encouraged viewers to try out Skittle, a low-risk solution for functional programming in the browser, and offered to share his code on GitHub. With an invitation to ask questions and join him for further discussions, Josh wrapped up a session filled with practical insights and innovative techniques for REPL-driving the browser.

Josh Glover’s presentation not only highlighted the potential of ClojureScript and REPL for interactive development but also provided valuable lessons on overcoming common programming challenges, making it a must-watch for developers interested in functional programming and real-time web applications.

 

Additional resources

Check out more from the MeetUp Func Prog Sweden. Func Prog Sweden is the community for anyone interested in functional programming. At the MeetUps the community explore different functional languages like Erlang, Elixir, Haskell, Scala, Clojure, OCaml, F# and more.