React Summit Remote Edition

React Summit Remote Edition 2021

Building Better Websites with Remix

Michael Jackson

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Tom Preston-Werner

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements. <h3>Transcript</h3> <h4>Intro</h4> Hi, welcome to my session on Draft.js, .js, Slate.js, choosing the best text editor for your React Project. Just a quick overview, this is a lightning talk, so I'm going to introduce you to three options, discuss their strengths, and we'll have a look a bit at their data model.[00:32] As you probably guess from the intro, the editors are Draft.js, .js and Slate.js. We chose these three because they're primarily well suited to React's component and prop model, as opposed to traditional wysiwyg editors like CK and TinyMCE, which are more focused on giving you HTML as your output.The criteria we're going to evaluate these editors against is their sustainability, so who's funding them, who's supporting them, maturity, the license, the editor features, the release cycle, their data structure, so what the data looks like when it comes out, the ecosystem, are there plugins, are there other things you can do to extend the functionality, browser support, who it's used , or how many packages are using it and the number of GitHub stars?[01:24] The editor features that we're going to look at are whether you can do block styles, so H1, H2, block quote, inline styles like bold and italic, undo and redo support, paste support, whether it supports lists, nested blocks, media such as images, YouTube, et cetera, tables, links. You need to have both the link text and the URI. <h4>Draft.js</h4> [01:52] The first one we're going to look at is Draft.js. This is used Facebook Messenger, it's used in their comments, functionality, status posts, and the Facebook Notes App. It's being used in production on a fairly large scale. It has a lot of features, but that will require custom code. This isn't CK. You do have to roll a lot of this yourself, but you get the things that you do want and not the things you don't. Looking at those criteria, it's funded and supported Facebook. It's &nbsp;0.11.7, which is odd. You'd think there'd be a 1.0, given that it's being used in production. License is MIT, it's bare metal in terms of features, so most of the functionality you're going to have to build yourself, but there's good examples. The release cycle is semantic version. The data structure is JSON and I'll show you what that looks like in a minute. In terms of the ecosystem as a full editor available if you install some extension projects. Browser support, it doesn't support IE 11. And there are some issues with mobile browsers such as iOS, Safari, and Chrome Android. It's used 83,000 packages and has 20,000 stars.Looking at the data model, it's made up of a series of blocks. We can see these blocks. Each has a key, and each of those has some text that goes in it and a type. Within these blocks, there can be a range of entities. This is for things like images or mentions or links. Each one of these has a type. They have immutability, which is outside the scope of this talk. And they can have data for your props.[03:29] In terms of editor features, it supports block styles, inline styles, undo, redo, and paste. It supports lists. It supports nested lists only, so no other blocks can be nested, just lists. And that's only to a depth of five. It supports media. It supports table... it doesn't support tables and it supports links. <h4>editor.js</h4> [03:52] The next editor is .js. .js powers a few organizations, mostly in Eastern Europe. It's written in Vanilla JavaScript, but there are React bridges. The supporting company behind this is CodeX. It seems to be an agency of their own. It has a 2.19 release. The license is Apache 2.0. It's a block based editor in terms of features, so everything is considered to be a block. Release cycle: Semver. Data structure again JSON. There are a lot of plugins for this. Unlike Draft.js, where you have to write a lot yourself, mostly consists of adding extra plugins here. Has 1.5, 1500 packages using it and 15,000 stars.The data structure here, as I said, everything is a block. A block has a type and then it has data, which is kind of the props inside that. This could be an example in terms of a list item. This would show you the items that were inside that list. In terms of content editor features, you get block styles, inline styles, undo/redo, paste, lists, nested blocks, media, tables is available, but it's via a BETA plugin, and links. So the full set is there and you just have to work out whether you're happy with the BETA. <h4>Slate.js</h4> [05:15] The next editor is Slate.js. This one was specifically built to address some of the pain points in the data structure of other editors and Draft.js is mentioned. It does support nesting and collaboration is the first-class citizen. So you can use this if you have a plan to build something like Google docs, where you have collaborative editing. It's not specifically React, but React first-class libraries are available for it and most of the docs use that.In terms of its criteria, it's written ianstormtaylor. He's a GitHub user, so it's behind an individual rather than an organization but, as you'll see, it's quite widely used. The release is, again, still a zero, not a 1.0. The license is MIT. As with Draft.js, it's fairly bare metal in terms of features, so you have to put a lot of them together with custom code, but there are a lot of examples showing you how to do that. Release cycle is Semver. The data structure again is JSON. There's not a wide library of plugins for this, but there's a lot of example code that you can use to pretty much put everything that you need. It's being used 55,000 packages and has 20,000 stars.[06:23] So the data structure here, it supports nested, as we saw. It is made up of nodes and each node is basically has a type and then it has children. The lowest level node is a text node, which just has text in it. At the bottom of every tree, there needs to be at least one text node. But, above that, the props are fairly arbitrary based on the type.In terms of editor features, with Slate.js, you can do block styles, you can do inline styles, you can do undo/redo, paste, lists, nested blocks, media, tables, and links. But, like Draft.js, most of these require you to follow on with examples and write code yourself. <h4>Summary</h4> [07:02] In summary, which editor should you use? If you want stability of a large organization behind your project and a fairly wide adoption, go with Facebook's Draft.js, but don't expect things like nesting and things like collaborative editing are going to be hard.If you want to get going fast and you want a rich set of features out of the box, use .jsBut, if you want the ultimate control and you want nest and support, and you want to leave the door open for collaboration, use Slate.js, but just expect that you'll need to do a fair bit more work to get started. Thank you for coming to my session and look forward to the questions in Q&amp;A. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project

