Blog

React Norway Conference 2022

by Hernani Fernandes
13 Dec, 2022
ReactTechnology

React Norway website

In this post, I share my experience in the React Norway at the cosy town of Larvik, 140 km from the capital Oslo.
This is definitely not a technical post (just a bit 😉 ) but a conference experience overview.

I hope you enjoy it!

Buying the tickets via the website was easy and painless, everything was in English (it was the only option).

I arrived a day early because the event would start at 8am, so travelling from The Netherlands could be a problem.

Schedule

8:00 – 9:00 Signing up + Coffee Start

As my first impression arriving at the Farris bad hotel I saw a giant banner of the event with beautiful illustration and the hotel hall has an astonishing view to the beach. We received a white tag and the organizers were wearing a blue tag with a standard blue shirt.

 

Going downstairs, you could grab your coffee and eat some fruit (but no breads or snacks).

lounge area

 

9:00 – Welcoming talk

Entering at the theatre, we could immediately see the three big screens. Nice chairs with tables to put or laptop and your coffee 🙂

laptop and coffee

The room was 90% full (about 100 people) so I believe that they were a little late to wait for latecomers, but the first talk was schedule only for 9:30am, so I believe that they had a bit of flexibility.

farisbad-theater

The introductions were made by two workers from Crystallize (I believe) and you could feel that they were nervous and a small problem with the microphone volume affect a bit the first impression, but everything went well afterwards.

talks introduction

They suggested that the audience to scan a qr code to send questions or entering at slido.com/ using #reactnorway tag. It was a bit fast, so I’m not certain that everybody were able to scan it, but it was a nice tool to share questions anonymously and make the questions visible for the audience after each presentation.

The CTO from Crystallize explained about the event and showed some examples from his own company.
Based on the custom illustrations from the presentation, it was clear that they have an eye for design and design-driven approach.

Crystallize cto

The way that Crystallize sees the development:

Use boilerplate to start and make, then open-source

If that’s not documented then it does not exist

Clear, consistent and automated

Presented the sponsors very briefly.

 

9:30—Engaging eCommerce with the Visual Web

Colby Fayock from Cloudnary

Colby Fayock from Cloudnary started with a pleasant talking about how to improve traditional ecommerce experience. Using embedding videos instead of static images, virtual reality, 3D showing off plenty of great examples and how it affects the developer experience showing an example of technical solution for each problem.

https://www.responsivebreakpoints.com/
https://astro-image-gallery.netlify.app/

Also, a live demo deploying astro-image-gallery using Netlify and inspecting the images sizes and after using inside Netlify a Cloudnary plugin to automatically reduce the image sizes offering the best format (JPG, WebP, AVI) dynamically based on the user browser.

The speaker spoke in an ultra-fast mode that didn’t tire you out with slow speech, but on the other hand made you miss some parts. However, they also made a great recap at the end to summarize the key points.

 

9:50 – Short talk (10 minutes talk)

One of the main presenters presented examples of how to:

  • Request a bugfix to the development team with steps
  • Request a new feature for the team
  • Cross-team knowledge
    At the first sight you could clearly see how nervous he was, but the presentation was great.

 

10:00 – Optimistic Web

Atila Fassina from Xata used his cellphone to control the slides in his laptop, walking through the stage showing a bit of confidence.
Introduced the talking about user interface x user experience determine the user accessibility when waterfall contents are blocking the experience.

He explained how some errors flows happens and how state machines can help you out and how Remix handles that transparent with functions like:

  • useLoaderData
  • useTransition
  • useActionData
  • useFetcher
  • useFetchers
  • useFormAction
  • useSubmit

*These are Remix functions and not React 18

He also made a live demo implementing useLoaderData and useActionData to fetch data from a local database using Remix to create optimistic calls where Remix automatically handles your data and errors smoothly.

10:30 – Break & Networking

 

They reinforce you to socialize with other participants and together with this break they had also a mini workshop about how to deploy Remix applications with Crystallize

Partial hydration in Astro and Next.js (It had a 10 min. delay)

Hakon Krough – Head of Engineering of Crystallize seems very confident starting with a small joke, talking in a good pace.
Explaining what hydration is and how it affects the performance in user’s experience showing a simple application with one button and the default performance is not good by default and how to solve it.

