React Advanced

React Advanced Conference 2021

Your Second Source of Truth

Rachel Nabors

Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Don't Solve Problems, Eliminate Them

Kent C. Dodds

We consider what IaC (Infrastructure as Code) is and why we should invest our time/money into it. It’s going to be a workshop-style talk and as the result, the end of it you will have complete infrastructure as code for React application on AWS written in TypeScript <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Infrastructure as Code for React Application on AWS Written in TypeScript

Denis Artyuhovich

Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems: Walking the Line Between Flexibility and Consistency

Siddharth Kshetrapal

Last year, our team rewrote the Coinbase app from Android/iOS Native to React Native. The new app was launched successfully and with higher quality. The native engineers were re-platformed to React Native, and our productivity has increased. The talk will share our journey from the start of the transition, how we mitigate the risks, and the lessons learned. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Coinbase Rewrote the App in React Native

Siriwong (Ching) Wongthongserm

If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick &amp; easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data &amp; use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time &amp; effort! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

(Easier) Interactive Data Visualization in React

Anjana Vakil

We are slowly getting to a point, where TypeScript-support is a must-have feature of a framework and not a nice-to-have. But this is not a simple yes or no question. Let's take a look at the different framework areas where TypeScript can help you develop quality applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Typed is Your Framework?

Andreas Roth

Developers often look at abstractions as being "the closer to the metal, the better," meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A New Kind of Abstraction

Mike Hartington

Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.

Full-stack & typesafe React (+Native) apps with tRPC.io

Alexander Johansson

React is a great library to design user interfaces, but what about rendering sounds? In this talk we'll dive deeper in handling sounds, creating a transformation to convert any input vibration into images. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualize your music with React, a sound design experiment 

Claudia Bressi

Google &amp; Facebook Engineers are able to search over their gargantuan codebase using an internal code search engine. The search engine accelerates the ability of their developers (both old &amp; new) to understand any part of their codebase &amp; start contributing immediately! What about the rest of us? In this talk, I'll walk through the different types of code search, tools &amp; software, and advanced tips &amp; tricks to navigate any type of codebase easily. With the advent of large code repositories and sophisticated search capabilities, code search is increasingly becoming a key software development activity. Every developer in the world that spends an insane amount of time reading rather than writing code should have access to the best code search tools that amplifies their productivity. The audience will walk away with everything they need to confidently onboard, navigate &amp; understand any small, medium-sized and daunting codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Supercharging Developer Productivity With Advanced Code Search

Prosper Otemuyiwa

Why form-wide validation schemas are bad for developers and users - and how we can fix this! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Forms Don't Need to Suck

Andy Richardson

App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Limitless App Development with Expo and React Native

Evan Bacon

All the React you've seen is presented one way: as a linear text file. There's good reason for this. Textual syntax is an ideal medium for constructing abstract logic. It's quick to write, informationally dense, and endlessly flexible. However, brevity has its downsides. What information can't we see in static text? How can visual representations and metaphorical comparisons expand our understanding of how React works? Come find out what happens when we explore alternate ways of seeing React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising React: Metaphors, Models, and Spatial Mediums

Maggie Appleton

Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's talk about Web Components

Jemima Abu

React 18 introduces new APIs for rendering applications asynchronously on the server, enabling a simpler model for architecting and shipping user interfaces. When deployed on edge networking platforms like Cloudflare Workers, we can get dramatic performance and user experience improvements in our applications. In this talk, Sunil will demo and walk through this new model of writing React applications, with some insight into the implications for data fetching, styling, and overall direction of the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Living on the Edge

Sunil Pai

Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.

From Blender to the Web - the Journey of a 3D Model

Sara Vieira

For years, not being able to cache GraphQL was considered one of its main downsides compared to RESTful APIs. Not anymore. GraphCDN makes it possible to cache almost any GraphQL API at the edge, and not only that but our cache is even smarter than any RESTful cache could ever be. Let's dive deep into the inner workings of GraphCDN to figure out how exactly we make this happen. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Edge Cache GraphQL APIs

Max Stoiber

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React

Michel Weststrate

Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.Yet, sometimes we are struggling in handling the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible.Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and re-discuss the way we approach componentisation. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Components, Patterns and sh*t it’s Hard to Deal with

Marco Cedaro

