Name: React Summit Remote Edition 2020
Start: 2020-04-16T08:00:00.000Z
End: 2020-04-16T21:59:59.000Z

React Summit Remote Edition

React Summit Remote Edition 2020

Welcome to a talk on React Native releases, where the speaker shares their experience and perspective. The complexities of React Native releases are discussed, including the challenges of manual testing and conflicts with dependencies. The involvement of the community and improved communication with Facebook are highlighted. The speaker also mentions the incremental automation of the release process. React Native 1.0 is seen as a promise of a finalized product with long-term support. The long-term plan for React Native's new architecture is mentioned, with a focus on minimizing breaking changes.

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

This Talk discusses machine learning on the edge and its benefits for mobile applications. ML on the edge utilizes the computing power of mobile devices for secure, real-time processing and offline capabilities. ML Kit, Google's SDK, provides easy integration of ML solutions in mobile apps without extensive ML expertise. The Talk covers the setup of Firebase and ML Kit integration in React Native projects, showcasing the possibilities of applying filters and generating avatars with ML on the edge.

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

Today's Talk focuses on styles and theming in React Native, specifically from the perspective of the arrive app. The challenges faced with managing colors and font styles are addressed by Restyle, which provides a type-enforced system for building UI components with themability. The implementation of color palettes, spacing, and dark mode is discussed, along with the benefits of using Restyle's predefined components. TypeScript's autocompletion and other advantages are highlighted, and listeners are encouraged to explore the project on GitHub for more features.

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.

Styles and Theming with Restyle in React Native

Haris Mahmood

Envinfo and Solidarity are tools that help developers manage their development environment more efficiently. Envinfo conglomerates information about the development environment, saving developers from having to type multiple commands. Solidarity provides more control on a per-project basis, allowing developers to check files, variables, and handle custom plug-ins. It also offers neat tricks like paint it red mode for giving warnings without disrupting the workflow. Solidarity is useful for pre-commit hooks and git config checks.

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

This Talk discusses the use of Relay and fragments in data fetching for React applications. It explores the challenges of fetching data from components and the optimization of data fetching. The Talk also covers the use of fragments for component data fetching and the challenges and potential errors that can arise. It highlights the design decisions of Relay that make data access easier and the use of variables in fragments. The Talk concludes with a discussion on refetching fragment data and the combination of fragments and queries in Relay.

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

The Talk provides an introduction to React 360, a JavaScript framework created by Facebook for building 3D and VR user interfaces on top of React. It simplifies the creation of complex UI and leverages the familiar concepts and tools of React and React Native. The folder structure includes a static assets folder for media files, a client.js file for creating locations and surfaces, and an index file as the main file. The code structure is similar to React Native and React, using Flexbox for styling. The application can be run on a web browser or any VR device, and includes features like slides, video layer, and customizable background image.

Virtual Reality with React

Hamza Haoui 

The Talk provides an introduction to React and discusses the speaker's journey of learning React effectively. It emphasizes the importance of understanding the purpose of learning React and following a step-by-step process. The Talk also highlights the need to learn React independently before diving into other tech stacks. Practical learning, tracking coding activity, and learning in public are recommended approaches. The speaker mentions working with technologies like Node.js, ExpressJS, React, EmberJS, VueJS, Nuxt, and Next. The Talk concludes with the speaker's contact information and availability for discussions on operating systems and full stack development.

Exploring React My Own Way

Tathagat Thapliyal

In these weird times, we all have one question: what to do with that much time at home? The answer is to invent more board games and potentially use React. Modifying existing games and adding AI can bring new possibilities and challenges. The BoardGame.IO library provides a simple interface for creating playable versions of board games on a computer and adding AI. Computer simulations cannot capture the social interaction and dynamics of board games played on a table.

Designing Boardgames and How Tech (and React) Can Help

Johannes Goslar

This Talk explores controlling apps with the mind and the future of UI and UX. It discusses the integration of VR and AR into UI and UX, the understanding of neurons and EEG headsets, connecting to Muse via Bluetooth, measuring brain waves and blink detection, feeding data to machine learning, and mind control with AR. The speaker emphasizes the importance of learning React Native, AR, React, Bluetooth, and drones for those interested in exploring these topics.

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.

Controlling Apps with Your Mind and AI

Vladimir Novick

The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.

AHA Programming

Kent C. Dodds

Scalable React development made easy by NX, a monorepo-based approach used by large tech companies. Challenges of sharing code in multiple repos include duplicate tooling, separate workflows, and version conflicts. Benefits of a monorepo include unified tooling, single version of dependencies, and simplified development. NX enables monorepo workflows with intelligent build systems and easy code sharing. It also supports custom code generation, enforces standards and dependencies, improves build times, and provides modern tools and plugins.

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.

Scalable React Development for Large Projects

Jason Jean

Welcome to Designing with Coding Minds. Having a designer who codes in your team can help work faster and bridge the gap between developers and designers. Designers who can code can improve design systems and create components for design tools. GitHub is used at Elastic for collaboration between designers and developers. At Elastic, the code is prioritized over the final design, allowing the code to go live first.

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.

Designing with Code in Mind

Elizabet Oliveira

Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.

An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.<a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

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

Tanner Linsley

Mux provides an API for live streaming and aims to keep users in their own applications. Live broadcast and live chat are different, with live chat using WebRTC and live broadcast using RTMP and HLS. WebRTC can be implemented using headless Chrome or the getUserMedia process. Mux targets developers building platforms and suggests using semantic HTML. Ionic supports native apps and custom native views.

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

Today's Talk discussed the preference of accessibility advocates for using the platform over divs, highlighting the ease of converting divs into buttons. The CSS for making divs look like buttons was also discussed, but it was concluded that using the platform is easier and more accessible. The Q&A session covered topics such as target market and using divs as buttons for specific cases. The Talk also briefly mentioned the tapping feature of Match and the support for native apps in Ionic. The closing remarks concluded the Talk. 

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

The speaker introduces GraphQL Mesh, a library that extracts schemas from existing services and merges them into a single GraphQL endpoint. This allows for type safety and the ability to add federated metadata to existing services. GraphQL Mesh can run as a central gateway or a distributed source. The speaker also mentions the use of platforms for streaming and the accessibility benefits of using semantic HTML content. Additionally, there is a mention of Ionic's support for native apps. Overall, the Talk covers the benefits and capabilities of GraphQL Mesh and its applications in different scenarios.

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 React is a framework for building cross-platform apps using HTML, CSS, and JavaScript. It has hit its stable release and brings Ionic to even more developers. The Q&A session covers topics like the target market for Mux and the use of div as a button in React Native web. Ionic supports native apps and allows for a mix of web UI and custom native views.

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>

React Summit Remote Edition 2020

The biggest React conference in the cloud