Gofore

We offer expert knowledge in digitalization.

Blogi 17.5.2018

Two days of learning at React Finland 2018

Kiva kun löysit tämän artikkelin! Se sisältää varmasti hyvää tietoa, mutta pidäthän mielessä, että se on kirjoitettu 6 vuotta sitten.

The React Finland 2018 conference was held a couple of weeks ago and I had the opportunity to attend and listen what’s hot in the React world. The conference started with workshops which were followed by two days of talks of React, React Native, React VR and all things that go with developing web applications with them. The two conference days were packed with great talks and new information. Here’s a recap of the talks I found especially interesting and some of my notes which I posted to Twitter. If you need more views on the conference, one of the organisers did a post on the blog coverage.

React Finland 2018

React Finland combined the Finnish React community with an international flavour from Jani Eväkallio to Ken Wheeler and other leading talent from the community. The event was the first of its kind in Finland and consisted of a workshop day and two days of talks around the topic. It was nice that the event was a single track so you didn’t need to choose between interesting talks.
At work, I’ve been developing with React for a couple of years and have tried my hand with React Native so the topics were familiar. The conference provided some crafty new knowledge to learn from and maybe even put into production. Overall the conference was a great experience and everything went smoothly. Nice work from the React Finland conference team! And of course thanks to Gofore https://gofore.com/ who sponsored the conference and got me a ticket.

The New Best Practices — Jani Eväkallio

The first day’s keynote was by Jani Eväkallio who talked about ”The New Best Practices”. As the talk description said, ”When React was first introduced, it was ridiculed for going against established web development best practices as we knew them. Five years later, React is the gold standard for how we create user interfaces. Along the way, we’ve discovered a new set of tools, design patterns and programming techniques.”
The new best practices were:

  • Build big things from small things
  • Write code for humans first: flow, Typescript, storybook
  • Stay close to the language:
    • helps i.a. linters
  • Always prefer simplicity
  • Don’t break things:
    • Facebook makes React API changes easy to upgrade, depreciation well in advance, migration, documentation. it’s a flow, not versions. Use codemod.
  • Keep an open mind

You may ask ”what new best practices”? Yep, that’s the thing. We don’t need new best practices as concepts like Model-View-Controller and separation of concerns are still valid. We should use best practices which have been proven as they also work nicely with the React philosophy. Eväkallio also talked about why React will be around for a long time. It’s because components and interoperable components are an innovation primitive.

Immer: Immutability made easy — Michel Weststrate

Immutable data structures are a good thing and Michel Weststrate showed Immer, which is a tiny package that allows you to work with immutable data structures with unprecedented ease. Managing the state of the React app is a huge deal with Redux and any help is welcome. ”Immer doesn’t require learning new data structures or updated APIs, but instead creates a temporary shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree.”
The talk showed how to write reducers in a much more readable way, with half the code and without requiring additional large libraries. The talk slides are available online.

Styled Components, SSR, and Theming — Kasia Jastrzębska

Web applications need to be styled and Kasia Jastrzębska talked about CSS-in-JS with styled-components by going through the new API, performance improvements, server-side rendering with Next.js. She also showed the theming manager available with v2 of styled-components. The slides are available online.
The main takeaway from this talk was that CSS in React app can be written as you always have or by using CSS-in-JS solutions .There are several benefits of using styled-components but I’m still thinking how styles get scattered all over components.

Universal React Apps Using Next.js — Sia Karamalegos

53% of mobile site visits are abandoned if pages take longer than 3 seconds to load. – DoubleClick by Google, 2016

Every user’s hardware is different and processing speed can hinder user experience on client-side rendered React applications and so Sia Karamalegos talked about how server-side rendering and code-splitting can drastically improve user experience. By minimising the work that the client has to do. Performance and shipping your code matters. The talk showed how to easily build universal React apps using the Next.js framework and walked through the concepts and code examples. Talk slides are available online.
There are lots of old (mobile) devices which benefit from Server Side Rendering. Next.js is a minimalistic framework for universal, server-rendered (or statically pre-rendered) React applications which enables faster page loads. Pages are server-rendered by default for the initial load, you can enable prefetching future routes and there’s automatic code splitting. It’s also customisable so you can use your own Babel and Webpack configurations and customise the server API with e.g. Express. And if you don’t want to use a server Next.js can also build static web apps that you can then host on Github pages or AWS S3.

Make linting great again! — Andrey Okonetchnikov

One thing in software development which always gets developers arguing over stupid things is code formatting and linting. Andrey Okonetchnikov talked about how ”with a wrong workflow linting can really be a pain and will slow you and your team down but with a proper setup it can save you hours of manual work reformatting the code and reducing the code-review overhead.”
The talk was a quick introduction how ?? lint-staged a node.js library can improve developer experience. A small tool coupled with tools that analyse and improve the code like ESLint, Stylelint, Prettier and Jest can make a big difference.

How React changed everything — Ken Wheeler

