React Finland 2018
This article was initially published at the Wayfair tech blog. Here is a full version.
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
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.
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. pic.twitter.com/6knZOU9FcQ— Marko Wallin (@walokra) April 25, 2018
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 pic.twitter.com/AIjbEY35rf— michel.codes (@mweststrate) April 25, 2018
⚡️ 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 operator or libraries like Immutable.
⚡️ 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. pic.twitter.com/Zrp00fZwG6— Marko Wallin (@walokra) April 25, 2018
⚡️ 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.
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.
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.
- 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. pic.twitter.com/rfTFlfEs2a— Marko Wallin (@walokra) April 25, 2018
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 😅 pic.twitter.com/cApvkNGRs1— Marko Wallin (@walokra) April 25, 2018
Detox: A year in. Building it, Testing with it by Rotem Mizrachi-Meidan
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.
⚡️ Understanding the differences is accepting by Sven Sauleau
⚡️ Why I YAML by Eemeli Aro
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". pic.twitter.com/7o0MfXOVp8— Marko Wallin (@walokra) April 26, 2018
⚡️ Static Websites The Final Frontier by Juho Vepsäläinen
A nostalgic talk. The fire effect was my favorite thing in Photoshop 20 years
(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.
- 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. pic.twitter.com/gKoa0HUlm8— Marko Wallin (@walokra) April 26, 2018
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. pic.twitter.com/L6dM2d3vVw— Marko Wallin (@walokra) April 26, 2018
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.
ReactVR by Shay Keinan
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. pic.twitter.com/bb3Vg1w2z4— Marko Wallin (@walokra) April 26, 2018
Lessons learned by Toni Ristola App —
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 pic.twitter.com/8Fli1DdCJS— Marko Wallin (@walokra) April 26, 2018
React Native Ignite by Gant Laborde
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
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.
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