ReactFoo Delhi

We wanted to create a platform where the developers can create dashboards for multiple purposes like operations, Finance portals and configuration management keeping following things in mind.

1. Take minimum time for a developer to create a page.
2. Forms and components should have a uniform design.
3. Failed deployments shouldn’t be an obstacle for the whole organisation, i.e. each component should be easily separatable as per business logic.

Keeping the above problem statements in mind we divided our project into following parts:

1. Development effort: Most of our dashboards are form based. So we moved to our own custom JSON based forms such that its extremely easy to add / modify Input types which includes regular elements like text, number, selects, radio, checkbox based input types to custom location search, city selector and file uploads.
2. Uniformity: We created a separate UI toolkit package for all our inputs, UI components and JSON Form, which can be installed as a separate package for different dashboards
3. Removing interdependency: We did two things to resolve this - created a boilerplate starter pack for dashboard with up to date packages and created Micro-services for all the dashboards.

This talk will cover:

1. Why we didn’t use Redux Forms and created our own JSON based Forms
2. Building UI Toolkit, modules and styleguide
3. Creating easy to maintain Boilerplates using Webpack + React + React-Refetch + React Router
4. Docker + Deployment strategy

Outline

The talk will follow the below structure.
1 - Briefly explaining the problem statement
2 - How to create a JSON based Form schema using React.

• Complexities involved

• Immutability

• Creating / updating schema paths for each input element

• Handling state changes

• Performance impact in large forms

• Features and how to build:

  • Conditional inputs in form

  • Array based inputs (complexity - optimizing search and update of relevant schema paths and values)

  • Object based inputs

  • Adding new custom form elements

  • Validations and test cases

3 - Building UI toolkit and common-module:

• Explanation about the atoms/molecules/organisms structure

• Using Lerna to build each component as a separate package and maintain its version inside common repository

• Creating styleguide using Styleguidist

4 - Boilerplate:

• Why we chose React-Refetch over Redux

• JS + CSS component based chunking

• React Loadable

• Deployment strategy

Requirements

Knowledge about React and Webpack basics.
I will be covering in brief about the Webpack dev and build configurations. The talk will be extemely useful if attendees could give a overview about:

• React Refetch by Heroku

• Webpack bundling

• Concept of immutability - https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd

Speaker bio

Mayank Kumar is one of the founding Engineers at UrbanClap and he’s currently managing the Customer-Web since last 3 years. Prior to UrbanClap, Mayank was also a Google Summer of Code Intern for Mozilla.

Links

• JSLovers 2018 talk - https://www.meetup.com/jslovers/events/247013092
• LinkedIn - https://www.linkedin.com/in/mayanktg