Geekly Articles each Day
📜 ⬆️ ⬇️

Component library as a tool to maintain website integrity

Familiar to many front-line pain. The emergence of new elements, duplicating the old functionality. The slightly changed appearance of the radio buttons, the new color of the links, the change of indents on each new page. Usually this problem is aggravated with the arrival of new designers, with the change of the main designer, or in the absence of a designer at all.


As a consequence of the problem: the creation of new pages is spent unnecessarily much time. Lost the integrity of the site. The file of styles and the code grows.


Usually such problems arise during the transition period when the project is already quite large, but the design department has not yet been formed.


What to do?


Being a pragmatic front-end developer, your direct responsibility is to preserve the integrity of the product and prevent the appearance of redundancy. After all, everyone benefits from this:



Such synergy is achieved by following the three principles below.


1. Show all that is
Most often, the designer simply does not know that such a button is already on the email confirmation page due to its inaccessibility. It would be good to present the existing functional elements of the site somewhere in one place. Yes, so as to keep this collection up to date it was as easy as possible. And here comes the library component library. Also known as “styleguide” or “pattern library”. At the moment there is a huge selection of tools for generating the styled guides and many articles have been written on this topic.


Github user and part-time author Jekyll Styleguide David Hand tried to classify existing component library generators. On this page you can see the list of available tools.


2. Keep the component library up to date
Each element of the component library is another use of code that requires efforts to keep it up to date. The temptation to upgrade your stylish components after release is great. But it is better to treat the library of components as documentation, an integral part of the release process.


According to the method of storing components in the stylgide, two types of generators can be distinguished:


1. Components are presented in a style file.


+ Easier to maintain: changed styles, in the same file changed the comment with an example, voila!
- It is inconvenient for large examples, including the lack of illumination and support for IDE


Here is a fairly large list of available generators of this type.


2. Items are stored in separate files.


+ All IDE charms, more freedom in adding and storing examples
- Another file in need of support


Examples of libraries: Fractal , Pattern Lab on Node , Fabricator .


3. Prefer the improvement of current components to the introduction of new
You, as someone who has spent the most time on revitalizing existing components, usually know their list, opportunities and drawbacks. Work with the designer to improve the existing functionality. An example of a dialogue with the designer:
- Hi, look, we already have a similar radio element. Here it is: http: // URLSTILGAYDA / FILLED-RADIOBOX.XTML
- Yes, I know, but it is not suitable for a new page, because it does not have shadows and an explanatory text.
- So the current item is not good enough. Why don't we improve it by adding shadows and an optional explanatory text?
- Indeed, let's do it


At last


I would like to share my experience, which appeared as a result of several years of using the Stylgides: Component Library . Here is an example of its use on the basis of Habr components .
Despite the huge selection of component libraries, the Component Library combines the advantages of many tools:



')

Source: https://habr.com/ru/post/326472/

More articles:


All Articles