When building a UI Library, it is very important that we are cognizant about the additional complexity we are adding to an existing web project that consumes our package. Our library can add considerable size, in terms of assets and unnecessary JavaScript code. Additional dependencies, like external third party libraries, can also get included in our package accidentally if we are not careful. All of these things can cause havoc in the consuming application. It can make the output build unnecessarily large, causing major slowdowns when the app is running in an environment with a poor internet connection. The extra JavaScript could also create performance problems as the browser takes a long time to parse and execute (possibly unnecessary) extra code. Avoid these problems by breaking your UI library components into separate modules.
Let me tell you a story. I once worked on a project where we needed to create a calendar component for a UI library used in a web application for a financial organization. The calendar component required for the end-user to be able to easily select a start and end date in a calendar overlay shown on the screen after mouse click activation. The calendar overlay would then capture the users’ mouse clicks to determine the selected day for the beginning and end dates. We decided to leverage the Moment.js library to manage dates within the calendar component. When we packaged the UI Library, we included every single component and style that got implemented. In addition, all third party libraries, like Moment.js, also got included in the compressed package that was consumed by downstream web applications.
Other team members started reporting that the apps being created using the UI library is not performant and taking way too much time to load. After researching the issues, we determined that the problem was our library. It was too big. The components were not broken up into independent modules. Whenever a single component got pulled into the application, even something as simple as a dropdown component, ALL the library components plus dependencies got pulled and built into the developed web application. Our library added too much weight and was causing the application to take a long time to render on start.
In summary, keep your UI libraries as lean and modular as possible. Think of the modularity of your UI library not only from the perspective of the components but also in how the code is consumed. Build your UI library components as separate modules and avoid adding complexity to projects that consume your awesome toolkit.
