Show HN: Leporello.js – interactive functional programming IDE for JavaScript

Show HN: Leporello.js – interactive functional programming IDE for JavaScript(leporello.tech)

107 points by dmitry-vsl 2 years ago | 33 comments

Hi! Leporello.js is an interactive functional programming environment designed for pure functional subset of JavaScript. It executes code instantly as you type and displays results next to it. Leporello.js also features an omnipresent debugger. Just position your cursor on any line or select any expression, and immediately see its value. Leporello.js visualizes a dynamic call tree of your program. Thanks to the data immutability in functional programming, it allows you to navigate the call tree both forward and backward, offering a time-travel-like experience. Leporello.js offers the ability to develop HTML5 applications interactively, enabling you to update your code without losing the application's state.

It records an IO trace of your program, which is then transparently replayed during subsequent program executions. This allows you to instantly reexecute your code after making small tweaks, thereby tightening your feedback loop.

Furthermore, Leporello.js can serve as an interactive notebook. You have the flexibility to utilize any JavaScript libraries to visualize your data directly within your code.

For a more detailed walkthrough, please watch the product video. Currently, Leporello.js is available as a free online application that you can try right in your browser. My goal is to build the Leporello.js standalone Electron app and a VSCode plugin, both with TypeScript support. Additionally, I plan to add Node.js support (currently, Leporello.js is only for HTML5 apps). In the VSCode plugin, Leporello.js will sit on top of the built-in TypeScript/JavaScript mode, utilizing its code analysis information to enhance the default VSCode experience with unique Leporello.js features.

I am building Leporello.js as a single independent developer. Leporello.js is funded solely by donations. Support me on Github Sponsors [0] and be the first to gain access to the Leporello.js Visual Studio Code plugin with TypeScript support.

I'll be delighted to answer any questions you may have.

[0] https://github.com/sponsors/leporello-js

skrebbel 2 years ago |

Wow this looks pretty spectacular. At first I was annoyed that I had to play a video to get it, but I then had to admit that there’s no real way to convey this so well with text.

That VS Code plugin sounds particularly amazing. How do you plan to scope things? Notably how would I avoid it accidentally re-running side effects?

dmitry-vsl 2 years ago | |

I plan to blog about Leporello.js internals, but now I will try to give you a short answer.

When navigating a call tree, Leporello.js evaluates your functions with tracing enabled, collecting execution information and materializing parts of the call tree in memory. This evaluation is lazy, but if a function invokes an IO operation, the corresponding call tree node is saved eagerly to ensure the function is called only once, avoiding duplicate IO operations.

Handling state mutations is more complex. Leporello.js doesn't inherently know if a function, possibly from a third-party library, will mutate its arguments. Therefore, when using such functions, there's a risk of displaying incorrect data when you navigate and debug your code.

Ideally, a language would color functions based on their purity, allowing smart IDEs to deep clone arguments before invoking impure functions, enabling time-travel debugging. Maybe I will add comment pragmas to Leporello.js. They would allow to have state-mutating functions as first-class citizens in Leporello.js. Syntactically, they can be just ordinary comments:

  // leporello: mutation
  function sort(arr) {
     arr.sort() // in javascript, sort mutates array in-place
  }

Currently, this responsibility falls on the programmer. If you use argument-mutating functions, consider wrapping them in a pure functional interface. The viable approach is structuring your program with a 'functional core, imperative shell' architecture. This approach, as seen in Leporello.js itself, involves a main codebase that is pure functional, operating on a single immutable data structure describing Leporello.js's state, while the 'shell' part invokes pure functions and applies effects.

The notable example of such architecture is Redux. Redux architecture fits perfectly for apps build with Leporello.js, as you can see in TODO app example https://app.leporello.tech/?example=todos-preact

FractalHQ 2 years ago |

This looks awesome. Any plans to support Typescript? I can’t stomach vanilla JavaScript these days.

Edit: that vscode extension with typescript support actually seems perfect for me!

sethcalebweeks 2 years ago |

The term "self-hosted" is an interesting choice. It's usually used to describe the compiler of a programming language written in that same programming language. This is an IDE written in JavaScript. Cool project, though!

ithkuil 2 years ago |

Something like this but for jsonnet could definitely help people grokking how jsonnet works.

