7 things I learned at ReactJS Girls 2019
On 3rd May 2019, I attended ReactJS Girls 2018 ‘A conference for every React developer where women take the stage’.
From the very beginning, the stage was filled with energy… literally, 5 of the speakers were dancing and hyping up the crowd — it was awesome! After, a diverse set of talks gave away knowledge in a range of topics from improving team culture (Kate Beard) to Learning GraphQL (Carolyn Stran).
It’s worth noting my level of knowledge might be different to some readers. If you were at the conference and think my list could be improved let me know on Twitter @harry_ronchetti or LinkedIn @harry-ronchetti.
Summary
- A design system is a product… that serves other products
- Reusable doesn’t mean flexible (Components)
- Storybook is love
- Percy makes you popular
- Stop being lazy, accessibility is easy
- Stop, Go, encourage criticism and normalize mistakes
- You’ll get hooked on React 16.8
1. A design system is a product… that serves other products
Emma Wedekind opened up the conference by showing us how efficient design systems work and why good documentation is key to their success.
Design systems should be looked after like a product so they can be easily understood and implemented properly. They aren’t just a ‘project’.
However, not everyone has the luxury of creating a product from scratch so Emma recommends conducting a UI Audits. This involves taking screenshots of anything that could be a component, grouping them by similarity and converting each group into a component.
Another tip Emma shared was passing SVG icons as props in React. I often use icon fonts but recently I’ve learned the negative impact they have on accessibility so I’ll definitely be using SVGs like this in the future. Here’s a nice tutorial I found on making dynamic SVGs in React.
Emma’s full talk: https://www.youtube.com/watch?v=ropAuzI7MtA
2. Reusable doesn’t mean flexible (Components)
Jen Creighton destroyed my previous understanding of how components should work in React. All this time I’ve been passing several props / adding intricate logic to make components as reusable as possible but this isn’t flexible.
Jen suggested using 1 prop called ‘type’. This single prop should be used in something like a switch case; where each ‘type’ conveys the components use-case in a scenario.
This improves the chance of you and other developers understanding your code better. (We’ve all been there when you return to your desk on a Monday and have no clue what you were thinking/doing the Friday before!)
The final piece of advice Jen gave was to ‘kill your darlings’. Meaning, don’t hold on to those extremely intricate components that took ages to build. If it’s not clear you need to know when to let go.
Jen’s full talk: https://www.youtube.com/watch?v=vot0nJJ2Qdo
3. Storybook is love
Erin Fox executed an amazing example of storytelling by speaking about how she ‘broke-up’ and got back together with Storybook (in React).
I was already aware of Storybook and it’s benefits but Erin showcased Storybook inside XCode and mentioned it also works with Android Studio. This was huge for me because in my current role I’m surrounded by app developers; using storybook cross-platform could really improve consistency between native/web.
Erin also mentioned that during her role at Major League Soccer they had 3 different names for components:
- Individual components are only used in one specific area and it should not affect other components if they are changed in the future.
- Re-usable components are used throughout the app. If you change it in the future, it will change everywhere it is being used.
- Universal components are magical components that perform exactly the same natively/on the web.
For an example of what a highly developed design system looks like in Storybook, Emma Wedekind showcased the Carbon Design System by IBM. I certainly will be poking around their huge storybook repo once I’ve written this article!
Erin’s full talk: https://www.youtube.com/watch?v=vYI1riChSj4
4. Percy makes you popular
Ok, I may have misled you here — you’re not getting a pass to the cool group in high school but Percy does improve cross-browser consistency and will make users like you.
Laura Medarlia introduced Percy.io and how it identifies the visual inconsistencies of your site between browsers. It works on by taking screenshots of each browser/device to detect differences. Pretty cool right? It can also be used with React Native and integrates with Storybook and various other tools.
I love the idea of using Percy. My current team uses BrowserStack, which, is awesome but Percy is automated so will detect differences much faster than any QA Engineer. This leaves more time for testing functionality inconsistencies between browsers.
5. Stop being lazy, accessibility is easy
Marcy Sutton pretty much put myself and most of the developers I know to shame by showcasing how easy it is to test for (and implement) accessibility best practices. Some of the tips she shared included:
- Tab through your website and make sure everything works as expected for keyboard-only users
- Use Aria labels to convey what items do if they don’t have supporting text.
- Make sure pressing the escape key closes any modals/pop-ups for keyboard-only users.
- Use Chrome’s built-in colour contrast checker to assess text contrast ratio.
- Use the aXe browser extension for super fast accessibility checking.
- Automate accessibility testing with Cypress and aXe
Overall, everyone should be doing all of the above to make the websites we produce as usable as possible. Marcy outlined that this isn’t just limiting revenue by not satisfying every user’s needs but it’s also completely unethical.
Marcy’s full talk: https://www.youtube.com/watch?v=xVmUvMkBHas
6. Stop, go, encourage criticism and normalize mistakes
Kate Beard suggested ‘architecting your culture like you do your code’ and outlined the importance of ‘Psychological Safety’ in teams. This means having a shared belief that the team is safe for interpersonal risk-taking.
Kate spoke mostly from experience at the ‘Founders and Coders’ (FAC) bootcamp she did before her first developer role at the Financial Times, and I have to say everything she said me want to do the Bootcamp!
Personally, I think culture is hugely important for teams to produce good work. Recently, I’ve been trying to do more reviews with team members than ever, because, as Kate suggested in her talk:
Encouraging criticism will eventually give you more confidence and normalize mistakes so overcoming them is easier
Finally, Kate mentioned each week at FAC they used an exercise called ‘Stop, Go, Continue’ to celebrate things team members liked and get rid of aspects they didn’t going forward. With no wrong answers, this sounds like a great way to modify an Agile retrospective so everyone feels listened to.
Kate’s full talk: https://www.youtube.com/watch?v=pG1tOvtFCg4
7. You’ll get hooked on React 16.8
If you’re a React developer, unless you’ve been living in a cave for 6 months you’re probably aware that release 16.8 introduced Hooks. In a nutshell, Manjula Dube explained:
- Hooks are functions that can only be called at ‘top level’ (not inside loops, conditions, or nested functions).
- They almost remove the need to use React Class components entirely because they allow state, refs, context and (most) lifecycle events to be controlled inside functional components.
- There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch (yet).
- You can create custom Hooks that allow you to extract component logic into reusable functions. Some example can be found on useHooks.com.
- The 2 built-in hooks are useState and useEffect.
- useState allows state to be manipulated with functional components
- useEffect allows componentDidMount, componentDidUpdate and componentWillUnmount to be manipulated.
Manjula showed that using Hooks clearly shrinks file size and improves performance. So what’s not to like? Nothing! Just another new thing to learn but this is life as a Front-end Developer so we probably (begrudgingly) need to just deal with it.
Manjula’s full talk: https://www.youtube.com/watch?v=qX5zj037iVU
Conclusion
Overall, the conference was awesome. Eve Porcello did an amazing job at MC’ing between talks and keeping everyone engaged. If you’re considering holding a conference I think everyone at ReactJS Girls would join me in recommending her as an MC because she had us in stitches constantly!
I learned so much, and will definitely be going again next year.
I mentioned my 7 highlights above but there were 10 talks at the conference. Monica Powell gave an awesome overview of how to automate workflow in React, Carolyn Stran explained the myth that is GraphQL and Martha Fernandes showed how functional programming works in React. These 3 talks weren’t as applicable to me but if you want to learn more click on their names for twitter handles or more find their details on the ReactJS Girls website.
Thank you for reading, I hope you enjoyed! I’ll be trying to do one of these for every web design/development conference I go to so give me a follow if you want to see more
