React London Meetup - February 2018

The February edition of React London brought us to the World Remit offices located between Westminster and Victoria. The sound of drinks and conversation filled the room but noticeably absent was the promised pizza.

Our MC for the night, Xavier Delamotte from Red Badger, calmed the crowd and got the event started by introducing the speakers and topics for the night.

Container Queries In React

Kicking off the evening we had Viktor Hubert from Events Tag to show off his solution to responsive design at the component level.

Up until now, developers have used media queries to build responsive UIs that adapt to the screen size. But when developing with React we want to make our components as reusable as possible. With media queries alone our components can’t detect changes to their size, only the viewport size.

Enter React Container Query, a library that scopes sizing to components instead of viewports, while using media query style syntax. Now our React components can adapt to the size they have available within a page. So if a component is used several times within a page it can be rendered differently depending on where it is placed.

Viktor went through several examples of increased complexity on how to use this library in your React projects.

Following a lively Q&A the pizza made its appearance, to the delight of all in attendance.

Apollo Client: the stuff no-one ever told ya

Attendees now fully fed, the evening turned to our second speaker for the night: Alexey Kureev from Werkspot. A big thanks to React Amsterdam for sending him to our shores, bringing with him some extensive GraphQL/Apollo knowledge.

The slides were a crowd pleaser with beautiful illustrations smattered with the talk content. Alexey did a great job at condensing a topic that he admitted takes up to 40 minutes in it's full version.

Some principles around GraphQL and Apollo were presented to make sure the audience could get the most from the topic. Moving onto the main section of his talk, Alexey explained how by splitting a GraphQL query, he was able to implement an optimistic UI by showing cached content immediately, leading to a faster experience.

During the Q&A section Alexey took a grilling on his implementation but was able to clear up any misunderstandings leaving the audience intrigued by the possibilities learnt tonight.

If you'd like to bag a ticket for React Amsterdam this link will give you 15% off the price (thanks to Alexey & the React Amsterdam for sharing.)

Modelling User Friendly Interfaces

To close out the evening we had Joe Paice from Red Badger sharing his method of aligning a user interface with the underlying data to provide a frustration free user experience.

Joe argues that a user interface (UI) becomes frustrating when the data is misaligned across the following 3 different levels of a UI:

• The User Interaction, which is how the user mutates the UI state.
• The UI state, which holds the latest mutation from user input.
• The remote state, which holds a computed value derived from the UI state.

We align these levels by ensuring that the set of values they can represent are as similar as possible, therefore we avoid introducing any behaviour that will frustrate the user.