Leveraging the power of component-based development for front-end components: Insights from a study of react applications

Abstract

Classic design patterns, architectural styles, and design principles have been introduced and enhanced in Web front-end development. Recently, component-based architecture, successfully introduced in React.js, has tended to replace MVC and other MVpatterns in front-end frameworks. However, we still know little about design strategies for leveraging the power of component-based development. We conducted a study to explore the use of components in React-based applications from two levels. Three private repositories were analyzed to get practical insights into the nature, limitations and potentials of CBD for front-end implementations. Our research started with an aerial view, where we examined the dependency, connectivity, and overall of components. Quite different architectural and programming styles were observed; these can be easily attributed to the lack of front-end component design paradigms. Meanwhile, all cases exhibit similar component connectivity and dependency patterns, which enlighten the study to categorize them further. Next, the study zoomed in on the architectural elements level, where we classified front-end components into four categories. Our observations suggest that design components on the architectural elements level may dramatically boost the power of component-based front-end development.