ReactFoo Delhi

ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Loading…

Shivratna Kumar

@kumarshivratna

Component Library for React Components

Submitted Jul 16, 2019

Reusable components are a great way to build a performant and consistent UI for the applications, without having to reinvent the wheel. A common problem starts when we have multiple teams working on multiple projects, which results into same components sitting in different repos. A common question is, what’s the best way to construct and manage these components.

I would like to share a success story of building a React Component Library(Orion) for our entire organisation and using the same for all the products that we have.

Outline

The talk would cover the following points :-

1. Problem Statement (Why ?)

  • What kind of issues were we facing with the conventional approach of having components at the product/project level?
  • What did motivate us to create a component library and use it across products.
  • Different user experience in different product, lesser communication between different teams, different teams fighting the same battle at the same time.
  • The challenges that we faced during the entire process and how did we overcome those?
  • Which component should be part of the library and which one should not?
  • How to maintain the versioning of the library in an efficient manner?
  • Level of customization that could be provided while adhering to having a common UX.

2. Components styling

  • How did we make sure components are isolated and can be used without messing up with styles of the consumer

3. Versioning of the library

  • Which approaches did we consider for the versioning, also the pros and cons for those.

4. Documentation and Changelogs

  • How are we maintaining the documentation of all the components?
  • How do we handle the changelogs between different versions of the library?

5. What did we gain out of it?

  • Unified user experience across product.
  • 3 times faster development speed.
  • Better maintainability
  • Better communication between teams.
  • Standardisation of the tech stack.

Will also present the look and feel of all three different products before and after using this library through screenshots. And also the stats and figures that we gained in terms of faster development ana maintainablity.

Speaker bio

An open source enthusiast with 6 years of industry expierence in front end engineering. Currently working as Senior Software engineer with Druva Data Solutions Pvt Ltd.

Slides

https://docs.google.com/presentation/d/13P_W6_jYIBSWLZ4xFmuCJ8zEWc_x2t9Bi24KRBnqbJw/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hybrid access (members only)

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more