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. <h3>Transcript</h3> <h4>Intro</h4> Hello. I'm Alex. I'm here to talk about full-stack React and tRPC. I've been making websites for a really long time and been working with React since 2016 or so. I've also worked a bit as an iOS developer and whatnot. And today I'm here to talk about APIs. I know this is a frontend conference, but just bear with me. You'll realize it's not that hard. <h4>What is an API?</h4> [00:44] To break it down, let's start with the question what is an API? So in the context of HTTP, very simplified, an API is just a way of calling functions on another computer. And the way we make and use APIs today might look something like this.We start with an API contract or schema because we want to have some guarantee that our API is actually returning what we wanted to return. And then we might write, do some code generation in order to help our backend logic on what it needs to return.[01:21] Then, once we've done our backend, we write an API query on our frontend, which then might have some code generation attached to it to generate a nice use query hook that we can use at the end.I think there's quite a few steps to doing an API today. And the reason for this as I see it is that we have decoupled our backend and frontend completely, rather that we have made them disjointed. But what if our backend and frontend didn't have to be decoupled?There are tools today where we can write the same sort of language on the frontend and the backend and mobile. And one of those tools is TypeScript. TypeScript is a good language, which you can use everywhere. And I've been working hard over the last 10 months to create some set of tools to simplify the sort of API development with your React apps. <h4>What is a tRPC?</h4> [02:18] And yeah, I'm here to introduce tRPC. tRPC is a toolkit for making end-to-end type safe API in a very easy manner. I'm just going to dig in to show you how it looks like.So when you write tRPC backend, you start something like this. You have a router where you nest all your queries. And here is a query called hello. So we call this a procedure in tRPC. You can also view it as an endpoint. And all that this function does is to return some data.[02:51] And when we then use this in our frontend, we get straight away auto completion of all our API endpoint, and we get the data inferred from your function in the backend to your frontend. And this doesn't rely in code generation. It's just a bit of an abuse on the TypeScript compiler, and it's a thin wrapper around React query. And what you see here works exactly the same in React Native. And if you want to, you can incrementally adopt tRPC to your project, or you cannot use it at all if you don't want to. <h4>Example</h4> [03:26] So let's see a bit more complex example. Here we have a backend that is actually talking to a database. You can see here that we have a post by ID query, and that takes some input data through a validator. And you can see that the types of that validator is inferred straight away to the frontend. And then at the end, you can see that we are talking to a database through an ORM called Prisma, and that gets on data back that is also then inferred straight away on the frontend.I started working on this open source project to scratch my own itch around January. And since then, it's got quite a lot of traction and a lot of companies are using it in production already. It's really well tested, and I would really love you to check it out. It's used right now for everything from COVID vaccination bookings to insurance companies, to grocery delivery apps.[04:28] Obviously this is a lightning talk, so I won't  be able to cover all the features of tRPC's. To mention a few of what you can do, is that they have mutation helpers the similar way that we have the use query stuff that I just showed you. We could do painless SSR, and we can do a lot of other stuff as well.I'd love to hear from you, if you love or hate tRPC. You can reach me on Twitter @Alex.JS or by email on Alex@trpc.io. It was ... Yeah. Thank you. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

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. <h3>Transcript</h3> <h4>Intro</h4> Hi, I'm Daniel, a freelance full-stack JavaScript developer from Finland. My definition of full stack is that I build web apps from scratch to production, meaning in the UI and the styling thereof, backend with Node, API integration, databases, servers, you name it. I also build React Native apps, and I continue to be amazed at how well my existing web experience can be applied in that area. It's such a normal thing to use a JavaScript or React-specific library in React Native that instances where it isn't possible stand out.Ah, good old NPM, the holy land of JavaScript developers, where I can usually find a package for whatever I need to do. NPM provides nice, reusable data solutions for challenges so that I can focus on the business logic, what the app actually needs to do without getting into the weeds of developing custom state managers or routers or styling solutions, or whatever. But what if the thing you need doesn't exist on NPM?This is a talk about something which I took for granted to exist, what was rude enough to not exist, the solution I developed, and the challenges I ran into along the way. And of course, I put it on NPM. <h4>What is MDX?</h4> [01:46] MDX is in the title of this talk, so what is MDX? It is a combination of two technologies: Markdown and JSX. I realize these two may be very familiar to this audience, but let's take a look at the strengths they each bring to the table and imagine what a team up might look like. Content is king, and the ability to create and display content is hugely important for any application. If your content is text based, Markdown is a great tool to use as it provides everything you need while being very simple and easy to pick up for anyone. With Markdown, you can write formative text anywhere that accepts keyboard input. You don't need specialized word processing software for that anymore.[02:35] Markdown is readable for humans as it is, but to actualize that formatting, you just need a Markdown renderer. Markdown is standardized and has been around for a while, so there are lots of libraries available for probably all programming languages and platforms. Markdown is almost as easy to render, at least to write due to again, being just plain text. Nowadays, we expect Markdown to be supported, and it feels as if that just happened overnight. One day, we had as many formatting languages as there were apps with text areas, and the next day Markdown was everywhere. Of course, people have worked hard on this, but it shows how important it was to unify and standardize these simple formatting features and how badly it was needed.I probably don't need to go into why React is great, since I'm speaking at a conference called React Advanced, but I do want to touch on JSX, which React introduced and popularized. Whereas Markdown simplified text formatting and made HTML unnecessary for these use cases, JSX takes HTML to the next level. When I got into programming, mixing HTML and JavaScript was a no-no. It was taboo since these were separate concerns. You had your HTML, which you decorated with styles and scripts, never the twain shall meet.[04:13] When I first saw JSX, it was horrifying since it went against everything I had learned until that point, but I took the leap and tried React and I haven't looked back since. JSX enables declarative code and a composition-based architecture, where the structure of the application is involved in the business logic as a first-class citizen, rather than something separate and disconnected, which you need to surgically modify in order for it to reflect the current state of your app.HTML is static and is, by itself, not enough for modern applications. Attempts have been made to make it more dynamic, some more successful than others. The server-side HTML rendering does work quite nicely, but once the markup arrives in the browser, it is still static and asking the server to do updates, which the client could do much easier and faster. It's a user experience that smells and tastes like the '90s.[05:20] When you try to manipulate static HTML with JavaScript or jQuery, it quickly turns into a game of Jenga with way too many people moving blocks around simultaneously. In contrast, JSX makes it easy to compose self-contained components that include the logic, styling, and layout that they need to accomplish their task. The UI is a product of the state and not something that the developer needs to attend to separately.UIs can be quite complex without it all falling apart. MDX is what a combination of these technologies looks like. Instead of only having bold and italic and maybe something else, you could have any effect that you can do with CSS and JavaScript. MDX really busts the floodgates of possibilities wide open. It's great for blog posts, where you can add a demo inline with the text or use special highlighted text.[06:30] Josh W Comeau's blog is a great example. He talks about how he built it here. In fact, this very presentation is made with MDX. I borrowed a sparkly text effect from Josh's blog, dropped it right in, and it just works, but that's only scratching the surface. MDX makes it possible to serve any interactive content through, for example, a CMS as easily as serving text, making it possible for any writer to compose engaging multimedia content using components that the dev team produces.It looks like this. It's mostly just Markdown, but what's that? A React component in the Markdown? Yes. This example is kind of simple. We can, of course, do any React component, like this video player. Here's Jay Foreman explaining the boroughs of London. It's a great video, but let's watch this later.[07:34] We can do a 3D scene. This is from the react-three-fiber examples. Again, I dropped it right in and it just works. The possibilities are endless, at least for the web realm. But what about React Native?I'm developing an app with my dad, who's a writer, and MDX is the perfect technology for bringing his content to life and making it interactive for users by weaving in engaging widgets and special formatting. I went forth to install the MDX library for React Native from NPM into our React Native app. MDX is React, React Native is React, so surely it exists, right? It didn't. I did some research and the best way to use MDX in React Native is to use the MDX Runtime, which as name implies, runs whatever you give it, like the Markdown and React components at Runtime. This is theoretically platform agnostic, as it needs to be fed the Markdown components that it should use. It comes with a huge, flashing caveat that it runs whatever you give it at Runtime. This thing should not be anywhere near user-provided input unless you enjoy getting hacked. For my use case, I'm only going to feed it my dad's writing and my own React components, and unless my dad really wants to flex his hacking skills, the risk here is pretty low.[09:16] So, to make MDX on React Native a reality, I first needed to make Markdown on React Native a reality. MDX is primarily designed for web use and renders the Markdown into whatever a P, strong, or H1 tag is. React Native has no clue what to do with that. Creating these components was probably the biggest challenge I ran into during this endeavor, since MDX can be tricky with spacing and React Native styling can be tricky overall. I had to battle with cases where the line of text got cut off vertically and an inline component affected the line heights, among many other issues, memories of which I have repressed. I needed the components to look the same, in addition to being good on both Android and iOS.I used the React Native Markdown renderer library, which includes Native Markdown views as a starting point, and coupled together Native components for most Markdown features. Finally, MDX in React Native. As we've established, there were no ready-to-go packages, so I put my first solution up as a gist. We did finish the first version of the app with an MDX solution largely based on what I published in the gist, but we still have much more ambitious plans for it. After a lengthy COVID break, I continued developing the app and wanted to improve the MDX feature specifically.[10:52] Surely after all this time, someone else had also needed MDX in React Native and made a more polished library? Nope. After a few years, the search results for React Native MDX looks like this on Google. On Duck Duck Go. On Brave, and I even went to Bing. My quickly thrown together gist is still the best way to use MDX in React Native. After waiting for someone to create a solution, I now realize that someone was me this whole time. The world is ready for a proper and polished MDX library for React Native. <h4>Introducing RN-MDX</h4> [11:40] Introducing RN-MDX. Some elbow grease later, and it is indeed real. It can be dropped into any React Native app, including Expo apps, and render interesting and interactive content composed by editors, designers, and copywriters.The goal of RN-MDX is to deliver ready-to-use React Native Markdown components and allow the developer to focus on their custom components, which they want to use in MDX without needing to worry about the Markdown part. Then, it either renders MDX content on the fly with the MDX Runtime or precompiles MDX into JavaScript with the RN-MDX command line tool.[12:24] Rendering MDX with the MDX Runtime is the easiest way to deploy MDX in React Native, and RN-MDX makes even easier by providing working and sensible Markdown components integrated with MDX. You don't need anything else, just get the MDX content as a string from somewhere and throw it into the Runtime. Of course, this carries additional overhead and it is very insecure. The Runtime will execute the string that you give it, mounting and running direct components within it. So, you need to make sure that it is trustworthy and won't get up to any funny business.I can't in good conscience recommend using the Runtime, but if you can be sure about the trustworthiness of the content and don't mind the extra overhead, it is definitely the easiest way to go. On the other hand, if you want to go by the book, you can precompile your MDX into JavaScript and use it in your app like any other component. This is, of course, more complicated, but it works much the same way as a React-based static site generator like Gatsby.[13:40] The core of the RN-MDX library is the collection of Markdown components that you need to fulfill the MD part of MDX. Continuing from the components I published in the gist and used in the app that started it all, I spent more time on them to make sure that all Markdown features are covered and that they make solid building blocks for any use case. It's also possible to override any of the Markdown components by providing your own implementation and assigning it to the key of the MDX feature that needs some special care in your particular application.As for styling, the Markdown components can be styled with good old React Native stylesheet objects, or any library that extends them. The styles may also be overridden by the user, just like the components.[14:42] The Markdown components and their styling was one of the challenges with creating this library. React Native can be finicky at times, so there are some common issues with Markdown content that I want this library to provide solutions to out of the box.Spacing, line height, and font size, where the pixel size looks different between Android and iOS are just some of the challenges. Now, I'm pretty good with CSS, but this is what it felt like. Making all Markdown components look their best on both platforms out of the box is an area that has, and probably will, continue to require continuous adjustments. [15:32] I stated earlier the right way to use MDX is to precompile the MDX into React Native components and RN-MDX provides the command line tool and all other facilities that you need for this workflow. Precompilation of remote CMS content is, of course, also possible. It is crucial for any kind of core application, after all. Since we are working with Native apps, this kind of static, precompiled workflow isn't as smooth as it is in the web world with, for example, Netlify, but it is viable using CodePush or Expo.So, what you need for the precompilation workflow is a conflict file that tells the RN-MDX command line tool where the content can be found and where the compile components should end up. I'm still working on this workflow and all input on the subject is welcome. <h4>How does RN-MDX look in practice?</h4> [16:28] So, how does RN-MDX look in practice? I'm glad I asked. Here is a simple app using the Runtime method. Let's look at the demo.Here, we have a very simple app. It's an Expo app, and I have imported RN-MDX. The render MDX component here takes the custom components that you want to use in your MDX and the MDX content as a string, then it just renders them into Native views. On the right, we have the MDX content that we are rendering. So, there's the color text, which is an inline component that wraps text, and then we have a color box, which is a block-level component. We can give them props like normal, like normal React components, and the result is here. Ta-da. Very simple. The red text, according to the prop value, which is red, and then different-colored boxes according to their prop types.[17:43] So, it's very simple, it's versatile, and you can use it for pretty much anything. It doesn't impose a lot of restrictions that MDX or React Native doesn't impose. Without further ado, let's get back to the presentation. <h4>Use cases</h4> [18:02] MDX now exists on React Native. Great. Now, what should you actually use this thing for? The short answer is whatever you want. It's another tool in your toolbox. You could serve the whole app layout from a CMS as MDX files if you want, but the first sensible use case that comes to mind is an interactive online magazine or blog, where the web version runs on Next or Gatsby and you already have a bunch of MDX articles with cool React components.If you want to bring them into your Native app, that is now much easier. You would, of course, need to make the components React Native compatible, but after that it is just a matter of pointing your Native apps towards your CMS and showing the articles in all their glory in a mobile app. Mobile apps aren't really the best medium for long-form text, though. But that doesn't mean there are no opportunities to use MDX outside of magazine apps.[19:09] If you have a chatbot type interface, the discussion can now involve any React component you implement. Anywhere there is text, there is at least an opportunity to add some original styling.It's easy to take NPM libraries for granted. How often have you not found something you needed? It is a truly remarkable resource, and I want to sincerely thank everyone who contributes code, and more importantly time for the good of the whole extremely large community. This is not my first NPM package, but it is my most ambitious one yet. I'm actually quite surprised that it didn't exist. So, the next time you don't find something you need, consider contributing your solution. Turns out you were the one meant to do it all along. That's it for me. Thanks for watching, and I hope you find RN-MDX useful. I know I will. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

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 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. <h3>Transcript</h3> <h4>Intro</h4> Hi, thanks for coming to this talk on React Query and Auth. So React Query and Auth overlap somewhat, and this talk is going to discuss who's responsible for what.So first, I'd like to introduce myself with this amazing steampunk avatar that React Advanced made for me. It's my new favorite thing. My name is Bonnie Schulkin, and I've been in the software industry for around 20 years. I've held a lot of roles, but currently I am a developer and trainer. You can find me at bonnie.dev, which is in the lower right of all of these slides. Twitter, I'm @bonniedotdev with the dot spelled out. And I am incredibly proud to hold the @Bonnie handle on GitHub.[01:10] To introduce this talk, I want to just give a few notes. The first one is that here I'm going to talk about concepts, and I'm not really going to introduce code. If you're interested in the code, I'll have a link to the code example at the end. The approach here is actually making my own system to handle all of the players that are interested in user information and Auth. And this way we can understand all the pieces. But at the end, I will talk about a couple of npm libraries you can use. And then finally, if you're somebody who likes to click links from talks, or if you like to follow along with the slides, you can get these slides in my bonnie.dev site slash talks. And you can just look for the React Advanced talk.I have made some puns in some of the images that you can look out for if you like that kind of thing. So here's a table, for the table of contents.First, I'm going to be introducing React Query for people who don't know about this amazing library.Then I'll talk about the app for this talk and what kind of authentication assumptions it uses.I'll talk about the solution I have to merge React Query and Auth, and then I'll talk about those npm libraries I mentioned. <h4>What is React Query?</h4> [02:40] So let's start talking about React Query. React Query is a library whose job it is to maintain server state on the client. So it uses this making a cache of server data on the client.One of the main tools from React Query is the useQuery hook. And this hook takes a query function that's responsible for actually getting the data from the server. In order to subscribe to that data, the react code runs the useQuery hook.[03:20] Now part of React Query's job is to make sure that the data is in sync with the server. So useQuery actually updates the data from the server. It pulls new data from the server, depending on some triggers. Some of them are automatic, like a network reconnect, or if the page is focused. You can also manually invalidate the data in the cache. And the reason I'm bringing that up is because we'll talk about that later in this talk. When you manually invalidate the data in the cache, then useQuery goes to the server and fetches fresh data.I have some small print here. It's a simplification. React Query is a pretty sophisticated app, so I'm not talking about a lot of concepts like stale data and expiring the cache and so forth.[04:18] There are a couple other React Query concepts that I'd like to talk about that are relevant to this talk. One is mutations. So you useQuery is if you simply want to fetch data from the server. Mutations are if you want to update data on the server. And so React Query has a useMutation hook in addition to a useQuery hook.There's also a concept of dependent queries. So these are queries that you can turn on or off based on the value of an expression. So if the expression evaluates to truthy, then the query will be on and it will do all of those data refetches as it does in order to keep the data fresh. If it's off, if that value is falsy, then the data is off and is not going to be communicating with the server. I should say the query is off. I think I said the data is off. <h4>App assumptions for this talk</h4> [05:19] Now I'd like to talk about the app that I wrote this solution for. So this is a day spa app where you can reserve massages or facials or scrubs. You can tell what was on my mind when I wrote this app. So it has available treatments that it needs to get from the server. It also has staff that it needs to get from the server and a calendar of appointments. And it does all of this through React Query. This is pretty basic server data for React Query.But it also has a sign in feature. A user needs to be signed in order to reserve appointments. And so it has a useAuth hook that manages the sign in, sign up and sign out. The useAuth hook returns, sign in, sign up, and sign out functions that can be used. And the server uses JSON Web Token authentication.[06:23] So those sign in and sign up functions in the useAuth hook actually receive a token and the user data in the response from the server. And the question is, "Who owns this data?" <h4>Merging React Query and Auth</h4> [06:40] So now we're starting to get into overlap between Auth and React Query. Is this client data or server data? Well, I think you could argue that the user who is signed in, the particular user who signed into this client, that is client data, but the details of the user, their name, their email address, their authorization, that is server data.I'm really sorry if you can hear chainsaws. There's tree work being done in the neighborhood.So user data has actually a lot of parties that have an interest. useAuth is receiving that user data when it makes the calls to the server and then the user data also needs to be persisted in local storage, because we want to make sure if the user refreshes the page, for example, that they aren't automatically logged out.[07:41] There's also something interesting about useQuery here. The query function is going to need to use the ID. It's going to need that user ID in order to tell the server whose data to fetch. But it needs the data in order to know the ID. So that's why I have this chicken egg graphic here. You need the ID to get the data, but you need the data to get the ID.So this is a complication that may make you ask, "Why would we even want to involve React Query at all? Why not just store the user data in a context and leave React Query out of the picture?"[08:20] I have a couple reasons that I think React Query is a good idea when comes to user data. The first is mutations. So the user can update their data. They can update their name or their email. And we want to make sure that the client is showing accurate data from the server.So imagine this situation, imagine a user updates their data, and then there's a problem, there's a network error or, heaven forbid, there's a programming error on the server and it prevents an update. The user needs to know what the actual state of data is on the server. And with React Query, we can manage that invalidating that cache value after the mutation, then React Query will go and fetch the actual data from the server. So this will update the data for anybody subscribed to this React Query cache, including, say, if you have the username on the nav bar, any components are going to have the most up-to-date data.[09:34] The second reason I think it's a good idea to involve React Query is for app startup. The app is going to use local storage or some kind of browser storage to maintain the login across sessions so that the user can refresh the page. What if the user updated the data from another browser? So let's say yesterday they went to a different browser at their friend's house and they updated the data, our app is going to look clumsy if we don't have that updated data when they log back in from their new browser. I should say when they log back in from their browser that they were in before they went to their friend's house.So that's something that will just make the app look more sophisticated. But there's also a security issue here. So what if we had some user at the spa who was allowed to update the treatments and they did something really wrong and they got fired? We want to make sure that if they go back into the application, that we update their user data so that they are no longer authorized to update those treatments. It's really hard to get rid of a token in local storage, but React Query can make it so that we can make sure that we have updated data on startup.[11:09] All right. So now maybe you've swung over to the React Query should manage everything. However, we do need to look after useAuth and localStorage. We need to hook those in somehow. Do we want those to subscribe and update the React Query cache individually? And then we've also got that chicken and egg situation for the user ID in the query function.So the solution that I have come up with is to centralize everything with a useUser hook. This is the source of truth. It tracks user data with an internal user state that's exposed as a return value of the hook. And that is the canonical user data. We'll use localStorage to maintain data, not only across sessions but also whenever a useUser is initialized. And we'll also keep the user data up to date with the server using useQuery so that any of those triggers that I mentioned will update the data. And we can take care of that chicken and egg situation disabling that query if user is falsy. Whenever user data updates, it will go through this useUser hook. So in order to make sure that the data is maintained everywhere it needs to be, in the internal user state, in the query cache, and in local storage.[12:55] So because I like visuals, here's the useUser hook. It will both receive data from React Query when React Query gets updated data from the server and will also set data in the cache when it gets user data from other sources. Another source it might get user data from is the useAuth hook, which receives data from sign in and sign up. And localStorage is both getting set anytime user data is updated, and it's also providing the initial value for the useUser hook.To get into that a little bit more, the useUser hook is going to return that user state for people who want to subscribe to that user data. And then it's also going to return updateUser, updateUser function that takes user data and updates the data for all three players. It will also have a clearUser which updates the data for all three players to be, "There is no user." And all of the updates, any user data updates, go through useUser. So when React Query updates the data, it uses the updateUser function from the useUser hook, same with the useAuth hook. <h4>Example project with code</h4> [14:28] All right. So that's my brief introduction to how I solve this issue. If you'd like to look at the code, you can go to this GitHub repository and you can go to completed-apps, lazy-day-spa, and client as far as the directory tree goes. <h4>npm libraries</h4> [14:50] I'll conclude this talk talking a little bit about npm libraries that exist.The first one is React Query Auth. And here's a link to it. This is a fairly lightweight wrapper around React Query. So as a user of React Query Auth, you initialize it giving it sign in, sign out and sign up functions, and then it uses a separate AuthProvider that takes your config and React Query functions and provides a bunch of both data and functions for you. So it gives you the user data and whether or not there was an error, then it gives you functions to re fetch the user to log in, log out and register, which is what I've been calling sign up. And then it also gives you data on whether or not events are currently occurring.The way it uses React Query is it treats sign in and sign up as mutation functions. It uses useMutation for that because used mutation allows you to run the function later. And then it has a call back on success of these mutation functions to update the cache. This does not address persistence in the browser. And here, if you want to take a look at the code, like I say, it's fairly lightweight, it's actually not that many lines of code.[16:23] There's also a Firebase library. And here you go. This actually uses useQuery for all of the auth calls. And the useQuery takes Firebase functions as the query functions. It stores all of the data directly in the React Query cache. And Firebase itself, through those Firebase functions, manages the persistence in the localStorage and session storage. It has other options as well. And if you'd like to look at the code for this, I have a link to that here.As of earlier this month, both of these libraries are still finding traction. So you can see that React Query Auth has about 500 downloads per week and React Query Firebase has about 30 downloads per week. I should say the auth part of it. You can compare this to around 575,000 downloads per week for React Query.[17:35] All right, so to conclude this talk, I just want to reiterate that the reason that this merited an entire talk is because there are three main players when it comes to user data. There's React Query, which can maintain the state of the data on the server. There's Auth functions, which can be in charge of retrieving the initial data. And then there's the persistence across sessions, so that can be localStorage or other persistence tools. Any complete solution needs to address all three of these.So thank you so much for coming to my talk. Thank you to React Advanced for having me and for making that amazing steampunk avatar. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

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>

Building a Sentry: 7 years of open-source React

Evan Purkhiser

David Wang

When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We will be diving deep