React Summit Remote Edition

React Summit Remote Edition 2020

Whenever there's a conversation about working on React Native, versioning and release cycle usually arise as one of the pain points. But why is that the case? How complicated is it to create a new release of React Native? Surely it looks similar to the release process you are using... or not!
During this talk I'll walk you through the many steps and complexities involved in publishing a new version or React Native, and I'll challenge one fundamental idea – that 1.0 is the solution to all problems.
I hope you're ready, it's going to be wild! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The 1.0 is a Lie

Lorenzo Sciandra

The world is filled with billions of small, connected, intelligent and compute-efficient smart-phones. What if we can tap into this power and do more on the edge? It turns out, ML fits perfectly here. Let us explore the MLKit library to bake in intelligence into react-native applications.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ML on the Edge

Sangeetha KP

Haris is talking about the newly open-sourced library Restyle (<a href="https://github.com/Shopify/restyle">https://github.com/Shopify/restyle</a>); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app. <h3>Transcript</h3> <h4>Intro</h4> Hi folks, my name is Haris Mahmood. I'm a Senior Engineer at Shopify based in Toronto, Canada. I work specifically on the client team on the Arrive app. It's an app that helps keep track of all of your online orders. I also run an online store called Rep It Supply, which sells apparel, pins, stickers, and accessories for developers and other tech enthusiasts. So today we'll be chatting about styles and theming in React Native from the perspective of the Arrive app and the experiences that I gained while working on the app. React... Sorry, the Arrive app is 95% React Native with the remaining portions relying on a couple of Native modules for both iOS and Android. I'll be talking about some of the main problems that we faced when it came to theming and styling for the app and how our Restyle Library helps solve those problems. <h4>The Main Problems around Theming and Styling</h4> [01:18] The first issue that we came across revolved on managing colors. Colors are notoriously hard to name, they're hard to keep track of, they became super hard to maintain as more and more colors got added or old colors need to be adjusted to meet changing needs for the app.The second issue revolved around managing font styles. First of all, we had far too much code duplication throughout the app. We needed to write down multiple different style declarations for every single text component that we had in our app. This required far too much code all over the place and became super hard to manage. One of the first things we did there was to just try and simplify this is to build out a font styles object that defines some of our default font styles and then implement those and use those as necessary for the different text components throughout our app.[02:07] This worked okay, but we started to run into issues when for example, we'd have a new font style. That was exactly the same as one that existed, but had one small change. So we weren't sure whether we needed to introduce a brand-new font style or use the font style that we already have with one override. And the second problem that we had was trying to figure out then how broad or specific the font styles needed to be. Was body far too generic? Was Call-to-Action far too specific? In the latter scenario, if we came across the situation where we needed to use the exact same font style that Call-to-Action already implemented, but it was for something that wasn't a Call-to-Action, we didn't know whether we needed to refactor the entire code base to accommodate a renamed Call-to-Action font style, or just use it as is and kind of deal with the awkward consequences of losing some of that consistency.Dark mode and theming is obviously a huge portion of mobile apps, and we knew that we wanted to implement and tackle dark mode, but we already had a number of issues with regards to themes, with regards to colors and font styles, and the thought of adding more colors and more font style alternatives just didn't seem like the right approach when we already had problems that we were trying to figure out. <h4>Meet Restyle</h4> [03:27] So this is sort of where Restyle comes into play. Restyle is an open-source library. It provides a type-enforced system for building UI components powered by TypeScript. It's theme ability is baked right in from the get go so if and when you decide to implement dark mode or a theme, it's extremely trivial and easy to do so.I'm going to walk you through some of the best practices or concepts that come about through Restyle and how they solved the problems that we had while working on Arrive.[03:57] Restyle expects you to have a defined theme. This is a global theme object with a set of values for colors, spacing, break points, and a number of other things. This theme is then used by passing into the theme provider using the theme prop.So how do colors work now? The first thing that we did was realize that, "Hey, every design system will commonly have a color palette. These palettes will include a number of base colors with lighter and darker shades." So the first thing we did was implement this palette without worrying about the theme. The next thing we did was then use this pallet to define the colors within our theme and the names that we gave each of our colors was very context driven.[04:44] So for example, we had Card Primary Background and Button Primary Background. This scenario made it very easy for us to add new colors to the palette, modify colors in our palette and change the implementation of that palette for a very specific context without worrying about any ripple effects that it might have across the app. This made it very easy to introduce new colors as well, and just keep an overall well-managed state with regards to colors.Spacing became a lot easier when we implemented a number multiplication system. We chose one specific number and all of our spacing essentially just followed a multiples of that spacing number. With regards to naming, we used a t-shirt style naming convention. So we have small, medium, large, XL. This is pretty nice because you can easily extend this to add smaller and larger sizing or spacing numbers using the X notation. So you could implement double XL or XS for a smaller spacing measurement.[05:46] Restyle also provides two predefined components called Box and Text. We realized that the default View and Text components just weren't the best starting points so we needed to override these with the Text and Box components. These utilize the theme right off the bat. So you can pass in-style properties using props to the Text and Box components. Color properties and measurement properties all map to values that you've provided in your theme.You can also pass in a text variant to apply a predefined text style that you'll have defined in your theme. The Box provides a similar experience with the Text component, but adds a number of additional props for padding, margin, alignments and borders.[06:30] So how do we tackle dark mode now? It's super, super simple. The first thing we need to do is build a new theme based off of the default theme. The only thing we're doing here is overriding the colors that we need to change for our dark mode theme.The next thing we need to do is find a way to be able to store that value someplace and toggle the value back and forth. So in this case, I'm using a useState hook to set the dark mode value. Based on that value, we pass in dark theme or theme to the theme provider.[07:01] And that's literally it, your Restyle components now automatically adjust to accommodate the current theme. The Dev experience for this entire process is also super awesome. Since this is all backed by TypeScript, as you're developing your app, as you're styling things, things automatically autocomplete, and you get all the other benefits that TypeScript provides. There's a number of other features that we didn't get a chance to talk about today so I highly recommend checking out the project on GitHub.Thanks so much for having me today and for listening, check out Restyle on GitHub and Shopify's career page if you're looking for a new gig. Thanks so much, cheers. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Styles and Theming with Restyle in React Native

Haris Mahmood

See how Microsoft is using React Native to solve some of their cross-platform problems, how they're working with Facebook to help make React Native for Windows and Mac great experiences, and learn how to get started building a Windows and Mac app.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Apps for both Windows and Mac

Eloy Durán

Kiki Saintonge

In a world where perpetually confused developers can't quite get their React Native development environments working, new libraries emerge from the ashes of lost productivity: envinfo and Solidarity. Escape the complexity and be part of the wave of teams embracing change to save their projects from themselves.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

End Your Development Nightmares with envinfo and Solidarity

Trevor Brindle

GraphQL integration (and API/data fetching in general) becomes quite repetitive and complex as our app scales. New features need to be built that are sort of similar to features that already existed, but what bits they can reuse is not clear (eg: pagination). New members join the team and we’d like them to work on their UI components without worrying about the data fetching logic of the rest of the component tree. Relay takes an opinionated stance to solve some of these problems that are worth understanding and learning from.
In this talk, I'm going to motivate the core features in Relay from the ground-up. I'll do hands-on demos to explain the common challenges GraphQL clients run into, how one would fix them without Relay and then fix them with Relay. I'll also touch upon how Relay works and its design briefly and how Relay’s design goal is not just being a high-performance GraphQL client, but also increasing developer productivity and happiness. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How I Went from Being Skeptical about Relay to Falling in Love with It

Tanmai Gopal

Virtual Reality with React

Haoui Hamza

Exploring React My Own Way

Tathagat Thapliyal

Designing Boardgames and How Tech (and React) Can Help

Johannes Goslar

What is the future of user interactions? Will we continue using web and mobile or will we switch into VR and AR completely? What is our UX today on web and mobile and how it will change when the digital world will bridge into new dimensions. Would we still use keyboard and mouse or gestures or will we use something else? In this talk we will get a glimpse into the future where we will control apps with our thoughts. Literally. It’s not a thought experiment, but a journey into our brainwaves with consumer EEG headset. We will explore how we can use them and AI to create futuristic experiences, which will lay a foundation stone to our future interactions with the digital world. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Controlling Apps with Your Mind and AI

Vladimir Novick

AHA Programming

Kent C. Dodds

Scaling React development across multiple teams can be incredibly difficult. Teams need to share core functionality while staying autonomous. Changes need to propagate through many projects while being tested. Nx is an open-source toolkit that allows organizations to scale development more easily than before! Nx makes setting up Cypress, Prettier, Storybook, Next.js, and Gats faster than ever. You can also develop full-stack using Node frameworks like Apollo and Nest.js and share code between frontend and backend. In this talk you’ll learn how large organizations like Facebook, Microsoft, and Google are able to successfully scale across multiple teams, business units, and products. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scalable React Development for Large Projects

Jason Jean

For years I've been a designer who codes and I believe that designing with code or with a coding mindset can help your team to be more productive. In this talk, I'm exploring this concept and showing my daily workflow that can probably help to bridge the gap between devs and designers. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Designing with Code in Mind

Elizabet Oliveira

React Query: It’s Time to Break up with your "Global State”!

Tanner Linsley

When developers think about broadcasting live from the browser, the immediate assumption is to use WebRTC. While WebRTC is amazing technology, server-side implementations are...lacking right now. We'll talk about a (totally hacky) way to get video from the browser via technology you're using today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Going Live from your Browser without WebRTC

Matt McClure

Accessibility advocates often say "use the platform," but why? In this lightning talk, I'll be showing you implementation differences between the behavior of native HTML elements and their DIV counterparts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Button vs Div: What's the Big Deal Anyway?

Jen Luker

In this talk I will demonstrate <a href="https://twitter.com/UriGoldshtein/status/1242118500795236353?s=20">the new GraphQL Mesh library </a>that was recently announced. GraphQL Mesh changes a lot of the traditional ideas about GraphQL and its relationship with other API protocols.It can automatically generate a GraphQL API from openapi/Swagger, gRPC, SOAP, oData and others without changing the source and merge them all schemas into a single schema - Schema Stitching for any source!In this talk I will share some of the original ideas behind it and my opinions on how the future looks for API consumption and exposure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Mesh – Query Anything, Run Anywhere

Uri Goldshtein

Ionic is a framework for building fast and powerful mobile, desktop, and web apps with web technology. Traditionally, Ionic has been built on top of one framework: Angular. But recently, Ionic added support for React, and aims to bring the same great development experience to the React ecosystem. In this talk, we’ll look at how an Ionic React app works and how this changes the React ecosystem (surprise, it's because of Web Components). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The biggest React conference in the cloud