Building a Reusable Components Library — Getting Started
By Marios Tsioutsis, Front End Software Engineer
If you work on a large-scale application, eventually, you will find yourself creating the same User Interface (UI) piece (or with slightly different functionality) repeatedly. The best thing you can do is create a library of reusable components. At Light & Wonder in the iGaming division, we call ours the “UI Kit”.
Some of the benefits of a reusable components library are:
- You only need to create each component once by following the “Don’t Repeat Yourself” (DRY) principle and the Single Source of Truth (SSOT) principle;
- You keep the UI consistent and with less bugs;
- Saves you a lot of time; and
- It is easier to scale the application.
But, in order to build such a library, you need to understand the requirements of the application (technologies used, the scale, authentication, different themes, etc.) and communicate the plan with the rest of the team (developers, designers, product owners, and everyone that is involved in the development process).
So here are some things you should think about before creating your own reusable front-end component library:
- Think about more potential use-cases for each component;
- Documenting your components is incredibly important. It makes it easy to onboard new colleagues and ease the development team into comprehending new components;
- It needs an experienced developer to write reusable code;
- Use semantic versioning and update the documentation along with it;
- Always test your components with “Unit and Integration” testing (even “End-to-End” testing if possible);
- Keep the code clean and organized following the separation of concerns principle;
- Compile the code before use. This way people who use your library do not have to worry about the dependencies you used, your code will have a smaller bundle size and the “tree shaking” will take care all the dead code;
- See if you can take advantage of some existing libraries like MUI, Ant Design and Chakra UI; and
- Remember that it needs maintenance. It is not something you make once and it is over — it is more like a garden, you will need to continuously take care of it.
To conclude, you must consider many things before you create a reusable components library including the time and effort needed to maintain such a library, keeping yourself updated on recent technologies and following the separation of concerns principle. However, putting the effort in to developing these libraries is invaluable to application developers. Doing this at Light & Wonder has worked very well for the L&W development team and will remain core focus areas as we continue to build “UI Kit” — L&W iGaming’s library of reusable components, ultimately helping the team to work more effectively.
The opinions expressed in this blog post are strictly those of the author in their personal capacity. They do not purport to reflect the opinions or views of Light & Wonder or of its employees.
WE’RE HIRING
Find out more about life at Light & Wonder and the roles we are looking to fill: https://igaming.lnw.com/careers/
