React Conf: An Energetic Reactive Community

React Conf 2019 happened!

If you found yourself in Lake Las Vegas this past weekend, chances are you saw some of the coolest new UI designs for Facebook, learned about how React Native apps are helping change world hunger, and learned loads about React Suspense. React Suspense? That is React’s system for handling the loading of things like code, data, and images. (Don’t worry, we’ll talk about all this stuff!)

Located about 20 minutes from the famous Las Vegas Strip, Lake Las Vegas sits in a quiet little nook of the valley. Held at the Westin hotel, React Conf had over 600 attendees that came from all over the world to learn about all things React. Facebook sponsored the conference and they put on a great show!

The line up of speakers was fantastic and you could feel the energy in each of them! From Tejas Kumar showing us how to display dogs and gifs using GraphQL all the way to Sophie Alpert live coding everything from her slides to her demo code to build her own ReactDOM. WHAT?!

Each speaker was on-point. And while I won't go over each speaker, they were all equally fantastic!

"Held at the Westin hotel, React Conf had over 600 attendees that came from all over the world to learn about all things React."

Tweet This

Day 1

Tom Occhino and Yuzhi Zheng — Keynote

The day started with the keynote by Tom Occhino and Yuzhi Zheng.

Tom Occhino

Tom started his talk out by speaking about the first React conference. How at that conference React Native was introduced to the world! React’s goal is to create great developer and user experiences.

He spoke on the DX (Developer Experience) and that it needs three things:

1. Low barrier to entry
2. High productivity
3. Ability to scale

My favorite quote from his talk was: “Learning React does not mean you don’t need to learn about JavaScript or anything about the web and learning React Native does not mean you don’t need to learn iOS, Android, or Windows. What it means is that you don’t need to develop a deep level of understanding of all of these things first. You can get started quickly.”

Yuzhi Zheng

Yuzhi’s talk covered some of the projects that the React core team has been working on over the past year! Yuzhi is the Engineering Manager for React core team and the Relay team at Facebook.

Some of the exciting projects that the React core team is working on are:

• Accessibility by adding in features so developers can add in accessibility easily
• Improve initial render time by using server-side rendering the team is improving load times
• React Suspense will help improve the user’s experience by handling the loading of different elements.

Frank Yan and Ashley Watkins — Building the New Facebook With React and Relay

Frank Yan

The original Facebook was built with PHP. It soon grew to include CSS, vanilla JS, Flux, React, and Relay.

Facebook wanted a better user experience by adding:

1. Modern Design System
2. Improved Accessibility
3. Faster Page Loads
4. Seamless Interactions

Facebook had to re-think and re-build to add these in. They used React, GraphQL, and Relay.

Ashley Watkins

Ashley followed Frank and started with how React, GraphQL, and Relay were going to help Facebook fetch and manage the data. When she talked about data she meant anything needed from an API like the user's name.

She had a lot of awesome videos showing how the data loads on the page for the user and how Facebook is changing that loading experience by utilizing GraphQL and Relay.

One important concept for facebook is "Time to First Paint." They wanted to have a better view while items loaded for the user so that it was more fluid and effective.

Tania Papazafeiropoulou — How Our Team is Using React Native to Save the World

Food waste is a huge problem in our world and Tania is taking the first steps in order to solve that problem. There's a team that built a React Native app in only three months that is intended to help this food waste problem.

1/3 of all food produced is wasted. We can do better. Tania and her team created an app called OLIO. OLIO allows for people to connect and give away their extra food.

The team was able to re-use components by using container patterns, they were able to use Hermes that helps with memory usage and creates a smaller app size, and to have the ability to use OLIO on the browser. This is great! You could tell the crowd at React Conf was excited for OLIO.

Tejas Kumar — Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs

Coming back from the morning break, Tejas started us off. He talked about "REST and GraphQL and Stuff."

He built an app live on stage that pulled data from the Giphy API using React Hooks, automatically generated from an OpenAPI document. These hooks were fully type-safe and enabled predictable code and end-to-end type-safety.

The main takeaway from his talk?

• Types are your friends
• Tests are your friends
• Nothing is impossible
• Get creative

Sophie Alpert — Building a Custom React Renderer

💥 Live Now! 💥 @sophiebits LIVE CODING! 💥 to a packed room 💥 pic.twitter.com/WUQxgTUkNk

— Kapehe @ React Conf (@kapeheok) <a href="https://twitter.com/kapeheok/status/1187440627346100225?ref_src=twsrc%5Etfw">October 24, 2019</a>

