IUI Angular Component Library

During my time at InkSoft, we had tried a number of CSS frameworks and pattern libraries for our apps. We did not have the time it would take to build one from scratch so we tried to find one that we could easily customize and maintain, make upgrades, and played nice with Angular. Our first time around we settled on Bootstrap because of its popularity, adoption rate, all of our developers were already familiar with it, and there was a library already out there that integrated with Angular 2 components. This worked well at first because Bootstrap is easy enough to customize yourself and a lot of the UI components were pre built for us. We made the mistake of going with Bootstrap v.4 when it was in beta. The Bootstrap team ended up making a lot of breaking changes as time went on and if we wanted to upgrade versions, it would have required A LOT of refactoring on our part. We had built our entire Checkout experience in Bootstrap 4.x.

We reached a point where the Angular Material library was mature and stable enough, had enough components we wanted, and our stakeholders were finding Material Design very attractive. We made a plan to switch over to Angular Material, use only the essentials out of the Foundation library such as the Flex grid, and our Design team was going to fully design a UI pattern library from scratch.

InkSoft’s rockstar Design team put their heads down and created high fidelity designs of all the UI elements that we used throughout our app. Everything from buttons, typography, dialogs, date picker, and sliders were considered. They designed everything in Sketch and then imported all those designs into Zeplin which was a game changer for our productivity and communication between designers and developers. Once Design had finished everything, the developers got to work on integrating Angular Material, Foundation’s essential tool kit, and customizing all the Material components to look like ours.

Another challenge that we solved was building the IUI Component Library in a consumable easy to install package. We wanted to do it right, using semantic versioning and install it via npm. To build the Angular Component library we used a very handy tool called Ng-Packaged that compiles your code for you and publishes it to npm. The IUI component library played a crucial role in allowing InkSoft’s offshore development team in India to build out new features and stay consistent with the rest of our products.