Common myths about Micro-Frontends hold that they are bad for performance or that developers implementing this architectural style don’t care about the performance implications because they are focusing on fixing the developer experience and organizational issues rather than focusing on the user experience, however, the reality is altogether different. Micro-Frontends are not inheritably bad for performance and, as is often the case in software development, making best use of the technology depends on correct implementation. This talk will demonstrate how Micro-Frontends can make your applications faster and more resilient while keeping the benefits of independent deployments. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-Frontends Performance and Centralised Data Caching

Ruben Casas

Decentralized apps (dApps) are continuing to gain momentum in the industry. These developers are also now some of the highest paid in the entire trade. Building decentralized apps is a paradigm shift that requires a different way of thinking than apps built with traditional centralized infrastructure, tooling, and services – taking into consideration things like game theory, decentralized serverless infrastructure, and cryptoeconomics. As a React developer, I initially had a hard time understanding this entirely new (to me) ecosystem, how everything fit together, and the mental model needed to understand and be a productive full stack developer in this space (and why I would consider it in the first place). In this talk, I'll give a comprehensive overview of the space, how you can get started building these types of applications, and the entire tech stack broken apart then put back together to show how everything works. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Dapps with React

Nader Dabit

Gats v4 now has SSR and a new rendering mode called DSG. Between SSG, SSR, DSG, ISR and DPR, the Jamstack has recently seen a flurry of new rendering modes that work for every use case that seemed unviable in the past. But knowing what to pick for your site or a portion of your site and what each of these really do under the hood is confusing and easy to do incorrectly.This track will clear the confusion and dive deep into each of these, discuss nuances and even peek under the hood to see how they work and what scalability and consistency promises they offer and which promises they keep. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gatsby v4's New Rendering Modes 

Sid Chatterjee

Hopin is the fastest-growing startup in the world. Many engineers join every month. Companies with different technologies are acquired every other month. It brings many challenges to our front-end architecture. In this talk I'll explain how we're breaking up our React monoliths and enabling interoperability using multiple React trees and reactive variables. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Hopin is Moving 10x Faster: Microfrontends at Scale

Alex Lobera

This talk looks at how components in React have evolved. We'll look back at previous versions of React, the headlining features, and how milestones like Fiber and Concurrent changed how we wrote React components. Some more details: I want to give attendees a glimpse of how React components looked at different major points in the history of React. Components written in 2013 don't look like components written in 2015 or today. This is a history of React that for some will be a walk down memory lane and for others, completely new information. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

On the Origin of React

Jenn Creighton

Whether your team has recently moved to a distributed setup or you’ve been working remotely for some time, keeping team collaboration up can be difficult. Working in a silo, not physically surrounded teammates can make morale and code suffer. I was fortunate to be on a team that found ways to not only make us feel united in building projects together but also as a team of people who could laugh, commiserate, and be open with each other. In this talk I’ll cover the techniques and tools teams have found that strengthen team bonds and morale while keeping up productivity and collaborative project work. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remote Team Collaboration Techniques

Tara Z. Manicsic

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"> </a>

We Don’t Know How React State Hooks Work

Adam Klein

We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Worlds Most Expensive React Component and How to Stop Writing It

Michael Chan

"In Space, No One Can Hear You Scream." The same goes for your super-brand-new-revolutionary project: Documentation is the key to get people speaking about it.Building well-fitted documentation can be tricky. Having it updated each time you release a new feature had to be a challenging part of your adventure. We tried many things to prevent the gap between doc and code: code-generated documentation, live examples a-la-Storybook, REPL...It's time for a new era of documentation where people-oriented content lives along with code examples: this talk will guide you from Documentation Best Practices – covered from years of FOSS collaborative documentation – to the new fancy world of Components in Markdown: MDX, MDJS, MD Vite, and all.Let's build shiny documentation for brilliant people! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Legendary Fountain of Truth: Componentize Your Documentation!

m4dz 

One of the biggest pain points when developing an app is the tricky business of managing state, race conditions, etc. Finite state machines can help eliminate such bugs entirely while providing a welcome, structured way to build components. Looks cool? Let’s build one, it’s even cooler! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

setState, We Need to Talk!

Nikhil Sharma

POV: Your app has a crash affecting thousands of users, but for the life of you, you can't reproduce it and have no idea what's causing it. Hear the story of an epic struggle to vanquish a non reproducible bug and learn what to do (and what not to do) when facing such a foe. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging a Non Reproducible Crash

Alexandre Moureaux

Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automating All the Code & Testing Things with GitHub Actions

Colby Fayock

How to use MDX in React-Native to great effect and the challenges you didn't know you signed up for.