Lee Rowlands

XState: the Visual Future of State Management

David Khourshid

Improve the development process of React applications applying BDD &amp; TDD methodologies. These testing methodologies make you be confident when refactoring a codebase and improving existing code while avoiding side effects and shipping faster. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

BDD & TDD in React

Laura Beatris

Since React Summit last year, React Query has already become one of the most popular and powerful data fetching libraries for React. To celebrate, we'll be going behind the scenes to see how React Query actually works and even build our own useQuery hook in just 150 lines of code. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Let's Build React Query in 150 Lines of Code!

Tanner Linsley

Lessons To Outlive React

Shawn Swyx Wang

Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React

Lee Robinson

Fire-Side Chat with Kent C. Dodds

Kent C. Dodds

When people ask me the most important skill I can learn to become better at my job and get promotions, I always tell them: The art of communication and human interaction. When working as engineers we are interacting with many people on daily basis. It is crucial for us to learn how to negotiate and persuade people. In this talk, we will cover 3 main techniques to become a better negotiator. these techniques can help us interact with others more effectively, get our projects approved, get promoted easier and even help us in our life. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Engineers Learn to Negotiate

Naz Delam

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Scaling WordPress with Next.js

Colby Fayock

Learn how we built Argo, a powerful extensibility framework that allows developers to seamlessly extend Shopify's apps on every platform. Argo provides developers with APIs to execute behaviour on the main app and a component library that renders native UI identical to Shopify's own component whether it's on iOS, Android or Web. Behind the scenes, Argo uses web workers and an open sourced library called remote-ui to create a sandboxed execution environment for external scripts. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Remote Rendering with Web Workers

Trish Ta

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

We Don’t Know How React State Hooks Work 

Adam Klein

Most of us have heard that tests should be isolated, composable, or deterministic, but what does that mean in practice? How do you write a good test and how does the rest of your codebase change once you do? What effect does it have on your developer experience? In this talk I'll walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Test Kitchen: A Recipe for Good Tests

Iris Schaffer

In this talk we will discuss how to combine the power of D3 as a math library with React's rendering capabilities. How can we encapsulate animation for reuse with React functional components? How can we deal with restrictions in data structures to create interesting visualizations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Battle-Tested Techniques for Animation and Data Viz with React

Krystal Campioni

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Setting Up Feature Flags with React

Talia Nassi

If React runs on a server and no one is around to see it, does it still make a sound? In this talk, Fred explores the world of server-side optimizations: what's possible today and what does the future hold? Featuring a sneak peek at an exciting new, never-before-seen project from the Snowpack team to help you build faster sites with React! <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

React Without JavaScript?

Fred K. Schott

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

React Native Architecture at Product Hunt

Radoslav Stankov

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Inside Fiber: An Overview of React's Reconciliation Algorithm

Elad Tzemach

It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Building a Mobile App with Expo, EAS, and React Native

Brent Vatne

Netlify CEO and co-founder Matt Biilmann reflects on the history of React, the promises of the Jamstack, and the complexity that can creep into developer workflows if we don't continue to defend simplicity over time. In this lightning talk, Matt describes the trade-offs developers face to deliver large sites and introduces a new idea for a more scalable future solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Keeping It Simple

Mathias Biilmann Christensen

