ReactFoo Delhi

Increase developer efficiency, increase performance and discover pure component architecture using GraphQL. Using directives, enabling/disabling features with simple flags and reactive updates.

Outline

Problems faced using REST and their solutions

1. Mocking: During development the most common problem faced is mocking. Generally frontend(app/web or both) is blocked on backend due to unstable apis or breach of contract with the backend. Mocking is implemented in frontend to overcome this problem but different implementation is needed in both app and web to achieve mocking. Still there is a limitation that you have to mock entire APIs. With GraphQL you can achieve seamless mocking for both app and web and its as simple as writing “@mock”
2. Backend-Frontend Coupling: Generally frontend objects are coupled with backend schema. If the schema changes, the api structure changes, hence the frontend changes unnecessarily. With GraphQL, things become decoupled between frontend and backend. GraphQL defines a schema which is consumed by the frontend. The objects are resolved using resolvers written in the server. When the schema changes, only the resolvers change, but there is no need for the schema to change.
3. The eternal and relentless fight between frontend demands and backend supplies: Multiple and sometimes serial calls are needed to render a page in frontend and these calls over internet take a lot of time. GraphQL combines these calls returns a neat object to frontend
4. Overfetching: Read only the data that you require.
5. Breach of contract: How many times have you sent a build and the API calls failed as some you made a typo in the request. GraphQL locks the schema and provides static type checking. Eslint GraphQL plugin validates the schema for you. Autocomplete in queries is also possible by using relevant plugins.

True Componentization of React Components

1. Things needed to render a component? HTML, style(CSS) and data
2. React brought in the component pattern and HTML.
3. CSS in JS brought in style componentization. The component now owns the style.
4. What about data? Component defines the data it requires to render using fragments. A wrapper translates the data into a GraphQL query and supplies the data to the component

Feature Enablement

1. We follow trunk based development.
2. So lots of features are in the master branch and they all get pushed to staging/production etc.
3. Someway needed to disable the features.
4. Disabled features should also not bring their data. Possible easily with the “@skip” directive

Declarative way of implementing things

1. Deferring an object
2. Skipping an object
3. Declarative queries and mutations

Requirements

Basic understanding of GraphQL

Speaker bio

I am a JavaScript enthusiast with 3 years experience in front-end development. Currently working as a front-end developer with Mindtickle, Pune.

Links

• https://github.com/rramaa
• https://medium.com/@rramaa
• https://www.linkedin.com/in/rramakrishnaa

Slides

https://docs.google.com/presentation/d/1RfIo21wYmdP87mwYmzWH0te4RPVclvJmvgX6VjWzml0/edit?usp=sharing