Name: React Summit 2020
Start: 2020-10-14T22:00:00.000Z
End: 2020-10-15T22:00:00.000Z

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2020

How do you level up? How do you jumpstart your learning when getting into something new? Nobody has more than 24 hours a day, so how do you maximize the impact of your limited time? In this keynote, I'm going to tell you a bit of my own story, and some tips and tricks that I've learned so you can be as productive as you can be at learning new things and solidifying that knowledge so it's there when you need it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Consume ➡️ Build ➡️ Teach

Kent C. Dodds

The benefits of SVG are vast: style-able, accessible, animatable. And when it comes to SVG, the Path element is the building block of building blocks. During this presentation, we’ll take a deep dive into the language of the SVG path. Not only will we learn to read path data, but we'll also gain the ability to manipulate paths on the fly with the help of React - no Adobe Illustrator or help from a time-strapped designer necessary! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Language of Shapes: Understanding the SVG Path

Monica Wojciechowska

The main thread, on the web, has a lot of responsibilities. At the same time, web apps are getting more sophisticated every day. Therefore, the main thread gets too busy that will disappoint our user showing janky frames! The off-main-thread architecture ensures apps run smoothly on every device for everyone. In this talk, we will go through the possibilities in browsers such as WebWorker, Worklet, and WebAssembly introducing practical tools that allow us to boost our user experiences. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let the Main Thread Breathe!

Majid Hajian

Google announced that they will fully switch over to crawling and indexing sites using mobile-first indexing March 2021. Now for some companies their mobile site is dynamically rendered which has a high risk of decreased ranking on google once mobile-first indexing is fully implemented. This presentation will share how to assess what changes needs to be made, best practices to increase SEO for Mobile First Indexing, how to increase performance, and how to turn parts of your site from dynamic rendering to mobile responsive in less than two months. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Improve Your SEO

Ruth Mesfun

Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. Together they bring order to the chaos of building multiple web applications across many teams. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Nx + Next.js = ❤

Adam L Barrett

As a full-stack engineer with a bias towards the database...and a career spent working with and evangelizing database and distributed systems...why GraphQL? In this talk, I will share some of my personal journey with React, GraphQL, their respective communities, and my point-of-view on the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL and React - Two Great Tastes that Taste Great Together 

Adron Hall

TypeScript is a JavaScript superset that compiles down to vanilla JavaScript and has become increasingly popular. TypeScript proponents proclaim that it eliminates entire classes of bugs that affect our applications. But what exactly are those bugs? Which ones are particular to building React components and applications? Is TypeScript worth the learning curve?In this session geared towards devs with prior experience building React applications, let’s answer those questions. We’ll walk through the common bugs that infect our apps and learn how the use of strong types with TypeScript can help prevent them. After the session, you’ll be itching to try it out in your next project!

TypeScript + React = ❤️

Ben Ilegbodu

We have been using hooks for a while and with that we have also been using useEffect in particular and in this today I wanna take a look at the trickier parts of useEffect and why they work that way so you can leave with a super understanding of how this magic all works. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Psycological Effects of useEffect

Sara Vieira

CDK (Cloud development kit) enables developers to build cloud infrastructure using popular programming languages like Python, Typescript, or JavaScript. CDK is a next-level abstraction in infrastructure as code, allowing developers who were traditionally unfamiliar with cloud computing to build scalable APIs and web services using their existing skillset, and do so in only a few lines of code. In this talk, you’ll learn how to use the TypeScript flavor of CDK to build a hyper-scalable real-time API with GraphQL, Lambda, DynamoDB, and AWS AppSync . At the end of the talk, I’ll live code an API from scratch in just a couple of minutes and then test out queries, mutations, and subscriptions. By the end of the talk, you should have a good understanding of GraphQL, AppSync, and CDK and be ready to build an API in your next project using TypeScript and CDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK

Nader Dabit

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Making Your React Apps Perform At Scale

Milecia McGregor

In this lightning talk we will be pushing the boundaries of HTMl5 Canvas browser APIs. Join us while we do some experiments with video in the browser to see what’s truly possible. DISCLAIMER: No promises of cross-browser compatibility. Not for the faint of heart. Must be this tall to ride. Attending this lightning talk may result in serious injury or death. All participants must bring a life jacket. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Weird with Video Manipulation and HTML5 Canvas

Dylan Jhaveri

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz.

Blitz.js - The Fullstack React Framework

Brandon Bayer

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising Front-End Performance Bottlenecks