TypeScript is great, but migrating an existing app to it can be a pain. Codecademy took multiple existing React apps and converted them to TypeScript. We'll cover how to make those kinds of conversions successful from both cultural and technical standpoints. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Stories and Strategies from Converting to TypeScript

Josh Goldberg

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Design Systems - Revamping Products for Consistent UIs

Taley'a Mirza

How to build a UI that LEARNS? Being able to learn and predict the behavior of users has many powerful applications, one of them is the chance to boost the UI performance prefetching code &amp; resources before the user reaches them. In this talk, we describe a high-level implementation of an intelligent prefetcher, using ReactJS and TensorFlow.js. We use neural networks to learn the user's behaviour, and leverages React's lazy-loading API to prefetch components according to predictions. There is a chance for Frontend developers to explore the powerful combination of UI and AI. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Build a UI that Learns - Intelligent Prefetching with React and TensorFlow.js

Eliran Natan

Using Rollbar in React

Jeff Hoffer

With the growing community and great tutorials, it's fairly easy nowadays to start building web applications with React. However, the vital aspect of accessibility is often missing which leads to web applications creating exclusions. Nothing in React prevents us from building accessible web experiences, but we need to learn to harness its power in the right way while dealing with some unique challenges caused creating web pages with JavaScript. This talk will focus on how to solve these issues in the context of React. It'll also emphasis why it is important to build accessible web apps. In the end, I will also share some cool stuff and tools in order to make your web app more accessible. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Building Accessible React Components

Manjula Dube

When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

API-first Development with Headless WordPress

Matt Landers

Have you heard about Atomic Design? How about Extreme Programming and Test Driven Development? For sure you have heard about React - a few things, I bet. In this talk you will get some insight on leveraging the power of Atomic Design to build the right product (using React, duh!) and capitalize on Extreme Programming and Test Driven Development to build it right ( exploring the React Testing Library). <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Building the Right Product and Building It Right: Extreme Programming and Atomic Design

Rita Castro

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Lessons Learnt from Building Interactive React Applications

Siddharth Kshetrapal

In this talk, I will show you how to avoid a monolithic codebase, how to modularize your React app and how that might even help you speed up your CI builds: thus help you scale development as your team grows. We'll be doing this in a very concrete and practical way, using Nx as our toolkit. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Scaling React Development with Nx

Juri Strumpflohner

Learning 100 different languages is challenging, but architecting your React app to support 100 languages doesn't have to be. As your web application grows to a global audience, multilingual functionality becomes increasingly essential. So, how do you design your code such that it is flexible enough to include all of your international users? In this talk, we will explore what it means and what it looks like to build a React app that supports internationalization (i18n). You will learn several different strategies for locale-proofing your application with React contexts and custom hooks. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Internationalizing React

Daria Caraway

Introducing Spectate, an open source library that generates your React state logic using the tests you write. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Write Tests. Generate UI. Profit!

Ed Bentley

Fire-side chat on Recoil

David McCabe

In 2019, our frontend engineers were asking hard questions about the future of our frontend build system. As new engineering teams continued to spin up new frontend microservices, our custom-built platform grew increasingly fragmented. This led to more headaches for our teams, who were struggling to keep up with maintenance patches and security updates. What could we do to get ourselves out of this mess? Come join us as we discuss how we built a new platform with Next.js at its core to solve the challenges we faced. With the momentum of the Next.js community, we were able to extend this framework with a unique plugin architecture that allowed our engineers to hot-swap new packages and tools while allowing us to upgrade entire swaths of the stack at once. At the same time, we've multiplied the productivity (and happiness) of every frontend engineer at Lyft. We'll end with some great things to share that can be taken with you to address the challenges you face scaling your own frontend platforms! <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀

Andrew Hao

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Road to a Better UX with Suspense and Concurrent UI

Nikhil Sharma

New fullstack frameworks like Blitz.js and RedwoodJS are ushering us into a new era for fullstack development. They are mixing old concepts and ideas with cutting edge technologies to make fullstack developers more productive than ever. Watch this talk to go on a journey through time and get excited about what lies ahead. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

The Dawning of a New Age for Fullstack React

Brandon Bayer

In this talk, we’ll see how to build a user authentication system in react using magic, where magic provides a key-based identity solution built on top of the Decentralized Identity (DID) standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. These key pairs are used to generate zero-knowledge proofs to authenticate users instead of having to rely on users providing passwords to Magic or any identity provider. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

React User Authentication for Self-Sovereign Identity with Magic

Mohammad Shahbaz Alam

Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

