Skip to content
ArtemSapegin

React Finland 2019

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.

Sunset in Helsinki

#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.

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

Slides, video.

  • Programming languages are 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

Slides, 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.

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

Slides, 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.

#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.

#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.

#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.

#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.

#Creating layouts that last by Artem Zakharchenko

Video.

#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.

#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 overengineered, 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 copypaste.
  • 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).

#“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.