MDX in React-Native!?

Daniel Dunderfelt

There are some great libraries that help with i18n in React, but surprisingly little guidance on how to handle i18n end-to-end. This talk will discuss best practices and practical advice for handling translations in React. We will discuss how to extract strings from your code, how to manage translation files, how to think about long-term maintenance of your translations, and even avoiding common pitfalls where single-language developers tend to get stuck. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

End-to-end i18n

Luke Ehresman

A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Reusing App State in React Native with Recoil

Sergii Zhuravel

A look behind the scenes of how React server components work.In this session we'll take a look at React server components looking at:<ul><li>- the basic concepts behind them</li><li>- the type of data communicated between the client and server</li><li>- how this data is built</li><li>- a look at what's running on the server side</li><li>- what this might mean for future projects</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Server Components - Under the Hood

Lee Rowlands

This talk gives an introduction about MediaPipe which is an open source Machine Learning Solutions that allows running machine learning models on low-powered devices and helps integrate the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way to create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.

Using MediaPipe to Create Cross Platform Machine Learning Applications with React

Shivay Lamba

How will we build web apps in the future? Let's learn how esbuild and bundlers like Vite built on top of it work to see how it can speed up our dev workflows. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vite - The Next Generation Frontend Tooling

Devlin Duldulao

In this lightning talk, you will see:<ul><li>The lack of visibility on React applications</li><li>How to install the Sentry React SDK</li><li>How Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Track Slowdowns and Crashes in your React apps

Simon Zhong

If you've heard people talk about React18, you've probably heard the word "concurrency". Join us for this lightning talk where we take a quick look at what that means, as well as one of the new concurrent features coming in the new release – startTransition – and what we'll be able to do with it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Coming in React18: startTransition

Kathryn Grayson Nanz

Call it "kickstarting", "scaffolding", "bootstrapping" or simply "typing words in a terminal and getting files to start with", this is often the first opportunity for a framework to either delight or disappoint developers. How easily can they get up and running, can they extend it with their ideal toolchain and how well will it scale? In this talk we'll explore the limitations of current solutions and examine the ways we set out to improve the developer onboarding experience of Shopify's new Hydrogen React framework and SDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Forest for the (Abstract Syntax) Trees

Matt Seccafien

Everyone wants ‘hyper growth’, to be the organisation that is backed market investment and interest - but what is the reality of getting there? What challenges does it provide in terms of people, leadership, system and scale? This talk will explore Snyk’s journey so far from its founding in 2015 and exponential growth in the last 18 months culminating in its Series F funding this past September. Exploring some of the key principles of culture, leadership and recruitment on this hyper growth journey, we will share some of our lessons learned from our experiences so far. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk

Patrick Mullarkey

Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How do Localise and Personalize Content with Sanity.io and Next.js

Simeon Griggs

With StackHawk, engineering teams can run security tests against JS applications and the backing APIs to find and fix vulnerabilities faster. With automated testing on every PR, you can be confident that your app is secure. Join StackHawk co-founder Scott Gerlach for a quick overview of application security testing with StackHawk. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automated Application Security Testing with StackHawk

Scott Gerlach

If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Efficient State Management With Hookstate

Ebenezer Don

React Query manages server state on the client, and auth manages user sign in/sign up/sign out. Where do these two overlap, and how do you separate concerns? This talk proposes a data flow with custom hooks for both auth and React Query to manage authentication status and user profile updates.

React Query and Auth: Who is Responsible for What?

Bonnie Schulkin

To mock or not to mock, that is the question. Whether 'tis nobler for the code of the programmers to engage with spies and stubs in outrageous tests, or to take the real components against a sea of timeouts, and enduring, to validate their code: to commit, to push. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

To Mock or Not to Mock - That's the Question

Rita Castro

Let's face it React is a way of building component driven applications. So technically we are all doing component driven development. But are we. Are our components really isolated, composed and tested in isolation or are they still coupled together just a little bit!! Let's take a look at how you can really be component driven so you can build, scale and reuse React components across all your React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Taking Component Driven One Step Further

Debbie O'Brien

Have you ever wanted to refactor mercilessly but didn't want to break the fragile tower? Or have you ever pushed to production only to spend the next few days cleaning up the regressions? You need end-to-end tests, and Cypress is a great, fast way to build them. With a simple JavaScript or TypeScript interface, you can automate browsers to hit those critical functions in your app to prove it works as expected -- this time and every time. Join us to dive into building Cypress tests and leave with confidence to refactor your way to greatness. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gaining Confidence with Cypress Tests

