Shelly: under the hood

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • OPS - Build and Run Open Source Unikernels
  • antlr4ts

    Optimized TypeScript target for ANTLR 4

    What about the drawing/programming language itself? Even though it's quite simple, we still need a tokenizer and an interpreter. We've chosen ANTLR to define the grammar, with antlr4ts as the target. That is, when running the ANTLR tool, the input is a file containing the grammar definition, and as the output, we get TypeScript files that handle the parsing of arbitrary text into an AST (Abstract Syntax Tree).

  • Playwright

    Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

    Shelly's frontend is built using webpack, tested with jest and playwright, and deployed using Netlify. The whole process of connecting a GitHub repository, configuring CI, pull request previews, custom domains, and, finally, the production build is really painless. And makes the development so much easier!

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • TypeScript-Website

    The Website and web infrastructure for learning TypeScript

    Shelly itself is built with TypeScript. The types bring some sanity to the otherwise untyped JavaScript/browser domain, integrating nicely with the whole rest of the ecosystem.

  • scala

    Scala 2 compiler and standard library. For bugs, see scala/bug

    Finally, on the backend, we've got a simple Scala-based application, deployed on Heroku. The database is PostgreSQL, but the application is not a straightforward CRUD as you might expect, but instead uses SQL-based, transactional event sourcing. Probably overkill, but — if we ever want to create a new view basing on the events (which include e.g. program creation in creative mode, or solving a challenge) — for sure we'll have the data available!

  • redux

    Predictable state container for JavaScript apps

    For the skeleton of the application, we've made a popular choice, that is React. Nothing non-standard, though as the application has grown, we've seen that our reliance on Context API to manage state has reached its limits. That's why we're considering porting that aspect to Redux.

  • Konva

    Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

    Let's move to the canvas. Here, the main job is done by Konva, which provides us with a simple and performant layer on top of the raw HTML canvas element. Shelly uses a rather basic subset of Konva, as Shelly's drawings are composed mainly of lines, arches, basic figures, and SVG patterns (hearts, stars, cars, etc.). One aspect that was especially challenging, however, was properly handling the zoom & pan, using both on-screen controls and the mouse wheel.

  • Visual Studio Code

    Visual Studio Code

    Second, we've got the editor. Here, we are using the Monaco Editor, which is the editor that's also used in VisualStudio Code. To configure the editor for a custom language, you have to provide the keywords, symbols, operators and configure the tokenizer. We also get auto-complete out-of-the-box — you just need to provide the completion function, which can be context-sensitive or not.

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts