Forbes Lindesay

At Threads we needed to add video editing to our mobile web app, including advanced overlays and filters. We thought there would be an open source project we could use as a foundation, but it turned out that every project we tried was either far too slow, or had a fraction of the feature set we needed.

By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos.

In this talk, I'll take you through our approach, and why we arrived at the method we chose. You'll see some of the techniques that were required to scale our canvas solution, both managing the growing complexity, and keeping a lid on our memory usage.

This talk will be especially useful to anyone considering building high performance graphics for the browser, but it will also give any developer some new ideas about how to approach technical challenges.

2019

React Alicante

High performance video editing for the mobile web

React's context API has always been labelled as experimental, but from the advent of Redux it has been used in all the most exciting react libraries. It's about to become a stabilised feature so now is the perfect time to learn the new context API. Combining the context API and render props lets gives you unprecedented power to cleanly reuse code across components. It even plays well with TypeScript and Flow. 

This talk will explain how context and render props work and give you some ideas of how to use them to simplify your own code. 

2018

Powering Code Reuse with Context and Render Props

Having a good testing setup, one that allows us to create meaningful tests and is not a painful process, is extremely important to produce quality code. In this talk we will explore the options that we have, and will explain how to leverage webdriver for end-to-end testing React applications.

Related repo: https://github.com/ForbesLindesay/end-to-end-testing-react-applications

2017

End to End testing React applications

Adding type checking to your code can be a frustrating experience at first. 

In this talk, Forbes will help you through that initial stage by identifying some of the problems you're likely to experience and giving you the tools to work through them. 

We'll cover adding types to code that initially looks too dynamic to type, adding runtime type checking (and whether that's a good idea) and finally, how you publish your type checked modules to npm.