Impact of React component libraries on developer experience - An empirical study on component libraries' styling approaches

Abstract

Over the past three decades, web design has transitioned from simple static pages to complex, interactive applications. Modern web development relies heavily on JavaScript frameworks and reusable components, often utilizing third-party, pre-styled component libraries. Customizing the styles - which are typically implemented with CSS (Cascading Style Sheets) - of such libraries to meet specific design requirements is a common task. This customization creates a need for effective styling solutions that enhance developer experience and maintainability.

Despite its widespread use in web development, CSS remains under-researched, particularly in the context of how it affects developers' day-to-day work with component libraries. As technologies continue to evolve, understanding and improving the developer experience becomes increasingly crucial, as it can positively impact software development outcomes.

This thesis seeks to understand how React component libraries' theming approaches impact customization, particularly ease of implementation, reusability of styles, and flexibility to accommodate various design requirements. Furthermore, the study investigates how the aforementioned factors and the library's documentation support or hinder the developer's work. These factors were investigated by porting the same application to four pre-styled component libraries. The implementation process, methods used, and challenges encountered were documented and analyzed.

As a result, the study found that meeting the design requirements was possible with all compared libraries: Ant Design, Chakra UI, shadcn/ui, and Mantine. However, the ease, intuitiveness, and maintainability of required solutions varied. Especially as one of the libraries, Ant Design, was tightly coupled with a specific design system. Color customization and dark and light modes were frequent sources of confusion. Overall, the libraries offered a positive experience and allowed the desired design to be reached without resorting to style hacks. Still, all the libraries would benefit from improved documentation, namely more detailed examples and explanations of the customization options.

Viimeisten kolmen vuosikymmenen aikana web-suunnittelu on siirtynyt yksinkertaisista staattisista sivuista monimutkaisiin, interaktiivisiin sovelluksiin. Moderni web-kehitys nojaa vahvasti JavaScript-kehyksiin ja uudelleenkäytettäviin komponentteihin hyödyntäen usein valmiiksi tyyliteltyjä kolmannen osapuolen komponenttikirjastoja. Usein näiden kirjastojen tyylejä, jotka toteutetaan yleensä CSS-tyylikielellä (Cascading Style Sheets), on tarpeen muokata tyylivaatimusten mukaisiksi. Tämä luo tarpeen tehokkaille tyyliratkaisuille, jotka parantavat kehittäjäkokemusta ja ylläpidettävyyttä.

Huolimatta sen keskeisestä roolista web-kehityksessä, CSS:ää tutkitaan edelleen vähän - etenkään sen vaikutusta kehittäjien päivittäiseen työhön komponenttikirjastojen parissa. Teknologioiden kehittyessä jatkuvasti on yhä tärkeäämpää ymmärtää ja parantaa kehittäjäkokemustä, sillä se voi vaikuttaa myönteisesti ohjelmistokehityksen lopputulokseen.

Tämä diplomityö pyrki selvittämään, miten React-komponenttikirjastojen tyylittelytavat vaikuttavat tyylien mukauttamiseen, erityisesti toteutuksen helppouteen, tyylien uudelleenkäytettävyyteen ja kykyyn mukautua erilaisiin suunnitteluvaatimuksiin. Lisäksi tutkimuksessa tarkastellaan sitä, miten edellä mainitut tekijät ja kirjaston dokumentaatio tukevat tai haittaavat kehittäjän työtä. Näitä tekijöitä tutkittiin muuntamalla sama sovellus käyttämään neljää valmiiksi tyyliteltyä komponenttikirjastoa. Toteutusprosessi, käytetyt menetelmät ja haasteet dokumentoitiin ja analysoitiin.

Tutkimuksen tuloksena havaittiin, että suunnitteluvaatimusten täyttäminen oli mahdollista kaikilla vertailluilla kirjastoilla: Ant Design, Chakra UI, shadcn/ui ja Mantine. Kuitenkin tarvittavien ratkaisujen helppous, intuitiivisuus ja ylläpidettävyys vaihtelivat. Erityisesti Ant Design, oli tiukasti sidottu tiettyyn suunnittelujärjestelmään (design system). Värien mukauttaminen sekä tumman ja vaalean tilan toteuttaminen aiheuttivat usein hämmennystä. Kokonaisuudessaan kirjastot tarjosivat kuitenkin positiivisen kehittäjäkokemuksen ja mahdollistivat halutun ulkoasun saavuttamisen ilman tyylikikkoja. Kaikki kirjastot hyötyisivät kuitenkin paremmasta dokumentaatiosta, erityisesti mukautusvaihtoehtojen yksityiskohtaisemmista kuvauksista ja esimerkeistä.