ArtemSapegin

React Finland 2018

This article was initially published at the Wayfair tech blog. Here is a full version.

React Finland was held on April 24–26 in Helsinki, Finland. It was the first React conference in Finland. I was there with a workshop on Component-driven development.

Helsinki port

Conference

The conference was very well organized, especially for the first event. There were plenty of time between talks to relax, process information and talk to your friends. I think that’s a better format than extremely packed talks with five-minute breaks. The conference was a single-track — my favorite kind. The venue and the hotel, booked for speakers, were in five-minute walk from the Central Station with many good coffee places around — another benefit of long breaks.

The weather was the most perfect for a conference: +10 °C with occasional rain and, once, wet snow. You don’t want to go out much.

Talks

The New Best Practices by Jani Eväkallio

Slides

  • React questioned best practices.
  • We still have to make a choice (could lead to fatigue) but we have good tools now.
  • Types are the best thing to document how things fucking work.
  • Use Storybook (AS: or Styleguidist!) to document.
  • We’re fucking clever. Clever solutions aren’t better than simple ones.
  • Eventually we couldn’t improve React anymore, and a revolution will happen.
  • Ignore best practice cops.

The new best practices according to Jani:

  1. Build big things from small things.
  2. Make code easy to copy and delete, not easy to change.
  3. Write code for humans first.
  4. Stay close to the language.
  5. Don’t break things if you don’t have to.
  6. Keep an open mind.

Check out Jani’s article, The Present Future of User Interface Development.

Declarative state and side effects by Christian Alfoni

Slides

⚡️ Immer by Michel Weststrate

Slides

  • Callback hell becomes spread hell when we try to modify nested immutable objects.
  • 70 libraries on npm promise to make reducers shorter.
  • Immer allows you to create the next immutable state by mutating the current one.

I’ve seen Immer before and the API looks pretty nice. Examples in the talk shows that it’s significantly shorter than using object spread operator or libraries like Immutable.

⚡️ Get Rich Quick With React Context by Patrick Hund

Slides

React context can be useful in some cases, like showing third-party ads in your app. The new API looks easier to use than the old one, and more explicit.

⚡️ There’s always a better way to handle localization by Eemeli Aro

Slides

  • JSON isn’t always the best format for storing your data.
  • Especially for non-developers, like translators. YAML is better.
  • Most translators aren’t used to translate UIs, they work with larger texts.
  • Many solutions, like react-intl, react-i18next or react-message-context, but no right answer.
  • Localization is important, think how it should work and share your ideas with library authors, they’re hungry for attention.

Styled-components, SSR, and Theming by Kasia Jastrzębska

Slides

  • Styled-components and other fancy things aren’t required to success of the project but they have some advantages.
  • You still have to know CSS.
  • Everything is local by default, but global styles are possible too.
  • Specificity is a huge problem in CSS.
  • Reuse styles as you reuse components.
  • Server-side rendering: better UX, performance and SEO.

Universal React Apps Using Next.js by Sia Karamalegos

Slides

  • 53% of mobile site visits are abandoned if pages take longer than three seconds to load.
  • Server-side rendering and code splitting improves performance, especially for users of slow devices, like mobile phones.
  • 100 KB of JavaScript is more expensive than 100 KB of images.
  • Next.js simplifies server-side rendering, code splitting and prefetching future routes with React.

State Management in React Apps with Apollo Client by Sara Vieira

Slides

Using Apollo to manage state seems like a good idea if you’re already using Apollo to fetch the data from server. The API seems verbose but Redux is verbose too and having a single API to manage state (both server and client) is better than having two.

Detox: A year in. Building it, Testing with it by Rotem Mizrachi-Meidan

Slides

Make linting great again by Andrey Okonetchnikov

Slides

  • Linter is a tool that finds stupid bugs.
  • But it’s easy to forget to run linter when you commit, and then, 10 minutes later, you see that CI is failing.
  • Use lint-staged to run linters as a precommit hook and husky to manage Git hooks.
  • Use Mrm to easily add lint-staged to your project: npx mrm lint-staged.

I’m a huge fan of lint-staged and recommend it to everyone.

⚡️ Understanding the differences is accepting by Sven Sauleau

Slides

JavaScript is weird.

⚡️ Why I YAML by Eemeli Aro

Slides

Eemeli has created a new YAML library that support comments, reading and writing. I’m going to try it in Mrm.

How React changed everything by Ken Wheeler

Slides

  • React feels like real app development, before libraries were HTML first.
  • In React you don’t update your views manually (like in Backbone).
  • Components are a big deal.
  • React is the perfect abstraction.
  • React has great community of wildly innovative folks.
  • React has great developer experience, could be optimized (speed and size) without breaking the API.
  • React is evolving: async rendering, suspense and time slicing.

Check out Ken’s slides, they are awesome.

⚡️ Static Websites The Final Frontier by Juho Vepsäläinen

Slides

A nostalgic talk. The fire effect was my favorite thing in Photoshop 20 years ago — probably I still remember how to do it.

Fire effect in Photoshop

(It wasn’t as easy as I thought.)

Get started with Reason by Nik Graf

Slides

  • Great type inference.
  • Super fast compiler.
  • Make wrong states impossible with variants.
  • Good interop with JavaScript.
  • Variants as react props: type safety.
  • Don’t rewrite everything to Reason, try one component first.

Making Unreasonable States Impossible by Patrick Stapfer

Slides

Reactive State Machines and Statecharts by David Khourshid

Slides

  • The most neglected variable is time.
  • Finite number of events and states.
  • Don’t allow user to interact with the UI for two seconds before transition to a new state.
  • Use objects to represent states.
  • Generate analytics and integration tests.
  • xstate, a functional, stateless JS finite state machines and statecharts.
  • Statechart visualization from code.

ReactVR by Shay Keinan

Slides

World Class experience with React Native by Michał Chudziak

Slides

React Finland App — Lessons learned by Toni Ristola

Slides

React Native Ignite by Gant Laborde

Slides

Ignite, boilerplate and command-line tool to create React Native apps.

⚡️ How to use React, webpack and other buzzwords if there is no need by Varya Stepanova

Slides

I’ve also spent a lot of time writing and rewriting my blog, instead of writing blog posts, and even ended up with my own static site generator. It’s a good way of learning and trying new things.

Conclusion

There will be React Finland next year, probably closer to summer, when the weather is less shocking for those who aren’t used to snow and cold temperatures — that’s your chance to explore Finland, learn React and meet the Finnish React community.

Resources