Search
Visualization
Visualization
Libraries for showing data sets in a visually informative manner
Data Grids
Data Grids
Specialized powerful grids for displaying large data sets with live data
Cards
Cards
A visual way of communicating a burst of information
Progress Indicators
Progress Indicators
Real-time feedback on the status of an action or task
Wizard
Wizard
A sequence of steps that guide a person through a task
Social
Social
Instant messaging and chat for content sharing and real-time collaboration

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.