Subscribe to my newsletter if you enjoyed this article.

A conference was held on April 24—26 in Helsinki, Finland. I was there with a workshop on design systems for React developers and a talk. Check out my notes on the last year.

The conference

React Finland is one of my favorite conferences. It was my second time and both times I felt good as a speaker. Talks were great: two days with big breaks to have enough time to talk to your friends. I liked the selection of talks: design systems, animation, architecture. The venue (a building with a tower on a photo above) was also good.

The talks

MobX — The Journey by Michel Weststrate

Slides, video.

• If you can’t sell the library, sell the problem.
• “MobX […] tries to enable you to go home early each day.”
• Always keep learning: stay slightly out of your comfort zone.
• Open source good parts: learning, happy users, core contributors, beautiful conferences, awesome people, video tutorials, workshops, book, getting a raise, seeing others succeed.
• Open source bad parts: making your library work with all other libraries, no holidays, now you have two jobs.
• When filing issues, remember: you are asking for free help on something you are being paid for.
• Guard your heart and live a balanced life.

First #ReactFinland talk by @mweststrate. pic.twitter.com/iVpcvD0tlm

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

Append-only development with React: An intro to Behavioral programming by Luca Matteis

Slides, video.

• “Programming language are practically irrelevant in making products.”
• Code maintenance is the root of the problem.
• Make changes without having to read and maintain the code.
• Newly added code can change how old code is executed.
• Behavioral programming for JavaScript.

Mind-Reading with Adaptive and Intelligent UIs in React by David Khourshid

Video.

• Adapt to people, not just devices.
• Microsoft Clippy is the first adaptive UI.
• A/B tests are ineffective.
• Collect stats on state changes and optimize flows.
• XState.

Clippy in @DavidKPiano talk at #ReactFinland. pic.twitter.com/qh1OTKCfPt

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

A Common Design Language. Let Designers and Developers talk to each other by Andrey Okonetchnikov

Video.

• Design: typography, color and spacing.
• Developers talk in code.
• Designers talk in UI primitives.
• Design tools talk in shapes, like arrow and triangles.
• Common language: UI primitives.
• component-driven.io: component-driven design & development for the modern web.

That guy again! @okonetchnikov at #ReactFinland. pic.twitter.com/7UwpGzXaPu

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

A practical guide to building your design system infrastructure by Varya Stepanova

Slides, video.

• Design system is shared practices, tools, processes and community.
• Living style guides: React Styleguidist, Storybook.
• Visual regression tests.
• Uses Styleguidist to document plain HTML components.
• Reactify HTML: <button class="button"> → <button className="button">.
• Design system site: single source of truth.
• Automate everything.
• Welcome contributions: edit on GitHub button, list of contributors.
• Blogging with WordPress as a backend and Gatsby.

@varya_en is using @styleguidist to generate documentation for plain CSS/HTML components with @styleguidist. pic.twitter.com/kvhosfxqSl

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

12 8 Tips for More Accessible React Apps by Manuel Matuzovic

Slides, video.

1. Create a sound document outline: start with h1 and don’t skip levels.
2. Hide content correctly: display: none, visibility: hidden and hidden are hiding content from screen readers, use a combination of CSS properties that hides content only visually or VisuallyHidden component from Reach UI.
3. Use <button> if you need a button: they are focusable by default and support keyboard events.
4. Use fragments to avoid invalid HTML: <tr><div><td> → <tr><><td>.
5. Take care of focus management: can be a problem for modals, put focus inside a modal on open and don’t let it leave the modal.
6. Make notifications accessible to everyone: use role="alert" or role="status" to make screen readers announce notifications.
7. Announce page changes: on single page applications screen readers should read the page title on navigation. Check out Reach Router.
8. Test your React code automatically: use React-Axe and eslint-plugin-jsx-a11y.

Automating heading levels, @mmatuzo at #ReactFinland. pic.twitter.com/EZtGeEiXyW

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

Delightful UI animations by understanding the brain by Bruno Lourenço

Video.

