Schedule

An overview of the past, present and the future of CSS-in-JS.

When the design systems team at GitHub implemented their colour system in 2017 they were working with Sass, trying to wrangle thousands of disconnected colour values into something more manageable to use. Now they're revisiting colour again, but this time with new tools, new customer goals, and more experience. In the age of dark mode, can what they've learned from CSS-in-JS and component APIs help them in their approach to color themeability? In this talk Diana covers lessons in color systems, theming APIs, and a bit of color theory along the way.

BBC News Labs explore, prototype and incubate new ways to tell stories, reach audiences and create cutting edge journalism. James will demonstrate how his team made transcribing interviews - something journalists spend hours every day doing - faster, easier, and data-rich by creating an interactive, time-encoded text editor with Draft.js. By making it an open-source component library, BBC managed to add this functionality and productivity to many other tools, both in the BBC and outside - empowering other newsrooms to innovate in their own spaces.

If the new React Context API and Suspense killed Redux (they didn't), surely Hooks kill the need for a form library, right? Well, not exactly. Managing form state is more than just holding your current values in state; it's about sync and async validation errors, and much more! But that doesn't mean that Hooks are irrelevant to the situation. Hooks make building forms in React easier than ever before.

`react-beautiful-dnd` (`rbd`) is a successful open source project that aims to provide performant, beautiful and accessible drag and drop. In this talk, Alex will break down how the various pieces of `rbd` come together to deliver a delightful user experience. He hopes to empower people with knowledge of some powerful and creative techniques that can be applied in different problem spaces.

Selena and Michael take you on a roller coaster journey of getting into and getting the most out of pair programming. Live on stage trying to deliver a feature whilst coding in React, they'll be acting out the highs and lows, do's and don'ts of collaboration through pair programming. Two keyboards, one computer, writing code and reaching maximum capacity. There will be tears and laughter and everyone will come away with a solid set of steps to get started in, or take your pairing to the next level.

We're often told it's impossible to create React pages that load quickly. Are React developers really doomed to a life of embarrassing Lighthouse scores? Working with the ABC, Josh and his team were tasked with rebuilding their sites using React. They knew slow page loads were not an option for news, entertainment and information. This talk charts the ABC's journey and how page load speed is measured, the trade-offs between different app architectures, and finally the APIs and tools browsers give you to speed your sites up.

Designers and engineers: we have different experiences, different skills, different mindsets, and yet bridging these differences effectively, and making the most of this inherent diversity is the secret sauce in making good software.

When designing asynchronous operations in a React application (such as data fetching), it's easy to overlook the confusing and inconsistent user experience it can result in. The following issues can arise:

• Managing promise states manually can be harmful to the user's experience.
• Visibly reloading data that has already been seen by the user.
• Loading spinners can appear for microseconds before resolving content.

In an ever-present battle for our user's attention, details matter. Any combination of the above issues can lead to quite a jarring experience, so what can we do about it?

The path to senior, cross disciplinary, technical leadership can be difficult to navigate as a front end specialist. Will my skills be valued? Will I be considered “technical enough”? Do senior leaders understand my technical background? The work you do as a front end developer is already building crucial skills that will equip you for your first technical leadership role and beyond. This talk will help you to recognise and foster the skills that will launch the next phase of your career and make you a more effective developer today.

Often when building a design system we face tension between consistent and resilient API's that encapsulate valuable and reusable logic, and sufficient flexibility to ensure that our components can be customised to fit bespoke product use cases. Towing this line is difficult, and becomes more difficult as a design system scales. Join me as I uncover some of the hard learned lessons towing this line in React-Select and Atlaskit, Atlassian's Design System.

XSS (Cross-Site Scripting) attacks are often referred to as the "most common vulnerability online". With victims like eBay, McAfee, and Yahoo, these attacks involve injecting malicious scripts into the DOM of unprotected web applications, resulting in access to cookies, session tokens, and sensitive data stored in the browser. But is this attack actually possible against React apps? Come and find out the answer in this talk by Carmen Chung, who will (demo gods willing) show you what sort of damage can actually be done.

What do you do when your new application is just a bunch of forms? Well, in the past you'd probably use a library, but now you can lean on react hooks and create a custom form handler! This talk will be a walkthrough of how to use hooks to create a reusable form handler with testable, customisable validation and minimal dependencies. We'll work through some code samples as well as pains and successes of using this method in a real-world, form-filled application.

React treats UI as a function of state. What if React’s declarative programming model could be applied to music as well? Reactronica aims to treat music as a function of state, rendering sound rather than UI (Using ToneJS). Some possibilities of this library will be showcased, including a piano sequencer and ukulele tab editor. Most ambitious is a (very) early prototype of a browser based Digital Audio Workstation. The presentation will go through the inner workings of the library, emphasising its use of Hooks and Context.