Angular vs. React (Part 1): style abstraction and encapsulation
Comparing React and Angular style abstraction capability.
Introduction
This is the first post in a series of articles comparing some important techniques in components creation in Angular and React. The full introduction to the series is here.
In this article, we compare how we can encapsulate and abstract style in dedicated components. We will do that in three steps:
- First, we present our case study.
- Second, we resolve the problem using Angular
- Third , we resolve the problem using React.
Before starting, let’s start first with answering the question: Why we are worried about the application of styling encapsulation?
Why do we need style abstraction and encapsulation?
In a real application containing hundreds to thousands of components, it’s a best practice to encapsulate style in a limited set of components and don’t leak it through all the application’s components. This would at least provide the following qualities:
- Ensure coherence between different parts of the application.
- Simplify development and avoid copy/past.
- Reduce the bundle size by removing duplication and reducing code size.
- Simplify changing style that affects the whole application.
Let’s move on now to the case study.
Case study
Suppose we are building an application showing dozens of lists. To show this lists we use bootstrap list group classes.
The following is an example of a direct utilization of bootstrap.
The result is as shown:
In a real app we avoid direct use; however, we prefer defining an abstract component that encapsulates the style classes.
We need two components:
- unordered-list
- list-item
Let’s try it with Angular.
Angular version
First, let’s create the component representing the unordered list. The UnordredListComponent encapsulates the bootstrap list-group class.
Then, we have to create a component which encapsulates the list-group-item class.
Let’s now use our two components to implement our use case:
If we test our code, we will get this printing on the screen:
What happened then?!!
If we take a look at the bootstrap source here, we will see that the list-group-item styling depends on child position. The first and the last items have a different border-radius compared with other children. And if we consider the rendered tags, we will see that introducing components changed the DOM structure while bringing side effects on style.
To fix that, we need to move the list-group-class from li element to list-item element. To do it, we use host class binding.
In this case, the problem is easy to be fixed but in other cases, it may be more complicated.
Despite the presented Angular limitation, we should note that adding component element to the DOM is suitable with the web components specification.
Now let’s do the same things with React.
React version
In this section, we will go through the same steps as the Angular version.
The first component, UnorderedList, is a functional one:
The second component, Item, is also functional one:
With our components, we just encapsulated the code but nothing more. The rendered result will be identical to the version that doesn’t contain any component.
To see the components structure, we should install the React Developer Tools.
Conclusion
It’s important to encapsulate styling in abstract components rather than spreading it through all the application. From this perspective, React is more agile than Angular:
- Angular: we can easily refactor and create components, but we should be careful to style bugs and regressions. The regressions can be fixed but sometimes it’s not that easy.
- React: we can also refactor easily. But, we just have to move the code (or put it) in components and nothing would change. The style of application is completely preserved.
