This is the story of its creation. Hope you’ll find it interesting and inspiring.
When creating a website, you generally have to code a front end & a back end connected and working with one other.
For the front end, I often used developers sandbox to get code snippets that I adapted to the UI of the website. It’s really cool and it makes coding so much easier. As the web dev community is so rich, you basically can find anything you’re looking for!
Though, for the back end, it’s really another story! Blog posts articles, getting started guides, GitHub projects… is your new credo 😨.
And that’s only to select the right back end stack for your project! That’s why I thought it would be so much more efficient to have a back end playground. It would show you examples and code snippets to get to throw a quick prototype.
So let’s get started.
Here’s what we get: the development environment is composed of the front end, back end editor panels, sitting side-by-side to code faster. I’ve also added a preview window on the right side to see the rendered page in real time.
On the left side, I wanted a code snippet search area, so developers can search in the code snippet database. I really wanted everything to be in a single page, so developers can create new snippets, and explore available ones quickly.
I made every window adjustable, so you can customize your experience as you wish: resize any panel, allow full screen view… It’s handy to focus on some codes, or to make sure web components are responsive…
There’s a catch, right? How can we write a back end and use it in the front end without creating endpoints, routing for APIs and HTTP requests? The secret recipe is the technology I mentioned above, WarpJS, which I wanted people to be able to test really easily. It automatically transforms an exported function of a Node.js module into an HTTP server API. On the client side, you no longer need to use HTTP to call the back end module, it just basically calls its functions.
So this means that, in the back end, you just need to create functions and to export them. In the front end, you just call it.
To lay the first stone, I chose GoldenLayout as window layout management. For the editors’ views, I selected the Monaco code editor that powers Visual Studio Code. It takes care of error detection, auto identification, code completion…
The preview is an iframe to inject code snippets, which are stored in a MongoDB database, and to provide a live-reload feature for the preview window.
For the search area, I choose to made it pretty simple: instead of being classified by categories, I choose to sort them with hashtags (for instance #react, #fauna, #AI and so on). Developers can add title and a 250 characters description.
The back-end panel is connected to the ScaleDynamics code-to-cloud Suite to redeploy instantly and to support the full stack live-reload.
Finally, I’ve naturally coded the whole playground back end with WarpJS itself: I’ve got my first fully functional prototype within two days 😎.
Feedbacks are much appreciated so I can improve it!
You can read it here