The second day started with a keynote by Ken Wheeler. He examined how React changed the front end landscape as we know it and started with nice time travel to the 90s with i.a. Flash, JavaScript and AngularJS. Most importantly the talk took a look at the core idea of React, and why it transcends language or rendering target and posit on what that means going forward. And last we heard about what React async: suspense and time slicing.

”Best part of React is the community”

Reactive State Machines and Statecharts — David Khourshid

David Khourshid’s talk about state machines and statecharts was interesting. Functional + reactive approach to state machines can make it much easier to understand, visualize, implement and automatically create tests for complex user interfaces and flows. Model the code and automatically generate exhaustive tests for every possible permutation of the code. Things mentioned: React automata, xstate. Slides are available online.

”Model once, implement anywhere” – David Khourshid

The talk was surprisingly interesting especially for use cases as anything to make testing better is good. This might be something to look into.

ReactVR — Shay Keinan

After theory-heavy presentations we got into more visual stuff: React VR. Shay Keinan presented the core concepts behind VR, showed different demonstrations, and how to get started with React VR and how to add new features from the Three.js library. React VR: Three.js + React Native = 360 and VR content. On the VR device side it was mentioned that Oculus Go, HTC Vive Focus are the big step to Virtual Reality.

”Virtual Reality’s possibilities are endless. Compares to lucid dreaming.” – Shay Keinan

WebVR enables web developers to create frictionless, immersive experiences and we got to see Solar demo and Three VR demo which were lit ?.

World Class experience with React Native — Michał Chudziak

I’ve experimented with React Native so Michał Chudziak’s talk about how to set up a friendly React Native development environment with the best DX, spot bugs in early stage and deliver continuous builds to QA. Again Redux was dropped in favour of apollo-link-state.

Work close to your team – Napoleon Hill

What makes a good Developer eXperience?

  • stability
  • function
  • clarity
  • easiness

GraphQL was mentioned to be the holy grail of frontend development and perfect with React Native. Tools for better developer experience: Haul, CircleCI, Fastlane, ESLint, Flow, Jest, Danger, Detox. Other tips were i.a to use native IDEs (XCode, Android Studio) as it helps debugging. XCode Instruments helps debug performance (check iTunes for video) and there’s also Android Profiler.

React Native Ignite — Gant Laborde

80% of mobile app development is the same old song which can be but short Ignite CLI. Using Ignite, you can jump in to React Native development with a popular combination of technologies OR brew your own. Gant Laborde talked about the new Bowser version which makes things even better with Storybook, Typescript, Solidarity, mobx-state-tree and lint-staged. Slides can be found online.

After party

Summary

Two days full of talks about React, React Native, React VR and all the things that go with developing web applications with them was a great experience. The days were packed with great talks and new information and everything went smoothly. The conference was well organised, food was good and the participants got soft hoodies to go with the Allas Sea Pool ticket. The talks were all great but especially ”World Class experience with React Native” and ”React Native Ignite” gave me new inspiration to write some apps. Also ”ReactVR” seemed interesting although I think Augmented Reality will be bigger thing than Virtual Reality. It was nice to hear from ”The New Best Practices” talk that there really are no new best practices as the old ones still work. Just use them!
Something to try and even to take into production will be Immer, styled components and Next.js. One thing which is easy to implement is to start using lint-staged although we are linting all the things already.
One of the conference organizers and speaker, Juho Vepsäläinen, wrote Lessons Learned from the conference and many of the points he mentioned are to the point. The food was nice but ”there wasn’t anything substantial for the afternoon break”. There wasn’t anything to eat after lunch but luckily I had my own snacks. Vepsäläinen also mentions that ”there was sometimes too much time between the presentations” but I think the longer breaks between some presentations were nice for having a quick stroll outside and have some fresh air. The venue was quite warm but the air wasn’t so good in the afternoon. The Afterparty at Sea Life Helsinki was an interesting choice and it worked nicely although there weren’t so many people there. The aquarium was a fishy experience and also provided some other content other than refreshments. Too bad I didn’t have time to go and check the Allas Sea Pool for which we got a free ticket. Maybe next time.
Thanks to the conference crew for such a great event and of course to my fellow Goforeans who also attended and had a great time!

This article was compiled from the published on Rule of Tech of the event on day 1 and day 2 articles. Rule of Tech is author’s personal blog about technology and software development.

Marko Wallin

Marko works as a full stack software engineer and creates better world through digitalization. He writes technology and software development related blog and developes open source applications e.g. for mobile phones. He also likes mountain biking.

Sinua saattaa myös kiinnostaa

17.04.2024

Mitä on muutosjohtaminen ketterässä muutoksessa?

09.04.2024

Copilotista hyödyllinen kumppani – luovu vanhoista tavoista ja opi uutta

26.03.2024 ÄLYKäS TEOLLISUUS

Miten hyödyntää digitaalista kaksosta?

Takaisin ylös