Richie McColl

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps. Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool. And best of all: Flipper is extensible, so let's build our own plugin while at it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Flipper: The Extensible DevTool Platform for React Native

Michel Weststrate

Accessibility in React has been a hot topic in the last few years, but in this talk, we'll be going beyond the basics. We'll discuss what disability means beyond what you've heard before, and then use code examples to learn why semantic HTML is helpful, and when it's just not enough. We'll then look into tooling, and talk about how you can introduce accessibility testing into your teams and existing code. You'll leave with the tools and knowledge to make a difference starting today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Accessibility: Beyond the Basics

Jen Luker

There are many CSS-in-JS libraries for us to choose from. Imagine being able to take your favorite parts of those libraries and using them in one. Learn about the power of Theme UI. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Theming Gatsby Apps with Theme UI

Pariss Athena

A comparative analysis between four methods of styling React components from inline styling to Styled-Components. This talk is best suited to beginner developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Components and How To Style Them

Jemima Abu

Markdown is great for content-driven sites. MDX is even better, letting you embed interactive components directly from your markup. It's usually used for the same linear layouts you often see on many blogs, readmes, and documentation sites. But it doesn't need to be like this. In this talk, we'll see how to reshape MDX so we can use it for very different layouts, things like scrollytelling, slide decks, and more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The X in MDX

Rodrigo Pombo

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why Paid UI Components Aren’t Evil

TJ VanToll

So you built a component library. Congrats! I am sure it is awesome but did you put the same effort into its documentation? Component libraries tend to have giant APIs, dozens of components, hundreds of props and thousands of permutations. That is a lot of information to unpack. We could make the documentation very long or... super interactive. We combined component previews, API documentation, props editing and code editing into a single seamless experience. You can quickly explore various settings of each component while watching the code write itself. This talk will show you how to leverage common tools and concepts such as Prettier, babel and AST transformations to build the documentation that can literally work for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introducing React View

Vojtech Miksu

Every bug is different: Some are lurking around for months, others appear suddenly after the upgrade of a dependency. Some are introduced us, others other teams or systems. Some are painfully obvious and affect all users, others only occur in edge (cases). And the ways of finding, and eventually, preventing them, are just as diverse: be it snapshot, unit, integration, end to end tests or automated visual tests, every kind comes with its challenges and opportunities. Testing UIs is hard, but in the end, only test automation can give us the confidence we need to move fast and refactor our code relentlessly. In this talk we are going to look at what kinds of bugs there are, which tests are most effective for catching which, and how we can implement them using modern front end technologies. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fantastic Bugs and Where to Find Them

Iris Schaffer

Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create Collaborative VR Environment in the Browser with React and GraphQL

Vladimir Novick

All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accessibility as a First Class Citizen

Sophie Au

Is your complex documentation setup a maintenance nightmare and chasing away potential contributors? In this talk, you will learn how to make your React component library documentation more user and contributor-friendly with Gats and MDX. Pair this with accessibility best practices, and your documentation will be inclusively smooth. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Smoothly Inclusive Component Library Documentation

Kathleen McMahon

Do you know that the first novel ever written dates back in 1021. Its author is the Japan noblewoman Murasaki Shikibu. Till then countless of writers put their thoughts on paper and countless of readers experience their stories. People write for decades and we, as software developers, kind of ignore their craft. We write too. Not novels but software. Isn't it this still writing? Believe it or not there is a lot in common between creating fiction and writing code. In this presentation we will see how close we are to giants like Hemingway and Stephen King. Can we get some of their wisdom and apply it to our daily job as engineers. Come to this talk and will get a few practical advices. I hope my presentation will make you a slightly better React developer. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Are All Hemingway

Krasimir Tsonev

JS awsomeness beyond webpages. First we'll write a cool 2D game (in Javascript) - and then - write AI code (in Javascript!) that will be able to win this game for us. Oh, what a time to be alive! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Games Are Smarter Than Us

Liad Yosef

Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks!

Using React Hooks + Capacitor to Access Native Mobile APIs

Thomas Vidas

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `&lt;Suspense /&gt;` component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using &lt;Suspense /&gt;, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the &lt;SuspenseList /&gt; component. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Started with Suspense and Concurrent Rendering in React

Maurice de Beijer

The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like: - Sharing Data across apps- Caching &amp; Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination &amp; Incremental fetching- Memory &amp; Garbage Collection- Optimistic Updates Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them. In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query. By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Rethinking Server State with React Query

Tanner Linsley

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&amp;A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Full Featured Frontend App with Svelte

Mikhail Kuznetcov

Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover: - A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

The biggest React conference worldwide