React Live 2019

Cocktail of live coding and React🍹

It was Friday the 13th of September, I woke up thrilled. It was the first edition of React Live, where live coding was on the menu of the day. It was 7:30 am, I took the bike towards the Amsterdam Theater while enjoying the first sun rays on a surprisingly warm day for September in Amsterdam. The doors were open from 08:15, I was part of the organization, and there was already a long queue.

The check-in

878 people were waiting for their badges. To do it in less than 45 min was a big challenge, a big shout out to my colleagues for keeping a smile during the whole process.

3, 2, 1… let the show begin🎬

After everyone got comfortable in their cinema chairs, it was time to start. Luke Thomas founder of React Live and Passionate People kicked out the show and gave a small introduction about what we were going to see.

Luke Thomas holding his daughter

I am going to give an overview of the talks I assisted.

Design systems, who dis? 🍭

Siddharth Kshetrapal (SID) member of CodeSandbox started introducing what a design system is:

“A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product”, says SID.

SID believes that proper design systems are created using tokens, components, documentation and design assets. He put some emphasis on using tokens for avoiding creating from zero new colors, font sizes, spacers, etc. (more info on his article).

An example of how to write a token for font sizing:

const tokens = {
  fontSize: {
    small: 14,
    medium: 16,
    large: 19,
    huge: 24
  },
};

One interesting feature that SID shown was one script where you could export all your emotion JS styles into pure CSS, enabling the utilization of your design system with any other app.

Animating an SVG 😺

Elizabet Oliveira is a Senior UX/UI designer at Elasticsearch. In her talk, she brings life to an SVG of a cat using Framer Motion API.

The howto can be resumed in the following steps:

1. Convert your SVG to a React Component using JSX
2. Add motion to your package.json
3. Use animate in any part of your SVG like a g, path, rect, etc.

<svg width={400} height={110} {...props}>
  <path 
     d="M0 0h300v100H0z"
     animate={{ scale: 2 }}
     transition={{ duration: 0.5 }}
  />
</svg>

Building an IOS/Android app in 25 min 🤖

Jamon Holmgren member of Infinite Red, surprise us creating an App in React Native in 25 minutes (assuming that we have already installed React Native in our machine).

His secret for creating an app so fast it’s the use of Ignite CLI. This tool creates a boilerplate for you which allows you to add easily modules like i18n, vector-icons, maps, among others. Generating a new screen is as simple as executing:

ignite generate screen MyNewScreen

Jamon live coding an NBA Roster App

Microfrontends 🥖

David den Toom Co-Founder at Passionate People delighted us with a talk about how Microfrontends are created and used at Ahold, AH (Albert Heijn).

When David started at AH he faced the challenge of rebuilding a chaotic monorepo. He chose to renovate the architecture using microfrontends, which according to him they are good for:

• Splitting domains within the same brand. For example, my account, products, recipes are different sections and they don’t interfere with each other.
• To create ownership amongst teams. Every team is responsible for his own feature, which increments the knowledge and expertise, making easier to spot errors and focus on the quality.
• To develop and deploy new features more often. You can develop and deploy features to production completely independent from other teams

More information can be found in his article about microfrontends.

Food break🍔🍗🍝

It’s the second time I visit this venue, the first time was for Vue JS Amsterdam and the quality of the food is as good as the speakers: TREMENDOUS. I had a nice size burger where you could choose toppings like cheese, bacon, onions, pickles, lettuce, different sauces, etc. After that, I continued with a flatbread with spiced chicken, cauliflower and various vegetables. I’m not a vegetarian but I saw the waiters offering veggie burgers and some fresh vegetarian pasta.

Recreating Mobx 🐉

Max Gallo member of DAZN impressed us with an uncommon talk where he recreates two of the most common functions from Mobx.

Max codes from scratch a custom implementation of autorun and observable in less than 20 lines. The explanation was quite clear and detailed. He gives us a life lesson saying that sometimes when we are using a function from a library, we should take it apart and build it ourselves. Then we will really learn something!

Max Gallo recreating autorun from Mobx

Advanced React Trivia 📱

Lydia Hallie surprised the public with a live test about React using Kahoot. The questions were funny, interesting and a bit tricky. The topics were mainly about performance, hooks, rendering, general React knowledge, and Virtual DOM.

For example one of the questions was: When does useEffect runs for the first time? If you want to know the answer you will need to ask her on her twitter https://twitter.com/lydiahallie 😜

Kitze, a life lesson 🚁

A book could be written out of the talk from Kitze, it was a rollercoaster of relevant topics, emotions and a big critic to the current dev scene.

Hooks

Kitze gives a brief explanation about what Hooks are and are not, putting special emphasis on “Hooks are not a solution for global state management”.

State management

Kitze compared the pros and cons of the current most hyped state management libraries: Redux, Mobx, Overmind, and Graphql.

Apparently, Redux has lost some popularity and it’s only used by developers that make a living writing lines of code. Remark that most of the speakers used Mobx during their presentations.

FOMO

A shocking new library gets mentioned on Twitter, a colleague starts talking about how GraphQL saves his life and family, your neighbor is deploying his application using Kubernetes-Hooks (?). Do you feel the need for using a library because of the fear of missing out on something amazing? This is called Fear Of Missing Out (FOMO).

“Did you hear about Redux Helicopter 7? It’s awesome you should try it out in your project”, Kitze joking.

FOMO leads developers to overdesign, unnecessary refactor headaches and loss of focus in your project.

Your users

Kitze tells a story about two colleagues:

A - I used React with Redux, Redux Saga, also included Redux Helicopter, the components were made with emotion, and the web was deployed with Kubernetes. The page renders in less than 500 milliseconds thanks to the SSR.

B - Wait a second, for what was this website for?

A - It was the landing page for a hospital.

Your users don’t mind which UI or State Management library you used for creating their website. At the end, they just need something that works.

The goodbye🍸

After a long day of learning, paying attention and creating a really long list of TODOs, it was time to relax and drink some beers with the people from this amazing community. The afterparty was great, I met some amazing devs, exchanged some funny anecdotes and comments. I’m hoping next year React Live comes back loaded with new and fantastic topics.