Takeaways from ReactJS Girls Conference

https://reactjsgirls.com/

I was lucky enough to attend the second annual ReactJS Girls conference in London last week. It was a fantastic day, listening to brilliant talks by women in the React community, and providing a lot of food for thought and inspiration for working in React and in web development more generally. This blog summarises some of my key takeaways from each talk.

Emma Wedekind — Building a Design System With React

• When we talk about design systems,.
• Users like consistency and predictability.
• Design systems are comprised of three pieces — the design language, the component library, and the style guide. But when designers talk about design systems, they typically mean the design language, while developers usually mean the component library.
• Design systems provide the building blocks from which we construct our applications.
• Design systems help designers and developers work together to build consistent user interfaces.
• Colour elicits emotions, type scale gives content meaning and establishes a clear hierarchy of information. Motion gives our applications personality.
• It’s really useful to take a UI audit, where we do an inventory of all components in all states and put them all onto one page. We can see at a glance how many different types of e.g. buttons we have, and this helps us to see which components are the most inconsistent.
• You can also throw the components onto a matrix charting how inconsistent the component is and how frequently its used.
• Design systems are a product serving other products — and they enable consistent experiences across your products.
• Further reading: Building Design Systems With React — slides

Jenn Creighton — The Hows and Whys of Flexible React Components

• Flexible does not equal reusable.
• Beware the “aprocalypse” — where a simple reusable component becomes overrun with props. Our focus on reuse can lead us to creating components that aren’t flexible.
• When a component has a lot of props, it’s hard to understand which ones we can safely modify or remove, and which props are needed for each UI state.
• “Flexibility is about more than reusability. It’s about the ability to understand and to augment.
• props.children is really useful for when you need a generic container and want to decouple a component from its content. This saves you from having to pass all your content as props.
• Know your traps — your habits that prevent you from writing better code.
• Further reading: Hows and Whys of Flexible React Components — slides

Erin Fox — Storybook: A React Native Love Story

• Storybook is a UI development environment and playground for creating UI components.
• Storybook allowed them to represent many different component states without setting up mock data.
• The team categorised components in three categories — individual components (used in one area and shouldn’t affect other components if changed), reusable components (used throughout the app and will change in all places if changed in future) and universal components (components that behave the same on mobile as they do on web).
• Storybook works really well with XCode.
• Components can be pumped out by developers, passed off to more senior dev team members, which facilitated a great workflow within Erin’s team at Major League Soccer.
• Further reading: Storybook docs

Monica Powell — How to automate your React workflow

• Adding components can get repetitive — automating the process can provide consistency across files without copying and pasting.
• Scaffolding can streamline this process, but a minimum viable component is not necessarily ready for product.
• There are some fantastic CLI tools including React Boilerplate, Ignite, and more lightweight options such as Hygen and Plop.
• There is an adorable package called react-kawaii for generating cute React components.

Marcy Sutton — Empathy-Driven Development

• Tabbing through a page helps you to understand how accessible the page is. Divs are not accessible via the keyboard
• The browser extension ax analyses pages to identify accessibility issues, including contrast.
• Colour contrast is one of the leading accessibility issues
• Putting content in a ‘main’ element, which tells assistive technology that this is the main content of the app.
• Making open/close buttons focusable improves accessibility.
• Chrome DevTools includes a contrast checker feature.
• Further reading: Empathy Driven Development GitHub repo

Kate Beard — Architect Your Culture Like You Architect Your Code

• Psychological safety is important when building your organisational culture. Psychological safety is a term coined by Amy Edmundson, a researcher from Harvard, and can be defined as “the shared belief held by members of the team that the team is safe for interpersonal risk taking”.
• Maintaining a good culture takes re-evaluation, you have to actively get everyone involved, and change it as your team grows
• We spend time and effort on refactoring code, striving to make it better. We should be just as deliberate about the teams and communities we take part in.

Marta Fernandes — Function Programming With ReactJS

• All React components must act like pure functions with respect to their props.
• Some of the benefits of functional programming with React are immutability, code maintenance. However, not all programmers are familiar with functional programming, and in some cases it is less efficient in terms of CPU and memory usage.
• There are a number of functional patterns we can use with React.
• We don’t use state on components in a functional paradigm, instead we use functional components (or even stateless class components).
• Currying can be used to compose components, this is used by a number of popular React libraries like Redux and mobX.

Manjula Dube — React Hooks: A Hype-Driven Development in React

• Hooks are a new addition to React. They add functionality to functional components that was previously only available in class components
• Classes can be confusing — you have to remember to bind ‘this’, and unused functions are not stripped out at compile time. You can end up in ‘wrapper hell’.
• There are rules for using hooks. You can only call hooks from the top level and from React functions. You cannot call them in nested functions or within loops.
• useEffect can express combinations of componentDidMount, componentDidUpdate and componentWillUnmount.
• React.memo helps you control re-rendering. You can wrap your component in React.memo and it will take care of monitoring props changes and deciding whether or not to rerender.
• Further reading: UseHooks