presenter talking about astro and next.js

Code example

11:36 – Client-side code generation with OpenAPI (6 min. delay)

Johannes Brodwall from Sopra Steria started with confidence saying that it’s to be the guy between the audience and the lunch, and also holding a wired mouse in contrast with previous presentor and reinforced that without documentation the code doesn’t exist.
He showed how to use OPEN API and generate source code to improve type-safety creating automatically typescript type interfaces and fetch functions creating a strong bond between frontend and backend.
Creating a plugin to extend the default code-gen behaviour: https://github.com/jhannes/openapi-generator-typescript-fetch-api.
A great extra point is that also generate the mock function to add into your frontend tests.

12:06 – Lunch Break (6 min. delay)

Nice area with a great variety of foods.

13:04 – Next topic presentation (they forgot to clap, so was a bit strange)

13:05 – Sustainable components ♻️

Talked about how components can grow and break initial the strategy creating a chaotical properties management and how to create API’s design that are stable, easy to use and extensive. They should rarely change, change in a predictable fashion way, be intuitive, consistent, well documented, simple and how they are related with React.

13:30 – React Shorts
Each presentation has around 8 minutes only
13:30 – Rasmus Rimestad talked about Utility with Typescript like Pick, Partial
13:38 – Adnreas Storeund Madsen – Unlocking the hidden powers of typescript

13:46 – The Road to Intl.MessageFormat (started 14 minutes earlier, probably because they didn’t have enough short talks)
react norway speker
Eemeli Aro showed how Mozilla is working in a standard to create localizations with .mf files.

https://github.com/tc39/proposal-intl-messageformat

14:18 – Unexpected Break & Networking (?) 🤷‍♂️

14:33 – Presented next speaker
14:33 – A practical introduction to web encryption
Benedicte Raae explained the why, intro, how to work with web encryption and also explain a bit why privacy data and encrypted data are related.

15:04 – Another Break & Networking

15:15 – React Shorts
15:23 – Fredrik Jensen – How to build a CLI – explained how to use libs like yargs, chalk, prompt. Also adding script “run”: to package.json to default run as a CLI
15:20 – Rob Walker – Visual regression testing for React Native with react-native-owl in a simple way with an image comparison.

15:31 – Building Human-Centered Documentation with React
Tejas Kumar spoke in a very confident and fast peace way describing how developers rates to write documentations and what they are doing to change it making it fast, updated, reliable and using Markdown and next-js using auto-slugs as properties to read the files and parsing each Markdown tag to a component.

16:00 – Goodbye, useEffect
David Khourshid talked about how complex is the useEffect hook that doesn’t represent his predecessor (didMount, didUpdate, willUnmount) and the problems of infinite loops and nonsense state updates that this hook may cause. Showing that action effects should be put in state transitions (or state handlers)
useEEffect -> effectHandlers

16:36 – Goodbye React Day Norway, Hello React Day New York
Just external comments and mention the event in New York.

Below at the external area we had some foods and drinks where we shared some experiences 🙂
17:00 – MOOW SHOW
18:00 – BBQ + Party

 

Final thoughts:
Everybody was using pagespeed.we.dev to talk about performance issues and how to solve them.
Adding a pagespeed in your pipeline to ensure good number in your app performance might be a good idea for a frontend app.
30 minutes seems to be a perfect time for a speaker.

All speakers were using a wireless microphone close to their mouth, having more freedom to walk through the stage and their hands.
Some presentors had their own small record at the screen and others don’t.
The audience light was always turned on, I’m uncertain if it is good because the people tend to no fall asleep, or it’s bad because it makes it harder to see the screen, maybe a softer light in the audience would be the best option.

I missed a way to get all presentations upfront like a repository github.com/react-norway where I would find all presentations here without trying to get during the presentation taking photos etc or remembering one by one, that also would make easier to share later with my colleagues in my company.

Some microphone was failing from time to time as decreased the experience. 😕
Someone with a good energy between the talks to present the next speaker is important.

In the end a great conference with amazing vibe and stunning view from the beach, costly (hotel and food) but it was worth for sure.

by Hernani Fernandes
Senior Frontend Engineer - Work hard, play hard
LinkedIn:   linkedin.com/in/hernani-fernandes/

Explore related posts