Phil Puleo
The Data Explorer Component Library is the culmination of years of UI component creation and refinement in the Data Explorer product. My team extracted the reusable components from our Data Explorer codebase, added examples, detailed usage instructions, and UX guidance, and packaged them into a reusable component library available to all engineering teams at FireEye.
I'm a strong proponent of shared component libraries, especially in enterprise environments where they help to standardize UX and reduce engineering effort. I was very proud of the UI components my team and I had developed for the X15 Enterprise UI and Data Explorer products so in late 2018, I directed a project to extract, generalize, and package these components for broader use. Christine Lam did amazing work leading the engineering effort to create the library and example application. I contributed to the library architecture, components, and UX, and implemented the build and deployment system to an npm repository and AWS S3.
The Data Explorer Component Library is built in Angular using the Angular Library pattern with Angular CLI and Webpack. The library exposes source and compiled styles and fully supports theming. A WCAG 2.0 compliant light and dark theme are included by default. Components can be imported individually so consumers only include what they use.
In addition to the styling system and components, we included an example application with detailed instructions for combining components into more complex patterns like multi-step modals and stateful side navigation. The example application details the interface for each component and provides sample data and working examples to experiment with.
Credits
- UI/UX: Christine Lam, Phil Puleo, Sebastian Toomey
- Engineering: Ben Stone, Bharat Jain, Christine Lam, Narcisse Noumegni, Phil Puleo