I do believe that jsonnet (despite all it's real problems) is an underestimated jewel mostly because of the embryonic level of its tooling. An ide/debugger like this could help.

EDIT: some tangentially related work: https://github.com/kubecfg/ursonnet

dmitry-vsl 2 years ago | |

I don't have any experience with Jsonnet, but from what I can gather, it appears to be a Turing-complete functional programming language. Leporello.js, on the other hand, is a UX concept that can be applied to any functional programming language, including Jsonnet.

In fact, I believe it's possible to write code in TypeScript that would be very similar to Jsonnet. TypeScript provides the capability to create compiler plugins, which can restrict the allowed language subset, effectively making it more limited and suitable for configuration

ithkuil 2 years ago | | |

The main difference between jsonnet and JavaScript/typescript is that it's lazily evaluated.

Evaluation is driven "from the output"; by which I mean that only the code that has an effect on the output is evaluated. When an object is rendered (manifested) all it's non-hidfen fields are evaluated and every expression they contain produces a value which is then manifested and recursively only the fields that are manifested have their expressions evaluated.

This ia particularly important when combined the key operation that jsonnet provides: object overlay/merges. When you overlay an object on another object it may shadow a field of the "super" object causing the expression of the super object to not be evaluated.

Byamarro 2 years ago |

Incredible, it's like having perfectly typed language without having to use types at all. Few worries from my side:

- TypeScript gained traction partially because you could migrate an existing codebase to it. Does leporello support gradual migration from style that's not aligned with leporello to the supported subset? That is, how leporello handles a codebase that's partially written in freestyle JS and not the subset that leporello specify handles?

- How does it deal with patterns from popular frameworks or libraries that are borderline frameworks. React, Vue, Express, NestJS etc.

- It feels like leporello has to store a lot of possible branch-outs of the state. How would it handle frameworks code in this case? React on its own probably has a lot of branch-outs inside. Would it devour my RAM?

BobJS 2 years ago |

Are you using the monaco editor? If so please enable the autoClosingBrackets:

```js

monaco.editor.create(document.getElementById('container'), {

    value: 'const myVar = hello',

    language: 'javascript',

    autoClosingBrackets: 'always'  // <--- This

});

```

When I highlight "hello world" and press ', I want to see "'hello world'" instead of "'"

All that aside, awesome project

dmitry-vsl 2 years ago | |

Thank you for the suggestion! I am using the Ace editor. I will consider adding a configuration option, but my main goal is to build a VSCode plugin, so all the configuration will be left to the user.

meowtimemania 2 years ago | | |

sounds amazing. Your tool is super useful for understanding recursive functions. Only thing I felt that I was missing when using this was a format button to fix the formatting of my code.

artisin 2 years ago |

I dig the core concept, particularly since I've been searching for a more efficient alternative to opening a blank DevTools window for executing various helper scripts. With that in mind, what about introducing a "Loose Mode" option of sorts, akin to a basic js interpreter? Granted, most of the tool's interactive functionalities probably wouldn't work in this simplified mode, but it would, in turn, expand the tool's overall versatility. Enabling you to use previously written scripts and/or experiment with code (such as copying an example snippet from the README) without having to first adapt it to a functional paradigm.

dmitry-vsl 2 years ago | |

I agree that enforcing strict purity in Leporello.js might limit its adoption among developers who prefer a more flexible approach. However, this initial focus on a pure functional subset allowed me to concentrate on the core idea – reimagining developer tools for functional programming from the ground up.

Exploring the development of a two-mode debugger that can seamlessly switch between traditional imperative debugging and Leporello.js-style debugging for pure functions in modern multiparadigm languages is indeed an intriguing research avenue.

TerrifiedMouse 2 years ago | | |

Hope you don’t mind answering a few questions of mine.

What’s the functional subset of JS? Any literature on this subset? I don’t really know JS apart from hacking together a few scripts for fun.

If this is purely functional, does this mean we will need to use monads for IO like in Haskell?

gmerc 2 years ago |

It looks amazing. That said the lack of a license is something you may want to address.

p2hari 2 years ago |

Really awesome , would love to see typescript support.

metadat 2 years ago |

OP: Bug report- With Brave on Android the "try it" demo constantly zooms way, way in, making this unusable on mobile.

zubairq 2 years ago |

I played around with it for a bit and love some of the concepts. Is the tool aiming to be a business or a passion project?

dmitry-vsl 2 years ago | |

I would be delighted to turn it into a business, but I may not be able to do it without securing funding.

ericol 2 years ago |

This looks seriously awesome. Favorited it for later.

As a side note who / what narrates the video? ;)

dmitry-vsl 2 years ago | |

It is an AI voice generator https://genny.lovo.ai/

aragonite 2 years ago | |

it's the same AI girl voice you hear in like 30% of tiktok videos.

And she pronounced 'console' wrong. The noun should be pronounced /ˈkɑːn.soʊl/, not /kənˈsoʊl/.

thriftwy 2 years ago |

Здравствуйте, Дмитрий Евгеньевич!