Novelties in the frontend development

In the first quarter of 2019, the Nextap frontend team changed their React project template. This move was connected to replacing old libraries newer ones. Our frontend developer Michal Struna talks about what libraries were replaced, what led to us starting using them, and what it is like to work with them.

One of the newly used libraries is the Styled Components library which replaced SASS. Before Styled Components, each component consisted of at least two files – a javascript file and a SASS file. Furthermore, these files needed to be correctly implemented to the rest of the app.

The Styled Components library uses tagged template literal (a way of processing text function chains) for setting styles directly in JavaScript. The styles are written into the template literal which also allows nesting and processing of the javascript code.

A styled component's parameters can be set as for any other React component. If a style's value is a function, up-to-date props of the component fill the respective parameters when the function is called. Props enable dynamic responses and setting relevant styles.

The library itself supports the whole CSS syntax and also some bits of SASS. Complex CSS selectors, nesting, media queries for responsivity, keyframes for animations, pseudo-selectors,...

To reduce the amount of repeated code, styled-components can inherit attributes from other styled-components. If more components have the same group of styles, a theme can be created and applied to all nested components through ThemeProvider. Moreover, prefixes for non-standard CSS attributes are generated automatically. Before Styled Components, a separate package such as postcss-loader had to be used.

A styled component can be rendered in a similar way like other React components with the help of for example the JSX syntax. As a result, Styled Components don't apply styles to the rendered HTML elements themselves, but rather attribute 2 CSS classes to them and then apply the required styles.

The second novelty in use makes work with Store in Redux architecture more efficient. If linking Store to a component is needed, the code often duplicates in several places at once. In the case of computationally demanding operations, for example filtering items from an array by the currently selected tag, filtering from an array happens each time a component's status changes.

This issue is addressed by the Reselect library. It allows creating selectors for data select from Store. Selector contains code which would have to be written manually – such as the filtering items from an array mentioned before. The selector also contains a cache the size of 1. If the last parameters match the previous ones, the array won't be filtered, but instead, the filter from the previous request will be used.

One of the advantages of selectors is the possibility to chain them. Filtering items by tag can be followed by another. This can positively affect the app's smoothness since there are usually many complex data operations happening in the Store. Furthermore, selectors are defined in one place which improves the readability of the code.

The template changes resulted in the removal of 7 npm packages (sass-loader, css-loader, postcss-loader, etc.) and in the addition of only 2 packages (Styled Components and Reselect).

Did our article catch your attention? Did it inspire you at work or do you have anything to ask us? Feel free to contact us at support@nextap.eu.