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.
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
- 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:
- Build big things from small things.
- Make code easy to copy and delete, not easy to change.
- Write code for humans first.
- Stay close to the language.
- Don’t break things if you don’t have to.
- Keep an open mind.
Check out Jani’s article, The Present Future of User Interface Development.
Do we need new best practices [for #React]? Well, not really. Just use the old ones :) Good “The New Best Practices” talk by @jevakallio at #ReactFinland. Start small and write simple and clean code for humans. — @walokra
Declarative state and side effects by Christian Alfoni
@christianalfoni sharing the story of refactoring @codesandboxapp to @cerebraljs. The high level orchestration of logic and the debugger are really impressive! #reactfinland — @mweststrate
Immer by Michel Weststrate
- 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 syntax or libraries like Immutable.
Immer is a great little helper for Redux, developed by @mweststrate. He just gave a very entertaining talk about it at #ReactFinland! — @ddunderfelt
Get Rich Quick With React Context by Patrick Hund
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.
“Get Rich Quick With React Context” lightning talk at #ReactFinland by @wiekatz didn’t tell how good job opportunities you have when doing React But how to insert ads. Also other use cases like localizations. — @walokra
There’s always a better way to handle localization by Eemeli Aro
- 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.
I agree with the heading! Keen to hear what Eemeli has to say: #ReactFinland — @ddunderfelt
Styled-components, SSR, and Theming by Kasia Jastrzębska
- 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.
“You are my styled-components to my React” listening to @kejt_bw at #reactfinland — @thegreengreek
Universal React Apps Using Next.js by Sia Karamalegos
- 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.
“Server-side rendering and code-splitting can drastically improve user experience”. @thegreengreek spoke at #ReactFinland about Universal #React Apps Using #NextJS. There are lots of old (mobile) devices which especially benefit from SSR. Slides at https://t.co/57v7bsthe8. — @walokra
State Management in React Apps with Apollo Client by Sara Vieira
- Use apollo-boost to bootstrap Apollo with apollo-link-state (for local state) and bunch of other things.
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.
Energetic talk by @NikkitaFTW at #ReactFinland of State Management in #React Apps with @ApolloGraphQL #ApolloClient. Easy to setup: yarn add apollo-boost graphql react-apollo. Fast paced talk so have to see slides & demo later — @walokra
Detox: A year in. Building it, Testing with it by Rotem Mizrachi-Meidan
@rotemmiz proving the point of detox with mathematical arguments like a pro #reactfinland — @mweststrate
Make linting great again by Andrey Okonetchnikov
- 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.
Use lint-staged and Mrm — great advice by @okonetchnikov #reactfinland — @iamsapegin
Understanding the differences is accepting by Sven Sauleau
JavaScript is weird.
It does not but I’ll allow it. #ReactFinland — @ddunderfelt
Why I YAML by Eemeli Aro
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
- 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.
How #React changed everything (for better) talk by @ken_wheeler at #ReactFinland started the 2nd day. Nice reality check to history of web tech and why React is great. Also shortly what comes next. But remember “Web is not suited for application development”. — @walokra
Static Websites The Final Frontier by Juho Vepsäläinen
A nostalgic talk. The fire effect was my favorite thing in Photoshop 20 years ago — probably I still remember how to do it.
(It wasn’t as easy as I thought.)
Get started with Reason by Nik Graf
- 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.
Kick off with the basics of @ReasonML by @nikgraf at #ReactFinland provided knowledge to dig further into #ReasonReact for the next talk. #ReasonML looks crafty, might be big in couple of years In the meanwhile try it in personal project. — @walokra
Making Unreasonable States Impossible by Patrick Stapfer
Getting deeper into #ReasonML and #ReasonReact with @ryyppy’s talk of Making Unreasonable States Impossible at #ReactFinland by live coding tic-tac-toe. Learning by doing Exhaustive pattern matching forces edge-cases to be handled. — @walokra
Reactive State Machines and Statecharts by David Khourshid
- 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.
Great talk by @DavidKPiano on the benefits of using state machines in the ui. I know a few places where we should use this #reactfinland — @mweststrate
ReactVR by Shay Keinan
As a three.js lover, I’m enjoying too much of @Shay_Keinan’s talk about #ReactVR in #ReactFinland — @setelani
World Class experience with React Native by Michał Chudziak
If you’re thinking of #ReactNative development @michal_chudziak talk at #ReactFinland was World Class experience. Set up friendly env with best #DX, spot bugs early and deliver continuous builds. i.a GraphQL, Haul, CircleCI, Fastlane, ESLint, Flow, Jest, Danger, Detox. — @walokra
React Finland App — Lessons learned by Toni Ristola
Every conference has to have an app and #ReactFinland of course did #ReactNative app. @toniristola talked about lessons learned. Fast start and dynamic data. Uses GraphQL and Apollo Client #GoforeCrew — @walokra
React Native Ignite by Gant Laborde
Ignite, boilerplate and command-line tool to create React Native apps.
Ignite for React Native looks incredible #ReactFinland @infinite_red — @barrymcgee
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. It’s a good way of learning and trying new things.
Developing a blog instead of writing blog posts — that sounds very familiar. Great talk by @varya_en at #reactfinland — @iamsapegin
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
- Photos (shared album)
- Slides of all talks
- Other posts about the conference