Custom Components in your Low-code app. 🐙
When it comes to the low-code approach to development, there are (as always) pros and cons to consider. Yet, one of the most wrongly interpreted cons that almost always come up on the list of things to watch out for before developing your app with one of the low-code tools is the lack of custom components and customizability.
Flash news just in: “That’s simply not true”. Many low-code development platforms have evolved greatly in the past 24 months, and one thing most of them were focusing on is an option to import custom code to your project.
As a matter of fact, this has become the industry norm, as all of the industry-leading platforms, such as FlutterFlow, Draftbit, and Weweb, allow you to create custom components with your own imported code.
Today, we’re going to show you how we were able to develop different custom components for a web app developed for a German startup. Keep in mind that we were able to go from idea to the market in less than 7 weeks.
Why we develop Custom components. 💻
One of the biggest challenges with the web app we will look at today was the onboarding process. It is concluded of the multi-step questionnaire and it was important to keep the users involved and intrigued through the full process.
Under the hood, the web development platform we worked with runs on standard Vue principles. Websites developed with the Vue framework combine many different components, e.g. input fields, navigation buttons, dropdowns…
Many of these are already included in most of the development platforms; however, their customization is limited, and they behave in only a certain way. This makes apps look generic and additionally, the user experience is not customizable.
For this project, we utilized the platform’s functionality of importing custom Vue components in certain instances of UI elements: Radio buttons, Choice chips and a Rating component.
Our dev process. 🔧
Radio buttons we wanted had to have fill gradients, different-sized buttons, and animations. To achieve that, we took the existing platform-generated radio button Vue component (available on GitHub) and customized it with CSS.
Adding Choice chips was a different story. We had to develop a component with multiple selectable chips - an interaction that neither the platform nor raw HTML supported.
By using a popular open-source Vue Library called Vuetify the dev process was fast. This enabled us to import chip functionality that we wanted and still set custom functionalities we needed.
Make sure to try out our Choice chips component 👇🧡.
Like choice chips, we needed a Rating component where a user could provide feedback by clicking on 1 out of 5 stars. A component that was also available in the Vuetify library and was highly customizable.
How much do you Love Calda? 😊👇
Low-code Apps are not customizable. Right?
Importing custom components to the platform development editor works by specifying which properties this component needs, e.g., height, background color, options for dropdown, etc.
These are defined in the configuration file of a component called ww-config.js. These properties are editable later in the platform editor and passed down as props into our component, where we can use them however we want.
Most often, these are some CSS properties used for style binding. In our case, we specified which options we wanted to display in the Choice chips component, their color, and how many of them are selectable.
Components can also have bindable values, so you can directly connect data from the backend to them in the dev platform with just a few clicks. When a component has to report back data (e.g., rating value in the rating component), this is done via emit events from the Vue component.
It's all about the Flexibility. 🤸
When needed, any Javascript or Vue code can be run inside the component. This enables things like DOM access, event handling, reactivity, Conditional Rendering, or slots - which would otherwise be limited. For development, the local server, which only serves a single component, can be used in the dev editor inside the development platform.
Is it Scalable though? 🚀
Just like Vuetify, other libraries can be used inside custom components, which opens a whole new world of possibilities. For example, we created an interactive chart with vue-chartjs library for this project and some draggable elements with Vue.Draggable. Once imported into the development platform, components can be reused multiple times across pages or even different projects.
A Myth busted.
Using a low-code development approach does not mean you need to sacrifice the customizability of your application. The amazing thing about this is that we launched the app with these custom components in less than 7 weeks. In other words, low-code gives you the best of both worlds.
Low code does not mean low customizability. Don’t believe everything you read on the internet (apart from this article obviously…).
From Idea to the Market in less than six weeks? Let's build your Custom Mobile or Web application.
