Using Web Components (Part 2)

As we’ve seen in our part 1 of this series about Web Components (see post), they are not only a highly recommended development tool, but also an immensely powerful and flexible one. These reasons, coupled with its element of reusability, made for a simple and logic decision to include them in our platform.

Part 1 of this series exists as an introduction to the subject, exposing all its potential and showcasing examples. In this part 2, we’ll focus on some of our most common use cases, as well as detailed explanation video with all the necessary steps to implement one example on your web application using our newly published “Masked Input” web component.

(Masked Input Web Component example)

Web Components are primarily used for visual (layout) extensibility purposes. If the need for visually distinct elements occurs, building a web component is the way to obtain the desired results. Further more, by building the new element in the form of a web component, you’re guaranteeing its reusability for future projects. Build once, use  it as many times as needed.

Web Components cover a huge range of solutions, and allow you to make use of virtually any kind of functionality to improve your web application. There are, however, a few examples that are more common in web applications, and in this post we’ll focus on one of the most popular applications:

 

Regular Expressions

 

“A regular expression (regex or regexp for short) is a special text string for describing a search pattern.” – regular-expressions.info

Regular expressions are most commonly used to validate data. A rule, or set of rules, is defined, and then the data is validated against those rules. From country Zip Codes, to emails, IBANs or street addresses, using regular expressions to validate user data guarantees that the information will be, at least, following the correct structure

The following regular expressions are some of the more common use-cases:

(Portugal) Zip Code (source):
^\d{4}(?:[-\s]\d{3})?$ (format: xxxx-xxx)

Email (source):
/^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

IBAN (source):
\b[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?!(?:[ ]?[0-9]){3})(?:[ ]?[0-9]{1,2})?\b

In order to easily apply regular expressions in a project, we’ve developed the “Masked Input” web component,  available for free, on our Community Web Components Github repository. To easily show how you can add a new regular expression validation to your web application, we’ve developed this quick step-by-step demo video:

Feel free to contribute to our Community Web Component GitHub repository with your own Web Components and make sure to keep an eye out for future updates, we’ll keep adding more and more.

We hope you’ve enjoyed this part 2 of “Using Web Components” on our OMNIA Platoform, we’ll surely revisit the topic soon, you can expect a part 3 for this series.