JavaScript has evolved a lot over the years from it’s inception to just help with interactive pages. Now a days entire applications are completely run on the clients with barely databases getting involved that too for data persistence for future. Else, it’s all frontend applications. Thanks to NodeJs, serverside technologies have grown rapidly on the JavaScript side. It’s a very exciting time we are seeing.

Introduction to Compiler

We all know compilers compile the code and generate a executable. But for JavaScript, we don’t have all this. In the sense that it’s interpreted code. There are instances where Browser implement hot code tracking, and they compile it to byte code so that, that part of JavaScript code can be executed faster. Also browsers have become very powerful softwares with Web Assembly targeting to run different language based programs, a topic for another day 😁

But from the context of what we see on the internet about running a snippet of code online, people refer to these as online compiler in a broader sense. Forgetting about debating how far this is ok, I wanted to work on building my own JavaScript Online Compiler.

Before I dive into how I built it, let me show you the demo of the project.

Hope this got you interested. You can try this tool at javascript-online-compiler. Let us dive into the details on how you can build your own.

Building the tool

We need to provide a place for holding the code snippet textarea, and when the user is ready to run, they can click a button Run that triggers the execution of the snippet and a output section that can capture the result of the execution.

<textarea id="codeinput"></textarea>

<button id="run">Run</button>

<p id="output"></p>

Now we need to connect them together to bring the overall experience to life. We will be using JavaScript to attach the event handlers.

const codeinput = document.getElementById("codeinput");
const submit = document.querySelector("button#run");
const output = document.getElementById("output");

submit.addEventListener("click", () => {
  const code = codeinput.value;
  const inputfn = new Function(code);
  inputfn();
});

Here, we pick the content that’s there in input section, and we use Function constructor to create a function instance with the input code, and run it. That’s it - that’s all we need to build a page that runs a JavaScript code snippet.

Gotchas

There are couple of things missing, which would bring good user experience.

  1. Exception handling - what if the user snippet is not a valid JavaScript code?
  2. Error handling - what if there is runtime error? wrong reference usages?
  3. Logs - we need to collect all the logs and show back to the user, in case there are logging statements in the snippet.
  4. Style - it would be great if we can highlight the execution as success or failure by adding colors to output.

Lets handle these one by one.

For exception handling where snippet isn’t valid javascript code, we could use try catch block as shown below.

try {
    const inputfn = new Function(code);
} catch (e) {
    output.innerText = e.message;

For error handling, where there are runtime errors running the snippet, we could add the function execution into try block

try {
    // ...
    inputfn();
} catch (e) {
    // ...

For capturing logs, we need to reference console object available on the browser as shown below.

const logger = console;

submit.addEventListener("click", () => {
  // ...
  const logs = [];
  logger.log = (msg) => {
    logs.push(msg);
  };
  try {
    inputfn();
    output.innerText = logs.join("\n");
  } catch (e) {
    // ...
  }
});

For adding styles on the status of execution, we could add code below

submit.addEventListener("click", () => {
  // ...
  try {
    inputfn();
    output.innerText = logs.join("\n");
    output.classList = ["success"];
  } catch (e) {
    output.innerText = e.message;
    output.classList = ["error"];
  }
});

The overall code of this project is made available through this javascript-online-compiler repo on GitHub.

Hope this project felt exciting and sparked interest in you to dive into what’s possible with Modern Web. Please do reach out to us on Twitter (@vamshisuram), and share your valuable suggestions. Do follow the blog for future blog posts on interesting projects.