DEV Community

Cover image for Writing Clean Bug-free Code in Quokka.js

Writing Clean Bug-free Code in Quokka.js

_robynedgar profile image Robyn Edgar Updated on ・2 min read

Contributed by Matt Martin
Have you ever wanted to be able to test as you go while writing Javascript? Our developers here at Hifyre are constantly trying to make their work more efficient by identifying tools that simplify the process. Quokka.js lets you do just that by allowing rapid prototyping within the scope of your chosen editor.

What does that mean? Let us show you.

alt text

If you are familiar at all with linters, Quokka.js has a lot of similarities. A linter is used to identify potential bugs, and even code that may be difficult to maintain. The best part about tools like these is that they get installed in the coding environment you are already using, so you don’t have to integrate any additional steps into your prototyping workflow. Your testing happens simultaneous to coding.

Where Quokka.js differs from a standard linter is in the live feedback functionality. Using live feedback, you can see results as you go. This presents a lot of potential opportunities as you code. For example, let’s say you wanted to experiment with a new library or function — using Quokka.js would allow you to run and test the output of that library without having to build a test environment. Better yet, the results are all reported inline, so the results are reported alongside the code that is generating them. Another good example of how useful live feedback is is time testing. With a simple addition of /?./ following the line of code running a function, you can time how long that function takes to execute. This comes in handy when trying to decide on the most optimal way to write your code.

alt text

Additionally, getting live feedback in your coding environment means that you still have access to all of your code files and imports. You don’t have to worry about configuring that for a test environment. You can test code snippets right within your editor. Quokka.js also differs from linters by offering live logging, live code coverage, live comments, and project file importing.

Are there other tools like this?

The answer is, not really. There are linters, but they don’t do nearly as much as Quokka.js. Alternatively there is another tool called Wallaby.js from the creators of Quokka.js, but there are quite a few differences between the tools. Wallaby.js is a more robust, test runner. Whereas Quokka.js was built to be a playground or a sandbox environment. Additionally, Quokka.js has a free community option that allows users to build their own plugins. This means that you can augment the features of Quokka.js to fit your needs and make the possibilities endless.

We are hiring! Are you a full stack developer? We want to here from you.

Discussion (0)

Editor guide