• Animation — an illusion of movement.
• React Morph: morphing UI transitions.
• Creates a clone of an element and uses FLIP technique to do the morphing animation.

I’m definitely going to try react-morph, it looks incredible! #ReactFinland pic.twitter.com/3Qgu3csw8o

— Artem Sapegin ☕ (@iamsapegin) April 25, 2019

Custom CSS is the path to inconsistent UI by Artem Sapegin

Slides, video.

• We use custom styles mostly for typography, whitespace and layout.
• This leads to inconsistent UI because CSS is too expressive.
• Design tokens are the first step to achieve UI consistency.
• But not all combinations of design tokens are good: you may create unreadable text for example.
• UI primitives (primitive components) is the solution.
• Text and Heading components to render all text in an application.
• Box, Flex and Grid (Stack) components to define whitespace and layouts.
• Use styled-system to create such components: works with any CSS in JS library.

“CSS is too expressive” — @iamsapegin #ReactFinland pic.twitter.com/N5u8qI9Gaj

— James Stone (@JAMESSTONEco) April 26, 2019

Creating layouts that last by Artem Zakharchenko

Video.

• Spacing is important to build maintainable layout.
• Defining margins and padding directly on components isn’t the most maintainable way.
• Atomic layout is a library to create declarative layouts with CSS Grid.
• Define layout areas as a string template.
• Responsive props.
• Render areas using a render prop.

More layouts, more spacing by @kettanaito at #ReactFinland. pic.twitter.com/I4GLeV3tpt

— Artem Sapegin ☕ (@iamsapegin) April 26, 2019

Scalable (Design) Systems with TypeScript by Tejas Kumar

Slides, video.

• TypeScript is a good choice for design systems: enforces contracts, confidence to make changes, allows you to scale.
• Uses React Styleguidist and TypeScript for their design system.
• Hacked Styleguidist to use TypeScript and Monaco editor in component examples.

TypeScript editor with autocomplete in @styleguidist by @TejasKumar_ at #ReactFinland — super cool! pic.twitter.com/mycWMeqrxU

— Artem Sapegin ☕ (@iamsapegin) April 26, 2019

Building resilient frontend architecture by Monica Lent

Slides, video.

• Refactoring only temporarily helps with technical debt.
• Second system effect: the tendency of small, elegant, and successful systems to be succeeded by over-engineered, bloated systems because of inflated expectations and overconfidence.
• “‘Legacy code’” often differs from its suggested alternative by actually working and scaling.” — Bjarne Stroustrup.
• The real cost of software is not the initial development, but maintenance over time.
• Architecture as enabling constraints: constraints about how we use data and code that help us move faster over time.
• Shared dependencies: add them to the design system or copy-paste.
• Decoupled code is better than DRY.

Three constraints you can use today for more resilient frontend architecture:

1. Source code dependencies must point inward: don’t depend on other team’s code.
2. Be conservative about code reuse: avoid coupling code that diverges over time.
3. Enforce your boundaries: don’t let people depend on your code (with dependency-cruiser).

Monica’s @monicalent talk was my favorite at #ReactFinland — really resonates with me 🤓 pic.twitter.com/2NwSZ41BFC

— Artem Sapegin ☕ (@iamsapegin) April 26, 2019

“Intuitive” Tooling by Carolyn Stransky

Slides, video.

• Hard to learn things: TypeScript, Redux, GraphQL, Gatsby, Flexbox.
• “We mistake familiarity for simplicity” — Jim Fisher.
• Spiral of silence.
• Empathy matters more in education.
• Start an internal mentorship program.
• Ban words like “easy” from your vocabulary.
• Just because you understand something doesn’t mean that someone else will too.

Flexbox is hard to learn — definitely agree with @carolstran #ReactFinland. pic.twitter.com/TLExVyWvJC

— Artem Sapegin ☕ (@iamsapegin) April 26, 2019

Links

• Sketch notes by Patrick Hund
• The first day and the second day notes by Boris Serdiuk (includes lightning talks)
• My photos
• Shared photo album

Subscribe to my newsletter if you enjoyed this article.