DEV Community: Vitali Havryliuk

Application development with 100% customization. Customization Driven Development (CDD)

Vitali Havryliuk — Sun, 09 Oct 2022 20:03:07 +0000

In this article I want to share my experience in developing interfaces with a level of customization up to 100% (real 100%). At the same time, backward compatibility and the possibility of updates are preserved. Magic? - No, it's CDD.

It all started back in 2018 in a large international company. I was invited to the main office to explain to the top management how we were going to solve the problem of customizing our product, and specifically the UI part. Clients needed to slightly change it for themselves and add something. It was necessary to maintain backward compatibility so that customers could receive product updates. Then I knew only the possibility of adding "holes" in the code (slots), where you can add any functionality. Well, also I knew about the API for changing already developed functionality. It is clear that there was no talk of any possibility of customization at 100%, because then you need to change the source code, and this is a loss of backward compatibility by itself.

Of course, not everyone needs a CDD. This technique will be extremely useful when developing a product whose customers need a deep customization. I mean, not just change the logo and the name, but also change absolutely everything your heart desires. And at the same time not to lose the possibility of future updates of the product.

How to achieve almost 100% customization without losing backward compatibility?

CDD uses "declarative customization", i.e. the entire view with logic must be turned outside for full customization. If it is necessary to customize certain parts of a rather complex component, then we just render its simpler internal components. These components can be packaged in a so-called "black box" with a rich API and "holes" (slots), or they may be rendered with even simpler components.

And here you can object: “But how, if we change the internal content, then we lose the possibility of updates!”. No, that's not entirely true, and that's why:

A component of any complexity (except for a primitive one) is just a set of simpler components. This set is always freely available and we clearly see what and where has changed in this set (when it is updated) and can update it very simply and quickly manually (if it is necessary);
A complex component consists of simpler components. They can be rendered in their standard, packaged form (if we do not need deep customization) and then we will receive their updates automatically;

Well. But how can this be achieved? What are the steps?

First you need to develop the most primitive components. They can, and some of them even should, have 2 versions:

The standard component, the "black box" with a rich API and "holes" (slots). Easy to use, but has limited customization options;
The wrapper component, that extends the capabilities of the content that you place inside. Less convenient to use, but much more customizable, up to 100%. Required for standard HTML elements:

<button>, <a>, <form>, <input>, <textarea>, <select>, …

When developing more complex components, you need to use a set of simpler ones. Like primitive components, more complex components can have 2 versions. It’s not necessary to create a wrapper component: if you can wrap only a declarative template from simpler components into a standard component (without code to manage it). And then you can just use the inner content when customization is needed.

In theory, everything is fine. How are things in practice?

You can see this right now in the example of the localization widget. There are tabs, switching between you can see the difference. Sources: Github. Also, I am currently preparing a smaller project for publication and it is fully Open Source. There you can clearly see all the advantages of CDD. The project will be extremely useful for those who often work with complex and custom HTML forms with dynamic fields and validations. I would like to talk about it in more detail, but this is a topic for another article.

In conclusion, I would like to recall the project of customizable mobile phones Project Ara. Using this example, you can see that not everyone and not always needs customization. And few people want to overpay for the possibility of customization. But the few who really need customization are willing to experiment and try different approaches to get exactly the result that meets their expectations.

I will be glad to read your comments and opinions on this technique and feel free to write me a personal message. Thank you!

Auto Regex Generator / Builder

Vitali Havryliuk — Sun, 27 Mar 2022 20:44:15 +0000

Almost all developers sooner or later come across regular expressions. In almost 99% of cases, we absolutely do not like to write them, considering it a side job that is not related to programming.

Most of us, when faced with this problem for the first time, begin to type in search engines something like: “auto regex generator” and, to our great regret, realize that ~~Google is broken~~ all search results are services for checking the correctness of an already built regular expression (or I googled badly).

But how to write this most regular expression?

Basically, there were 2 answers to this question:

To learn the documentation on regular expressions and create a regular expression by yourself;
To ask someone more experienced to do it for you;

Now, I am happy to introduce the 3rd answer - UiRegex

The backstory

In one project, a rather interesting and complex request came from internal users. Technical support staff needed to set their own validation rules for certain fields for different users. The rules had to be changed frequently and very quickly.

Like any good developer, I naturally started by looking for ready-made solutions. Nothing suitable was found and I had to proceed with a very primitive implementation. On the complex, as usual, there was neither money nor time.

But this problem hooked me very much, and now, finally, I am glad to present to you the fruits of my labor.

Web service

I wanted to make it as simple as possible (for a wider range of people), so that not only programmers, but also people who are far from programming (moderators / administrators) could make their own validation rules.

Here is the interface itself:

As expected, it was difficult for new users to figure out what to do, so I added hidden tooltips.

The first thing that meets you is an "Examples" card and this is done specifically for easier understanding of how it works. I recommend choosing the example closest to your task. Also, you can simply switch between correct and incorrect examples. You can then modify the example you have chosen as you wish. Over time, the list of examples will expand:

Next comes the thing for which it was all started - the generated Regular Expression:

Here I would like to stop a little and tell you more.

At first, I wanted to create a tool that would not restrict users in creating polysyllabic regular expressions and at the same time make the interface as simple as possible. It is possible to create a regex with groups / subgroups, define optional parts (not required), specify specific characters (the rest will have a type determined), specify the type - "any symbol" and block certain characters in a specific part of the regex. You can quite simply create a regular expression not only for a word, but also for a phrase and even a sentence. Generation of regular expressions is available both in Latin and Cyrillic (separately and together). As additional localizations of the interface are added, it is planned to support regular expressions for other writings.

By the way, do not be afraid that the regular expression is always red. This does not symbolize an error, but is done only in order to focus your attention on this extremely important information.

Test value

Here, the entered test value is checked to match the generated regular expression. And it happens “on the fly”. You don't need to press anything. Thus, you can check many options much faster and more conveniently.

If the test value does not match the generated regular expression, a description of the generated rule / regular expression is displayed under the Test input field. Rule description displays as set of chips:

The generated regular expression can have not only required parts, but also optional ones. Red color is required, yellow is optional.

Regex Auto Generator / Builder (UI)

And finally, we got to the last block in order, but not in importance. I personally consider this block to be the core of the entire service. It is here that the Generator receives all the necessary input data, which it subsequently processes and produces a ready-made result. By the way, all logic is implemented only on the client. A web service has no server code at all.

It is extremely important to understand that the machine (not able to read minds) must receive at least some information in order to analyze it and give at least some result. The more correct and concise your examples are, the more correct and concise the result will be. The order of your examples makes absolutely no difference.

Regular expression generates "on the fly", in real time!

Save Regex

Now we can save our regex. Just in case, I want to clarify that it is stored only in the browser's memory (localstorage). When you click on the "Save Regex" button, a dialog window appears where you enter a name for your regular expression.

In fact, as in the case of default examples and our regex, it is not the generated rule that is stored, but just the input data, and every time you switch the custom regex, the Generator logic is triggered. This is very handy when fixing bugs in the logic of the Generator itself. Thus, even the saved rules will work with the latest version of the already corrected Generator.

Update URL

By clicking on the "Update URL" button, the data is saved in the Url parameters. You can copy the URL, send someone a link and the other user will see exactly what you entered earlier. It's pretty convenient.

Technologies

This web service is built on UiWebKit web components and custom elements. There is no custom JS/TS code, only HTML custom elements. If you have questions about technologies and the implementation itself, then feel free to ask them.

I will be glad to receive constructive comments and questions about UiRegex and I will answer them with pleasure. If you notice a bug or have a suggestion for improvement, then please email me to idea@uiregex.com or bug@uiregex.com.

Thanks to all! Enjoy UiRegex, take care of yourself, stay healthy and productive!