THE GOLDMAN SACHS WEB UI TOOLKIT SHARED COMPONENT LIBRARY
The Web UI Toolkit Component Library provides a framework for exchange of reusable user interface assets among application development teams.
The Web UI Toolkit, built by the firm’s User Experience (UX) team, provides a foundation for quickly and efficiently producing a cohesive, branded user experience across the firm’s responsive web-based applications on desktop, tablet or smartphone. Nearly 1,000 applications have been built with the toolkit since it was released internally one year ago. To continue with the pace of innovation, the firm’s UX team looked at creating a new platform to engage the broader Goldman Sachs technical community.
This technical community was essential in growing the platform, helping shape patterns of interaction, design and code. Project teams within the engineering organization had started to create custom user experience implementations to solve their business needs, and emerging interaction patterns and business components were available to share. However, there was no scalable platform to efficiently share the code and assets for these components.
To fulfill this need, the UX team created the Web UI Toolkit Component Library, an open platform that allows contributions from anyone in Goldman Sachs Engineering.
The new shared Component Library allows teams to consistently document their components, share code and present working examples. Consumers include designers, developers, business analysts and project managers who can explore the library where components are tagged and organized into categories.
Select categories, like Data Visualization, don’t merely provide an array of components, but also describe usability best practices to match user needs and effectively communicate quantitative information.
The Web UI Toolkit is framework agnostic, but the Component Library gives users the ability to contribute or reuse components compatible with their framework of choice – be it AngularJS, EmberJS, and ReactJS. Combining industry best practices for front-end development with Goldman Sachs SDLC has streamlined contribution and consumption of components.
For example, markdown is used to document components and npm packages to publish and share code. Npm’s package.json structure was extended to encompass additional metadata for the Component Library, while ensuring that the manifest remained fully compatible with the existing npm ecosystem. All component documentation is encapsulated within the npm package published to both the Goldman CDN and internal npm repository, enabling developers to integrate components in either way.
Ultimately, engineers creatively reuse new components within their applications and contribute future components to enrich the growing library. The result is an ever-improving and cohesive end-user experience for the products we build.