How Vue helped us create Chameleon Builder
A year ago our team had a challenging task of creating proof of concept for a tool that would be used to build applications with only one constraint — it should not offer any programming on the end-user side. This was the beginning of our no-code platform, codenamed Chameleon. This is the story of Chameleon Builder, front face of our Platform, and how Vue helped us develop it.
Builder is a core tool of our no-code Platform. It uses rich set of elements, grouped into bundles, to generate and deploy web applications. To create those elements, we researched several JavaScript frameworks and ended up choosing Vue. Vue had all the features we needed to create isolated elements that we separate into several groups like inputs, widgets and containers. Vue also offers simple, yet flexible, API we used for element communication.
Bundles and Elements
Each element inside bundle is built as isolated Vue component that has additional component definition we call component meta. This meta describes interface for creating component options inside Builder. Each element can then be dropped into page and then customised using options panel. This panel is dynamically built out of component meta.
In the example above we are showing Line Chart widget that has meta (index.meta.js) and component (index.js) file. Component file deals with widget logic and rendering while meta defines options, events and actions of a widget.
In the snippet above we have example of Line Chart widget meta where we have some basic properties defined. Properties like group , type , icon , name define the look and placement of element inside element toolbar.
Properties like options and events define element options and behaviour (communication with other elements). In the example we have only one element defined which triggers once data source of element is changed. Once that happens this event is triggered and other elements can listen this event and react to it. This flow is called EAR (event — action — reaction) in our system.
Once element is dropped into page, user can set its options. Using Vue, we read meta of each bundle and store it inside Vuex state. When element is selected, we are reading state and rendering option elements. Each option has a type property which defines the render type of an element (input, select, colour picker, etc.). We are using dynamic component rendering that vue offers out of the box, so each option type is one component in our project. Each option is applied immediately and saved in application schema. So, to put it simply, the panel above is constructed from bundle meta data once element is selected.
In the video above you can see how easily you can bind data to chart widget and create animated line chart.
CLI Bundle Plugin
To make creation of bundle as easy as possible, we have created Vue CLI plugin for bundle libraries. Using this plugin will prepare your Vue project with everything that is needed to create bundle for Builder. Currently we have developed several bundles this way:
- Material Bundle: Base elements required for business applications
- Charts Bundle: Charting elements
- Team Bundle: Advanced standardised elements
- Seven Bundle: Bundle for our betting components
- Vision Bundle: Special bundle for our AI components
This bundle is work in progress and it will be updated as we advance our client API development. Since our Platform is in pre-alpha stage, it is bound to change frequently.
Chameleon SDK
During development phase of Builder and several bundles, we realised that a lot of functionalities are duplicated across components and services. Using Vue mixins we extracted shared functionality and placed it in our shared SDK repository. This repository holds several mixins, utility functions and connector implementations that handle data connectors used by our system.
Developers of a bundle are advised to use this bundle since it solves common problems and offers rich set of mixins and utility functions like handling local storage, lazy loading remote dependencies (like d3 charting library) and so on. Pull requests are welcomed here even in this stage.
Public Access
You are probably wondering “When can I try this Builder”? Well, hopefully, it will be very soon. Currently we are working on element refinements, data management and flow implementation. Once we have these basic three modules we will release Platform for our internal use. After detailed quality assurance process we will offer it to wider range of developers and startups as invite only beta access. During this phase we will add additional features and hopefully release it as beta version for limited audience.
If you wish to contribute, you can join us in our open source projects, or you can apply for a job and join us at NSoft in creation of this revolutionary no-code Platform.
If you wish to know more, drop us some comment.
