ReactFoo Delhi
ReactFoo For members

ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Loading…

After a successful edition in Delhi in 2018, we are back with the 2019 edition of ReactFoo Delhi.

ReactFoo Delhi features talks and discussions on:

  1. Redux and state management
  2. Performance improvements with React
  3. Modernizing legacy architecture with React
  4. Why choose React Native
  5. GraphQL and front-end development

Product and front-end engineers from Atlassian, Walmart.com, Zomato, Microsoft, HackerRank, Mindtickle and Appbase.io will share insights from practical experiences.

Who should attend:

  1. Front-end engineers
  2. Product engineers
  3. Cross-platform mobile developers

Why attend ReactFoo Delhi:

  1. Learn from and network with peers from the industry.
  2. Improve developer productivity of your front-end teams.
  3. Make your web applications faster and performant.

Date and schedule

16 November 2019
https://hasgeek.com/reactfoo/2019-delhi/schedule

Venue:

C D Deshmukh auditorium, India International Centre (IIC) Main, 40 Max Mueller Marg, Lodhi Gardens, Lodhi Estate, New Delhi - 110003.

##Contact details:
For information about the event, sponsorships, bulk ticket purchases and partnerships, write to info@hasgeek.com or call 7676332020.


Sponsors:

Click here to view the Sponsorship Deck.

Email us sales@hasgeek.com for bulk ticket purchases, and any queries on the sponsorship.


ReactFoo Delhi 2019 sponsors:


#Exhibition Sponsor

Sapient

#Bronze Sponsors

Shuttl

#Community Sponsor

GO-JEK MindTickle
Atlassian
HackerRank Walmart

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

Ramakrishna

@rramaa

Rethinking frontend development using GraphQL

Submitted Aug 14, 2019

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.

Slides

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

Comments

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

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

{{ errorMsg }}

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

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