React London Meetup - June 2017

This month’s meet-up was at Skillsmatter (near Red Badger’s HQ); there was plenty of pizza, beer and React geekery. Oh, there was even a ping-pong table, some people decided to play as they were waiting for the presentations to kick-off.

Code Your Future

To celebrate World Refugee Day, Amit Shah opened the talks by introducing his organisation Code Your Future; a unique movement which provides software engineering (mainly Web) training for refugees. 
 
This talk was inspiring mainly because it has raised the awareness of refugees and the many difficulties they face when they arrive in the UK for a brighter future. Specifically, Amit explained that refugees coming to the UK usually find that their existing skills are not applicable and as a result have trouble finding jobs. Through the training that is provided by Code Your Future, they get up to speed with the necessary knowledge to then pursue a career in web development; with a focus on finding a job for non-profit organisations. 

To celebrate this year's World Refugee Day, we promoted the excellent work of Code Your Future in a blog post by Germán Bencci. You can read it here.

You can find out more about them at codeyourfuture.co.

The Middle of the Pyramid

Thomas Hudspith-Tatham from Sky

In this first technical talk, Tom briefly described the popular TestPyramid and explained that based on his experience, the test pyramid priorities have somewhat shifted. Most companies now have two layers, UI and Integration (~33%) as one top layer and Unit-only testing as bottom and largest (~67%) part of the test pyramid. The main reason for this is that in general unit tests come with some advantages; they are easy to write, fast, and powerful. Hence, developers tend to write more unit tests. 
 
While unit tests are good for determining the stability of the codebase, they are not a great way to control the actual stability of the product and therefore, this raises the need for incorporating UI and Integration tests. Generally, these kinds of tests take the form of browser tests which although are good for testing the actual product, they can very flaky and expensive to write.
 
Based on the above, Tom showed how we can leverage the “React way” and create app component wrappers that can be used for our integration tests. For instance, routing integration can be tested here, something which you wouldn’t necessarily have covered in unit tests. Another example is testing the data analytics integration. But arguably, the most important type of test that we can cover with this technique is the full customer journey for different scenarios.

These tests are cheap, powerful and valuable and allow to nicely separate the tests in the three original categories of the test pyramid:

  1. Unit
  2. Integration
  3. UI

More information for integration tests can be found here: Integration testing: You keep using that word, I do not think it means what you think it means

Using the facade pattern in JSX

Olena Sovyn from Webflow

Later on Olena from Webflow joined us for a lightning talk, exploring the usage of the facade pattern in React. This is not a new pattern but rather one which is often overlooked.  
 
Olena first introduced the problem of building composite interfaces out of existing components with the ever changing client requirements. To help eliminate some of the friction in such situations, Olena suggested grouping components with editable configurations and then tweaking the smaller components that help forming the group. If there is ever a need, new components can also be added to the group. 
 
This is essentially the very basic form of composable components: 

  1. Build small and reusable components.
  2. Combine the components into a bigger component to create new, more complex component. 

Olena’s main suggestion was to really allow this bigger component to be somewhat configurable and hide that complexity behind a “facade”.


Building user interfaces without React

Luke Sheard from J.P.Morgan

Next was Luke from J.P.Morgan who gave a quick overview of “Building user interfaces without React…. but with React. The essence of the talk was that we can utilise the upcoming “Web Components” browser standard with existing React components and use them with non-React libraries. This can be achieved by simply wrapping them in an HTMLElement! Of course, this approach is not limited to Web Components but also for other web frameworks such as Polymer or Angular. 
 
Luke also demonstrated an example project he made which creates an HTML Element wrapper around a React component by specifying the life-cycle callbacks. Cool stuff!


Converting nested.com to a Single Page Application

Tyler Ferguson from Nested

Finally Tyler Ferguson a software engineer from Nested, demonstrated how to incrementally convert a Ruby on Rails monolithic app into a single page application using React. Tyler showed some of the techniques used to manage risk using runtime feature toggles and how you can enhance performance by taking code splitting further:

  1. Extract vendor bundle libraries and take advantage of browser caching during deployments.
  2. Extract the webpack runtime into its own bundle.
  3. Add cache busters to increase development productivity.

Interested in giving a talk at one of our upcoming meetups?

As we mentioned at the meetup, we are always on a lookout for speakers. So if you are interested, go and submit your proposals here.

Thanks again to our speakers.

A blog article by Stelios KiayiasMartin Hartt and Timothy Stott

Stelios Kiayias

Software Engineer

More from Stelios