Scott Spence

Posted on Nov 7, 2019 • Originally published at scottspence.com on Nov 7, 2019

React Advanced - London 2019

#react

React Advanced London going deep!

Here’s my recollection of my attendance at React Advanced London 2019 supported with videos from the event.

Ken Wheeler - React Performance

Ken’s keynote didn’t disappoint! Ken talks about how performance fixes aren’t prescriptive and it’s more like a puzzle to figure out.

To help with this he prescribed the IMDOPE system!

IMDOPE System

I dentify that a problem exists
M easure your timings
D evelop a plan
O pen dev tools
P lay around until its better
E njoy newly performant app

Ken detailed an animation running at 60 frames per second and how that appears on the performance tab.

The user Timings API (which I’ve never heard of) lets you define precise performance marking that you can name and display in dev tools.

Example:

performance.mark('mainthread-start')
# do expensive things for performance
performance.mark('mainthread-stop')
performance.measure('mainthread', 'mainthread-start', 'mainthread-stop')

React does not control renders by default, very often problems relating to performance are related to unnecessary renders.

React is generally not great when you have a lot of components rendering and re-rendering at the same time (cough React Memo!)

The React dev tools profiler got a mention and there was a demo of how react will re-render all the things if you have many components in a view using the React dev tools profiler.

There was an amusing part where when trying to demo the useCallbackReact API where Ken missed out the second argument and had to consult the React docs to clarify.

“as developers almost everything we do is building elaborate lists of shit” - Ken Wheeler

List should be virtualized, check out Brian Vaughn’s React Window orReact Virtualized he went on to render lists with 10k plus items inthere and demoed the shoddy performance on a rendered list then withreact window.

Web Workers

A particularly interesting section for me (because I didn’t know it was a thing), with web workers you can take expensive tasks off of the main thread.

There are some downsides to this relating to serialization though.

WASM

He finished up with an auto tune example made with Rust and a Google audio worklet to process a stream of audio to do the Daft Punk “one more time” vocoder example! Dope!

Sean Wang - React (with hooks) from scratch

Bonkers talk from Sean where he recreated React with Hooks and ReactConcurrency (Fibre) in a CodeSandbox.io session.

The talk was a sequel to a previous talk on React hooks from scratchin 29 lines. He started with “we’re going to re-create concurrent React in 130 lines of code!“.

At blazing fast speed he covered many concepts, a lot I was unfamiliar with relating to React, topics covered:

React Fiber
“Rendering”
Linked List Traversal
Reconciliation vs Commit
useState hook
Work loop
Suspense

First, the POJO! (Plain Old JavaScript Object):

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
};

Then went on to define what a fiber was, which is an extension on the POJO:

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
  dom: domNode,
  parent: parentFiber,
  child: childFiber,
  sibling: null,
  alternate: currentFiber,
  effectTag: PLACEMENT,
  hooks: [],
};

I’ll be honest, the speed at which Sean went, although very concise was quite though to follow at times.

He covered all the main sections along with code examples. TL;DR suspense with time slicing is here.

The only dependency used in the code was Babel with this fetch example where the we’re using state and reading from a resource which suspends (or caches) as needed.

Vojtech Miksu - What a Drag

Vojtech (Uber) goes through the history lesson about drag and drop and the complexities that come with it.

He details the options available and why they implemented their ownReact Movable Accessible drag and drop project.

Here’s the same talk from RSCONF 2019:

Daniel Irvine - Don’t Let Your Unit Tests Slow You Down

Six ideas that can help improve your testing.

Idea 1:

Always follow Arrange Act Assert, get the variables in place,render, expected result.

Keep tests simple

Idea 2:

Test the lifecycle of your components.

Idea 3:

Be aware of tests surface areas, good test pinpoint errors.

Idea 4:

Make a mess, then refactor.

Idea 5:

Get out of React components at every opportunity. Testing simple functions, simple, React component, not so simple to test.

Idea 6:

Write your own test library! 😱

It will help you understand the DOM better and further your learning!!!

Library’s lock you into their way of testing things.

Main takeaway for me from this is:

No tests are better than bad tests!

After this talk I was off to the React native hall to go see some of the lightening talks as I knew one of the speakers.

Dave Nicholas - Functions vs Classes

He discussed the migration from classes over to functional components at Tesco.

Jamie Barton - Teaching and Sharing Awesome Content 101

A non technical talk about teaching what you have learned as someone will benefit from it.

That can be in the form of ANYTHING. It wasn’t quite as memorable asKen’s IMDOPE system but it was the message was what was important.

Jamie went on to talk about how the community can benefit from any kind of sharing.

YouTube video or video series
Tutorials
Hackathons, hosting or organising
Indie Hackers, posting milestones
Guides

Something that resonated with me was the quite:

“Write the guide you needed as a developer when trying to do this.”

I have been doing this for a long time myself now and it’s something I believe in a lot.

Lunch

Siddharth Kshetrapal - Design Systems Design System

Sid gave a good overview of making design systems. Or designing design systems.

“When I started laying out a system last year I would just call them gray, gray darker and gray darkest.”

Basically there always a colour that’s not on there.

Then he came out with this gem!

const theme = {
  colours: {
    grays: {
      100: '#fff9f9'
      200: '#e6e6e6'
      300: '#999999'
      400: '#757575'
      500: '#242424'
      700: '#151515'
      900: '#111111'
    }
  }
}

So you can add in more colours if you need them, add a 150, or add a600 here.

Sid then went on to talks about how awesome styled-components was and some nice touches for that:

import styled from 'styled-components';

const FormLabel = styled.label(
  props => `
  color: ${props.theme.colors.text.subtle}
  font-size: ${props.theme.fontSizes[2]}
`
);

Looks pretty verbose so you could use @styled-system/css to reduce that:

import styled from 'styled-components';
import css from '@styled-system/css';

const FormLabel = styled.label(
  css({
    color: 'text.subtle',
    fontSize: 2,
  })
);