SVGs to Make Your Blog Stand Out

Elizabet Oliveira

In this talk we’ll explore a variety of techniques one can employ to ensure that their apps are running at peak performance. With a couple of small tweaks, you can make perf a built-in. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Doing the Least Amount of Work Possible: An Intro to Runtime Performance

Ken Wheeler

React provides a great ecosystem for React developers, but challenges often arise for multi-team organizations who get to pick the technology of their choice. As teams and projects scale, and technologies change over time, being able to provide a universal component library as a design system for an entire organization proves to be difficult. Stencil was created to help address this issue, most notably for Ionic, which is a UI library for mobile app development using web-technologies. In this talk we’ll walk through how Ionic is able to create an Ionic React library, using custom elements (web components) as the lowest level. Using the Stencil compiler, the Ionic team is able to generate various bindings for each of the frameworks, such as React, Angular, and Vue. The benefit of this allows the design team to focus on maintaining one codebase, while the Stencil compiler does the heavy lifting to generate the various output targets. Additionally, end-users of each framework binding get to interact with their traditional component model they’re familiar with. React developers use @ionic/react no differently than any other React component, and the same goes for Angular and Vue. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Scaling Components Across Multiple Frameworks

Adam Bradley

Introduction to Remotion, a new library with which we can turn React code into MP4 videos, create our motion graphics programmatically and server-side render them. I give an overview of the priciples, the philosophy and of course we are going to code a video! <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Creating Videos Programmatically in React

Jonny Burger

When we started building the Cleo app, we noticed that a lot of functionality, design and types were shared between web (React) &amp; mobile (React Native). We investigated whether these could be shared within the codebase too… join me to find out what we discovered. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Sharing a Codebase with React & React Native: The Holy Grail?

Oli Bates

GraphQL is being used in some really interesting ways in parts of the developer ecosystem that you may be surprised to hear about, including Ethereum as well as for building comprehensive graphs from various third party APIs. In this talk, I'll show how to use a similar approach to build a cloud programming interface into AWS with GraphQL and why using this approach makes sense coming from a front end developer looking to leverage their existing skillset. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Turning the Cloud Inside Out

Nader Dabit

Panel Discussion: Get to Know: Web Performance and Core Web Vitals

Tamas Piros

Eric Portis

Cassidy Williams

Houssein Djirdeh

Blockchain is arguably a future technology that can be somewhat confusing to get started. Even though there are plenty of resources scattered across the web, but to get started developing distributed apps in React on the blockchain can sound intimidating. In this talk, Vladimir Novick will share how we can get started and what you should know about blockchain architecture. If you always wanted to get into Blockchain development and didn't know where to start, this talk is for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

React on the Blockchain - the Missing Getting Started Guide

Vladimir Novick

React helped popularize the use of components to develop websites and apps. It’s a fantastic philosophy, but while components have made our websites better, the workflow for creating components hasn’t improved much. Let’s get rid of the tedious parts like wiring your components to your CMS, and let developers focus on the important parts. With Prismic Slice Machine, we’re giving developers the best workflow for creating components. In only a few minutes we’ll create a React component, wire it to our CMS, add it to Storybook, and push the component live on our site! <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Streamlining the Component Creation Process

Alex Trost

You want to know if your RN app has the best performance? Check out the slow rendering UI stat on the play store, if your numbers are not so good, come to this talk! I will present Systrace, a tool that can be daunting to use at first glance, but a fantastic tool, once you learn how to master it. I will show how it helped us detect and solve performance issues in our app. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Debugging RN Android Performance

Alexandre Moureaux

Panel Discussion: The Modern Way of Making Websites in React

Sadek Drobi

Erin Fox

James Q Quick

Learn how you as a developer can use our InfluxDB Cloud web interface to ingest, explore, analyze, and understand your data. We'll highlight new capabilities and show you some tips and tricks to get the most out of the InfluxDB Cloud Platform. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Understand and Visualize your Data with InfluxDB Cloud

Kristina J. Robinson

In 2020, Rangle partnered with the Survey Monkey team to migrate a legacy codebase to React. Survey Monkey’s best-in-class digital products were being held back fragmentation and complexity, which created a lot of rework and wasted effort for their engineering teams. Working together, we implemented a number of process and architecture changes that cut the complexity and improved workflows, letting our blended team deliver results with speed and consistently, even early in the engagement. These were not one-size-fits-all solutions, but solves that were unique and fitted to the needs of the engineering and product teams. The success of the project was due to Survey Monkey’s motivated teams that were: 1) Ready to embrace change; 2) Able to keep a firm focus on the outcomes; and 3) Readily understood the complexity of the project. This allowed us to co-create some non-intuitive solutions that engineers at similar enterprise-level companies should know about. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Complex React Migration: New Solutions to Old Codebase Problems

