March 27, 2020

David Khourshid talking on stage at Agent Conference

In January I was lucky enough to have the opportunity to attend AgentConf in Austria. I got to hear from some awesome talks from some of the coolest people in the industry. AgentConf marked my first conference which was frankly really exciting, I am so lucky to be in an industry where it is standard for employers to pay you to go to conferences.

I got to meet awesome people, chat about work and not work. For me, it was a really good chance to hear first hand how other companies operate in comparison to FindMyPast. It made me appreciate that not every company allows developers to confidently push to master and deploy multiple times a day.

Here is a summary of what I learned from some of the talks at AgentConf.

Adaptive UIs - David Khourshid

David Khourshid, the father of state machines, gave a fascinating talk on creating adaptive user interfaces.

Davids talked about the research he has been doing at Microsoft to help them give their customers an excellent user experience while acknowledging that different people experience their products in different ways. Admittedly its a very experimental space right now and the only people investing in it are Microsoft and Google, however, they are both producing great open-source tools so we can all benefit from their work.

One use of state machines that he talked about stuck with me more than others. If we model our UIs using state machines then we can use the machines to get insight into how users are using our applications. Inside your transition function, you can put in some analytics tracking that records the states and transition that the machines go through. You can then use all of the data to create a weighted graph that shows the most common paths that users go through your application. Once you have the information about how users use your application you can focus on making the most common paths streamlined.

Past Present and Future of CSS-in-JS - Max Stoiber

Max Stoiber is the creator of styled-components and has been following CSS-in-JS for a long time, turns out it has a long history. He talked us through the evolution of the CSS-in-JS and encouraged the audience to become the future of CSS-in-JS.

For all of my professional software developing career, I have used CSS-in-JS so I don't know any different. I know it is awesome but I never really knew what pain it was saving me from. Luckily this talk walked through the key benefits of using CSS-in-JS over vanilla CSS.

The first benefit is "confidence by colocation". For a long time, CSS has been separated from JavaScript in the name of "separation of concerns" which used to make sense. However, now that most of the web uses a component pattern it makes more sense to encapsulate everything about our components in one place.

Maintaining your CSS when it is located in JS is much simpler. The way CSS references what it is styling often makes it unclear what the styles are being applied to. You have to search the code to make sure you know all the places a class is used so that when you make an edit you don't break anything else. This often leads to people only ever adding CSS rather than editing it to ensure that they don't break anything, which in turn creates a mess. CSS-in-JS saves you this pain because it references what it styles via JS variables, something editors can help you track much easier.

Something that is always mentioned when talking about CSS-in-JS is performance. Benchmarks show that using CSS-in-JS is no slower than using CSS because you have to make an extra network request for the CSS and CSS-in-JS can make sure to only ship the CSS you need. Besides you are probably using React which will be way heavier than your CSS anyway.

Now to be fair CSS Modules also solves most of the things that CSS-in-JS does and it has a lot in common with CSS-in-JS solutions so they aren't direct competitors as they can learn from each other.

Building Reusable UI Libraries - Cassidy Williams

Cassidy gave a brilliant talk that has already had an impact on the way I write React components to make them more reusable.

Don't have a single point of entry for your components, this leads your component having to accept props to support every use case under the sun and it can't break any other uses. You can avoid this by supplying multiple components that make up one component and asking consumers to build up their components with the supplied parts. Here is a worked example of this.

Don't do the following:

Instead do:

Under the hood, you can then support these components by putting the state in the top-level component and then giving to the lower components via context.

There you go, you now have highly reusable components that have a low maintenance cost and allow consumers to achieve anything they want by not enforcing any more rules than you need to.

Other talks

Brent Vante gave a talk walking through creating a React Native app with Expo. It was amazing to see how easy it is to get set up with React Native, and how far you can get building a native app with only web knowledge.

Vladimir Novick controlled a drone using his brain. Sound pretty silly but it was well done and interesting to see people being so creative. To top it off the entire app was created on the web platform using Bluetooth APIs, which I didn't even know existed.

Jared Palmer announced Formik Cloud which was awesome. We use the Formik library for all of our forms at FindMyPast so it was good to see that the creator was heavily investing in the open-source product and I always love seeing open source projects coming up with a business model that means the maintainers get paid.