React Finland 2018 Tour Diary

Last month, the inaugural React Finland Conference was held on April 24–26 in Helsinki, Finland’s capital. It was the first ever React conference in Finland, and I was lucky enough to present a workshop there on component-driven development. Having React as a framework of choice at Wayfair, this was a great opportunity to share my knowledge as well as pick up some useful learnings from other members of the React community.

The conference itself

The organizers of React Finland put on a spectacular conference, especially as it was the first ever event. There was plenty of time between talks to relax, process the information you were receiving, and chat with your friends and new connections. The conference was single-track — my favorite kind, hosted at a great, central location in the city. There were plenty of good coffee places around, too — a benefit of the longer breaks React Finland provided for attendees.

So far, so good. But what did I learn during my time there? We’re going to make this quick and easy – think of this recap as a collection of lightning highlights.

On to some of the talks!

The New Best Practices by

Jani Eväkallio

Let’s dive into a few summary points:

• React questioned best practices.
• We still have to make a choice (which could lead to fatigue) but we have good tools now.
• Types are the best thing to document how things work.
• You can use Storybook (or Styleguidist!) for documentation.
• While we might be clever, clever solutions aren’t better than simple ones.
• Eventually, we won’t be able to further improve on React anymore, so a revolution will certainly happen.
• Ignore the best practice police.

The new best practices according to Jani were defined as:

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, for more.

Immer by

Michel Weststrate

I’ve seen Immer before and the API looks pretty nice. Examples throughout the talk showed that it’s significantly quicker than using Object Spread Operator or libraries like Immutable.

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

Sounds neat, right? Michel’s slides can give you some more information.

Get Rich Quick With React Context by

Patrick Hund

Patrick showed us how React Context can be useful in some cases, such as showing third-party ads in your app. The new API looks easier to use than the old one, and is more explicit. This was a great lightning talk to get attendees up to speed, with slides to match.

There’s Always a Better Way to Handle Localization by

Eemeli Aro

Is this really the case? According to Eemeli, yes:

• JSON isn’t always the best format for storing your data.
• This is especially true for non-developers, such as translators. YAML is better.
• To that point, Eemeli’s second talk, Why I YAML, shows how he created a new YAML library that support comments, reading, and writing.
• Most translators aren’t used to translating UIs, as they work with larger texts.
• There are many solutions like react-intl, react-i18next, or react-message-context, but no right, concrete answer.
• Localization is important, so think about how it should work and share your ideas with library authors – they’re hungry for attention!
• Slides here!

Styled Components, SSR, and Theming by

Kasia Jastrzębska

It was time to get stylish with Kasia!

• Styled Components and other fancy things aren’t required for the success of a project, but they have some advantages.
• And yes, you still have to know CSS.
• Everything is local by default, but global styles are possible, too.
• Downside: Specificity is a huge problem in CSS.
• We should reuse styles as we would reuse components.
• A note on server-side rendering: It has a better UX, better performance, and better SEO.

Universal React Apps Using Next.js by

Sia Karamalegos

Did you know that 53% of mobile site visits are abandoned if pages take longer than three seconds to load? According to Sia, Next.js simplifies server-side rendering, code splitting, and prefetching future routes with React:

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

Want to know more? Sia’s slides are open for access!

State Management in React Apps with Apollo Client by

Sara Vieira

Using Apollo to manage state seems like a good idea if you’re already using Apollo to fetch data from your server. Sara’s presentation showed us how to use apollo-boost to bootstrap Apollo with apollo-link-state (for local state) and much more.

The API seems verbose, but Redux is verbose too; having a single API to manage state (both server and client) is better than having two. I’m inclined to agree! More from Sara’s talk can be seen here.

Make Linting Great Again by

Andrey Okonetchnikov

A linter is a tool that finds silly bugs, but it’s easy to forget to run your linter when you commit. Then, suddenly, ten minutes later, you see that your CI is failing. Andrey showed the crowd how to:

• 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 all!

How React Changed Everything by

Ken Wheeler

If you’re a fan of React but don’t know who Ken Wheeler is, then prepared to be educated. One of the heavyweights of the community was definitely onsite to impress. According to Ken:

• 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 a great community of wildly innovative folks.
• React has a great developer experience, and can be optimized (speed and size) without breaking the API.
• React is evolving: async rendering, suspense, and time slicing.

Check out Ken’s slides — they’re awesome.

Get Started With Reason by

Nik Graf

We heard from Nik about Reason and how to leverage features like variant types and pattern matching to make impossible states impossible. He also showed off how great a type inference it is, on top of it being a super fast compiler. Did you know…?

• You can make wrong states impossible with variants.
• It’s a good interop with JavaScript.
• Variants as React props: Type safety.

But beware, Nik cautions us against rewriting everything to Reason – try one component first. His slides contain further insights here.

Reactive State Machines and Statecharts by

David Khourshid

The most neglected variable is time – wise words from David Khourshid. With a finite number of events and states, he shared some incredibly useful advice throughout his presentation on Reactive State Machines:

• Don’t allow a user to interact with the UI for two seconds before the transition to a new state.
• Use objects to represent states.
• Generate analytics and integration tests.
• xstate — functional, stateless JavaScript finite state machines and statecharts.
• Statechart visualization should come from code.

Still reading? We’re almost done!

How to use React, Webpack and other buzzwords if there is no need by

Varya Stepanova

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. Varya was succinct throughout her slides and reminded me how the above-mentioned process was a good way to learn and try new things.

Conclusion

You’ve done it! You reached the end of my lightning recap. There will definitely be another iteration of React Finland next year, and likely closer to Summer. This will surely entice those who aren’t accustomed to snow and colder temperatures.

This conference presented a great opportunity to learn more about React and meet the growing Finnish React community. I’ll be applying the wealth of learnings I gained in my work on Wayfair’s frontend framework going forward.

Want to see even more from React Finland? The slides from all talks are available as open source here, while other helpful articles from different conference participants can be read here. Finally, see all the fun that was had via the shared Google Photos album! Try and spot your favorite speaker.