Have you always wanted to build your own ReactDOM in less than 30 minutes? Well, Sophie did just that.

Her talk was 100% live coded, even the "slides," and she manipulated the default React App.js file view to show her DOM in action.

She created a ReactDOMMini file where she manipulated her own DOM and allowed for the creative changes. Those changes?

1. Click on the React spinning logo and make it disappear
2. Created a blinking color effect on the "Edit src/App.js and save to reload" line in the file.

Day 2

Brian Vaughn — React Developer Tooling

Focusing on the developer experience, Brian focused on three major things for React Developer tooling:

1. Write code quickly: Speeding up the process of writing components
2. Debug code effectively: Streamlining the process of debugging and performance profiling applications
3. Update code easily: Making it easier to stay up to date on the latest React features

He doesn't want React developers to stop what they are doing but rather speed up what they are doing with these new tools.

He also showed us how we find the components and inspect them directly in the console. You can also change the type of props and add new props in the React developer tools.

Big new feature! Hooks are supported at the same level as props and state! Ok, but what does this mean? Values can now be edited and nested arrays and objects can be expanded!

There are so many more new and improved updates! Check them all out!

"React Developer Tools will help developers speed up what they are already doing."

Tweet This

Alexandra Holachek — Progressive Web Animations

There are a lot of things happening behind the scenes when it comes to mobile animations. Notice how there's a little bounce to some elements when your finger lets it go on the screen? Or a carousel of photos that keep scrolling even after our finger has lifted off the screen?

There are effects like the rubberband effect. It's what I was talking about before where you can pull up on a menu or a footer and it'll bounce in a rubberband way to show its max expanded limit.

Alexandra showed that there are tests they run that will "predict" what the user is trying to do. For example, if you are scrolling through your inbox, you cannot possibly do a perfect up and down swipe every single time. So it predicts that you are not actually swiping to delete when scrolling through your inbox.

The talk about animations by @alex_holachek was absolutely stunning. Must watch. Demo repository: https://t.co/h1tc0RAKa7

— Dan Abramov (@danabramov) <a href="https://twitter.com/danabramov/status/1187805350944227328?ref_src=twsrc%5Etfw">October 25, 2019</a>

Luca Damasco — Creating Games, Animations, and Interactions with Wick Editor

Wick Editor is an open-source tool that allows you to create things like games and animations. It's a two-person team and they have been working on it for about four years now!

Luca showed us some amazing animations that can be made with Wick Editor! He showed us this cat animation thing where the cat roams the hills, runs into trees, and the user is meant to try and catch the cat.

Developers of all ages can work on Wick Editor! He shows a game that a child had created where you move a rabbit around to collect carrots and crowns!

Overview

This was my first attendance to a React conference, and I must say, the community was an inviting, energetic, and very intelligent group of humans! The hallway track was valuable! Brand new developers were given opportunities to speak to the React core team, developers from Amazon, or even catch up with their developer heroes.

You can find the YouTube videos from day one here and day two here. I have listed in order, the speakers so you may easily jump around the video to find your desired talked. But trust me, you'll wanna watch them all!

Day 1

1. Tom Occhino & Yuzhi Zheng — Keynote
2. Frank Yan & Ashley Watkins — Building the New Facebook with React and Relay
3. Tania Papazafeiropoulou — How Our Team is Using React Native to Save the World
4. Tejas Kumar — Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs
5. Sophie Alpert — Building a Custom React Renderer
6. Nat Alison — Is React Translated Yet?
7. Maja Wichrowska & Tae Kim — Building (And Re-Building) the AirBnB Design System
8. Brittany Feenstra — Accessibility Is a Marathon, Not a Spring
9. Becca Bailey — The State of React State in 2019
10. Lee Byron — Let's Program Like It's 1999

Day 2

1. Brian Vaughn — React Developer Tooling
2. Joe Savona — Data Fetching with Suspense in Relay
3. Cameron Yick — Automatic Visualizations of the Frontend
4. Jenn Creighton — React is Fiction
5. Alexandra Holacheck — Progressive Web Animations
6. Luca Damasco — Creating Games, Animations, and Interactions with the Wick Editor: A UX Talk
7. Jed Watson — Building React-Select
8. Lizzie Salita — Promoting Transparency in Government Spending with React
9. Alex Anderson — Wonder-Drive Development: Using React to Make a Spaceship