Rob Richardson

With concurrent mode coming in React 18, let's talk about the complexities behind providing declarative APIs for concurrent rendering. While implementing concurrent mode APIs from scratch for Brahmos.js, I came across lot of use cases and variability which made it one of the most interesting problem to solve, and appreciate more the React's effort on advocating Concurrent UI. In this talk we will see what concurrent mode means for a web app, what are the internal complexities and how I solved it for Brahmos.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cracking the Concurrent Mode

Sudhanshu Yadav

A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using Next.JS and Redux for Epic Noscript Web Apps

Daniel Skogly

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about ISR, a feature that Next.js framework offers us to generate static pages at runtime. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Incremental Static Regeneration: Static Sites on Steroids

Facundo Giuliani

The talk will cover all the possibilities Babel Macro opens up and also gives an overview of Abstract Syntax Tree. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Magic with Babel Macro

Dhrubesh Deb Sharma

"Please do not close or leave this page" may send shivers down your spine, but coding the proper UX flow for async might make you question your daily job. How can we properly handle UX for asynchronous code in highly responsive applications? Let's explore how introducing asynchronous code creates a challenge for UX. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Asynchronous UX

Toni Petrina

This talk will go briefly about the history of how Mojang Studios decided to use web standards and React to build the new UI stack for Minecraft (Bedrock Edition), the challenges we faced around performance and how we landed on a solution that allowed us to continue to write declarative UI, but without the virtual DOM. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using React to Build Performant Game UIs in Minecraft

Paulo Ragonha

Accessibility at Discord

Brandon Dail

Frontend applications are getting more and more complicated, often delivering far more than just a UI. With this growing complexity comes a growing need for knowledge from the developers creating it, as they have to deal with matters like state-management, authorization, routing and more. In this talk, I'll show you how to use GraphQL in your Next.js application to create a data layer for your application, that exists between your frontend and your backend. In this data layer, you can handle complex matters to help you to keep your frontend application clean and "stupid".

Killing BFFs with GraphQL and Next.js

Roy Derks

There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to do Good Without Doing Anything

Yuraima Estevez

Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React &amp; React Native in combination. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Cross-Platform Component Libraries for Web and Native with React

Perttu Lähteenlahti

Modern frontend frameworks like React are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real-world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let Me Show You How React Applications Get Hacked in the Real-World

Liran Tal

We’ve all heard the buzz around pushing application security into the hands of developers, but if you’re like most companies, it has been hard to actually make this a reality. You aren’t alone – putting the culture, processes, and tooling in place to make this happen is tough – especially for sophisticated applications like those backed GraphQL. In this hands-on technical session, StackHawk Senior DevOps Engineer, Zachary Conger, will walk through how to protect your GraphQL APIs from vulnerabilities using automated security testing. Get ready to roll-up your sleeves for automated AppSec testing. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Security Testing Technical Workshop

Zachary Conger

As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to... NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with no false positives / alerts, without slowing you down. Join this workshop to learn different ways developers can access Nexploit &amp; start scanning without leaving the terminal! Table of contents: - What developer-first DAST (Dynamic Application Security Testing) actually is and how it works - See where and how a modern, accurate dev-first DAST fits in the CI/CD - Integrate NeuraLegion's Nexploit scanner with GitHub Actions - Understand how modern applications, APIs and authentication mechanisms can be tested - Fork a repo, set up a pipeline, run security tests and look at the results <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Security Testing Automation for Developers on Every Build

Oliver Moradov

Bar Hofesh

In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web3 Workshop - Building Your First Dapp

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported. The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials. React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React, TypeScript, and TDD

Paul Everitt

In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi. Table of contents: - An introduction to Headless CMS and supported architectures - Getting up and Running with Strapi and Next.js - Integrating Blog functionality into a Next.js app - Deploying your Next.js and Strapi Apps Bonus - Implementing content previews with Next.js Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS

Daniel Madalitso Phiri

Join Sentry’s Evan Purkhiser and David Wang as they walk through Sentry’s 230k LoC Typescript/React codebase. They’ll tell war stories of the good, the bad, and the ugly. Gaze in wonder at their modern usage of Typescript, react hooks, and styled components. Recoil in disgust at their legacy Reflux usage and perplexing Webpack configuration. Step away from the workshop with a working knowledge of techniques to keep a large-scale frontend codebase modern and maintainable. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We will be diving deep