JSFoo: round the year submissions

React hooks are a super exciting feature, but considering how new it is, examples on how to use it to make the behaviour “reusable” within and across apps are still emerging.

This talk, which combines one of the most exciting developments in building modern apps for React developers - GraphQL subscriptions, with one of the most exciting new react APIs - React Hooks, would be a very real-world and practical use-case to discuss.

There are two things in particular we need to focus on for buildng applications that contain feeds (lists) that update in realtime.

One, as the realtime feed updates, we need to keep track of the new data that we are adding to the existing feed. For example, we might highlight new notifications that have appeared in a notification feed till the user “sees” them.

Second, ensuring that we have not missed any events. Using GraphQL subscriptions to power the realtime feed might sound ideal, but in real-world scenarios, we need to deal with the missing events. What if the app did not receive a GraphQL subscription event because of a network error?

Building a solution that addresses both of these issues is painful. Even more painful is having to build this solution again and again.

In this talk, we will take a look at how we can use React hooks to capture this behaviour addressing these two points and make it reusable so that we can build multiple realtime feed components in the app, or across apps very easily.

Outline

• Small intro to React hooks and GraphQL Subscriptions
• Typical patterns in building realtime feeds - lists that updates in response to events from the backend
• Issues with the “traditional” way of building these components
• Novel architecture using GraphQL Subscriptions and React hooks
• Small live-demo towards the end highlighting concepts put forward in the talk

Speaker bio

Shahidh is an engineer at Hasura and maintains the open-source Hasura GraphQL Engine. A design engineer by training, he is a self-taught fullstack polyglot developer whose interests span GraphQL, Kubernetes and Serverless architectures. If not in front of his laptop, he is typically found in the kitchen, mostly making delicious Biriyani.

Links

• Twitter: https://twitter.com/shahidh_k
• GitHub: https://github.com/shahidhk
• Presenting Architecture of scalable and resilient apps using GraphQL and Serverless at JSFoo 2018, Bangalore: https://www.youtube.com/watch?v=22xPS_hXSlo

Slides

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