Jason Santos

Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Remember CSS Sprites? Let's Do That with Video!

Matt McClure

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!" Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

By the Power of Headless!

Samuel Snopko

Applying the React principle of “UI is a function of state” to SVGs and Graphic Design. We will talk about using systems of componentization and state management to create and manage SVGs. Viewers will leave the session with a firm understanding of creative coding practices and a new viewpoint for building systems in JavaScript. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Graphics, as a Function of State / Graphic = fn(state)

Romello Goodman

Panel Discussion: The Leland Prediction

Tejas Kumar

Andrei Calazans

Anurag Hazra

Ariene Maiara

You'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS. &nbsp; <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Hybrid Cloud Development with Next.js, AWS, and Tailwind

In this workshop, we’ll look at some of the approaches and techniques that can be applied when making refactors or adding new features to a legacy React codebase to bring it inline with the latest approaches. We’ll cover topics such as how to use React Hooks to share component logic in a way that will allow reuse in class components; how to incrementally introduce other patterns to a React Redux app; and how to build in flexible UI components via abstractions where we are tied to some global CSS or a component library. Along the way, we’ll touch on many React patterns and state management approaches with the ultimate aim of being able to evaluate these options and let our requirements drive the architecture in moving towards a more robust and maintainable codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Incrementally Adopt Modern React Patterns in a Legacy Codebase

Richard Moss

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

React Hooks Tips Only the Pros Know

Maurice de Beijer

In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Build Your Own Live Streaming Platform

Dylan Jhaveri

A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

State Management in React with Context and Hooks

Roy Derks

- Intro - Cleo &amp; our mission- What we want to build, how it fits into our product &amp; purpose, run through designs- Getting started with environment set up &amp; “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

How to Build an Interactive “Wheel of Fortune” Animation with React Native

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Building a Shopify App with React & Node

Jennifer Gray

Hanna Chen

Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

Essential topics covered:- Setting up and developing a react project using create-react-app- Basic JSX syntax- The declarative philosophy, what props and state are- Function components <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Intro to React

Will Voelker

You may read already about the Jamstack. You probably already used Next.js, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why the Storyblok in combination with Next.js is the best combo for your next project. Stop and try it yourself! <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Crash Course into the Jamstack with Next.js & Storyblok

Renaud Bressant (Head of Product), Nathanael Lamellière (Head of Customer Success and Solution Engineer), Nouha Chhih (Developer Experience Manager) will be looking at the different developer jobs that you can accounter when looking for your next developer role. We'll be explaining the specifics of each role, to help you identify which one could be your next move. We'll also be sharing tips to help you navigate the recruitment process, based on the different roles we interviewed for as recruiters, but also as candidates. This will be more of an Ask Us Anything session, so don't hesitate to share your thoughts and questions during the session. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Landing Your Next Developer Job

Nouha Chhih

Francois Bohyn

The way you observe your Web App’s performance over time can make or break the experience of your users. Fortunately, you can continually stay informed about the health of every delta in your UX using Real User Monitoring, and immediately identify any issues that are holding your current users back. With it, you can manage optimizing how long it takes for users to load your App on mobile, round trip times for asset fetching, the average latency between user actions and component updates, and more ( adding a small block of code in the right place). In this workshop you’ll learn how to leverage Real User Monitoring in order to track and resolve the issues that prevent your App’s greater adoption, and retention. We’ll discuss how to think about performance from the user perspective, gauge what metrics are important to monitor continuously, and define a good strategy for alleviating the latencies and issues that affect your users most. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

Shipping High Performance React Apps with Datadog and Real User Monitoring

Ben Michel

As eCommerce all around the world has shifted to a predominantly online-first platform the need to provide a high performance website to your users has significantly increased. And on top of that, google has announced that as of May 2021 Core Web Vitals will have a direct impact on page rankings and SEO making web performance even more significant. Come learn the basics of web performance and how it relates to media. Using a simple React based ecommerce app in conjunction with a media optimizing product, you can learn how to deliver the optimal format and fidelity, potentially improving your page rankings. <a href="https://www.froala.com/wysiwyg-editor?pb=1" title=" "> </a>

The biggest React conference in the cloud