Skip to content

In browser REPL for Elm

Evan Czaplicki edited this page Mar 6, 2017 · 2 revisions

In a nutshell

Elm’s REPL only works offline right now. It would be great to use the REPL in browsers, both for people learning Elm and for expert users exploring complex code. This project is intended for people interested in exploring user-friendly features, along with public-facing tooling.

Brief

Right now our REPL only runs on the command line. It would be amazing to have an in-browser REPL so we could actually see Html values and have a better UI for poking around expressions and values.

The most successful effort runs elm-repl on a server. This is quite handy, but we should take things like iPython notebooks as inspiration for the end goal.

The early prototype would be a REPL for a simple lambda calculus (not connected to Elm at all) so you could test out the core UI ideas. From there, you would get in contact with community members who work on core tools and figure out what the path would be to bring it in. For example, it would be really cool if the time-travel debugger let you easily go into the REPL for any frame!

Starting points

With this project, there are two good start points. You can either jump into the implementation, or do some research on the currently available REPLs. If you jump into the implementation, make sure to the section below - start small and get a working version you can experiment with before progressing. If you jump into the research, be sure not to spend all your time reading about things! If you're not sure what to do, let's discuss it on Slack!

Implementation

A first pass should not target Elm. This project is focused on developing the UX and UI first, before integrating Elm support at a later date. Instead, you should look at implementing some form of simple REPL for a small DSL. Consider looking at lambda calculus or reverse polish notation. Start by figuring out how these work. There is a small clue in the name - Read, Evaluate, Print, Loop. How does Read work in your program? How reliable is Evaluate? Is the output from Print useful?

Once you have a working REPL, you should start to explore some of the UX and UI features discussed in the research section.

Research

Start by examining other online REPLs. Many languages have websites such as tryclj designed to introduce newcomers to languages. Try to identify strengths and weaknesses of each different REPL. Some languages have multiple REPLs - what's the difference between them?

A browser-based REPL has some advantages over a command line REPL. For example, an Elm REPL may be able to render a Html msg value directly to the DOM, allowing the user to see the data they're working with clearly. Many powerful visual REPLs use jupyter, an engine designed for showing saved REPL sessions known as notebooks. How does jupyter lay values out? What ideas will work well for rendering Html elements?

Clone this wiki locally