v0.3.0 Release —TypeScript in Monaco Editor for Bit by bit developers
If you prefer writing TypeScript code instead of composing visual Blockly blocks this release is for you. From now on both use cases will be supported to create parametric 3D designs. We integrated Microsofts Monaco editor that also powers Visual Studio Code — one of the most popular and powerful code editors in the world. TypeScript in combination with our API for which we now provide full type definitions opens up various advanced creative coding scenarios that were not possible before. This is also relevant for the users who use the application to teach programming. Now you will be able to naturally progress from visual programming to written code without leaving the application. Monaco editor will guide beginners by detecting possible coding mistakes and giving relevant suggestions when navigating the API surface.
While Monaco editor is certainly one of the biggest features of this release let’s briefly discuss all improvements which were made along the way.
TypeScript for 3D
In the example below you see how Monaco editor overlays 3D BabylonJS canvas and guides the user when typing. Every exposed function has a link to the relevant part of Bit by bit developers documentation.
The same script, but composed in visual Blockly editor is shown below. You can see that documentation links work both in Monaco and Blockly. Users can even navigate further to our open-source github repository to check the code that lies behind the surface.
Zelos Renderer
When project began we integrated Blockly with its default renderer called Geras. It worked great, but in the more recent versions of Blockly Google developed Zelos renderer, giving a fresh look to the visual components. Zelos hosts design language that makes code less crowded and a bit easier to read. Check the image below to see for yourself.
API Documentation
In order to expose Bit by bit developers API through both — Blockly and Monaco editors — quite a bit of refactoring had to be done on the original codebase. When doing that every visual component was given its’ pair function under ‘bitbybit’ namespace and category services. The scheme below shows the parity. This allowed us to create one holistic documentation for visual blocks and TypeScript API in one go.
As mentioned before, documentation is available from both editors. The following two gif animations show you how to navigate between code and docs.
Examples of TypeScript code
It is possible to convert visual script code directly into a TypeScript, and while this can be useful in certain cases, code is automatically generated and is not meant to be read by humans. It also has certain characteristics, which allow us to do code validation before inputs enter each and every component. This makes it tricky to read such a code. This is why we encourage you to check our clean examples to get a better idea of how to write TypeScript. Our goal is to include TypeScript examples for every Blockly example and then go further from that.
You can open TypeScript examples by clicking on TS button behind every example picture as seen in the animated gif below.
How to enter TypeScript editor?
Default code editor for Bit by bit remains to be Blockly. In order to switch to Monaco you can do two things. First, you can open up the link https://bitbybit.dev/app?editor=ts, which will start Monaco automatically. Notice query param ‘editor’ having ‘ts’ value, which stands for TypeScript.
The other way is to follow the process shown in the animated gif below. Just click a button ‘<>’ on the left side to enter Monaco and ‘<\>’ to get back to Blockly. In the future we may provide additional setting preference for this.
What about JavaScript? Why TypeScript?
In Monaco editor you can write JavaScript. TypeScript is a superset of JavaScript and thus JavaScript code is legal TypeScript code. In fact TypeScript implements a future JavaScript features that are not yet official. These are usually stage 3 (candidate) language specs, which have a high probability of entering JavaScript language in the future. Without going into much detail we strongly suggest you to try and understand the benefits of a type system and let it guide the development of your scripts.
Bit by bit is written in TypeScript and many technologies which we integrate are written in TypeScript such as Monaco editor or BabylonJS game engine to name a few. Some may argue that TypeScript adds additional concepts to the original JavaScript language and is therefore harder to learn, but we dare to challenge that conception as code completion & type inference will gently guide developers who are getting started and point them to the right direction.
Final Remark
This release focused on UX and TypeScript language integration. We have big plans for 2021 and although it took a while to get this release done it was a necessary step which will allow us to move forward and build a great web platform with large collection of 3D algorithms for any scenario.
