June 17 - 21, 2022
React Summit
Amsterdam & Online

React Summit 2022

The biggest React conference worldwide

The biggest React conference worldwide

This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Impact: Growing as an Engineer
27 min
Impact: Growing as an Engineer
Top Content
This Talk explores the concepts of impact and growth in software engineering. It emphasizes the importance of finding ways to make the impossible possible and the role of mastery in expanding one's sphere of impact. The Talk also highlights the significance of understanding business problems and fostering a culture of collaboration and innovation. Effective communication, accountability, and decision-making are essential skills for engineers, and setting goals and finding sponsors can help drive career growth. Feedback, goal setting, and stepping outside of comfort zones are crucial for personal development and growth. Taking responsibility for one's own growth and finding opportunities for impact are key themes discussed in the Talk.
Routing in React 18 and Beyond
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Remix Fundamentals
136 min
Remix Fundamentals
Top Content
WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Inside Fiber: the in-depth overview you wanted a TLDR for
27 min
Inside Fiber: the in-depth overview you wanted a TLDR for
Top Content
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
Let’s Talk about Re-renders
23 min
Let’s Talk about Re-renders
Top Content
This Talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and useCallback hooks. The importance of React.memo in preventing unnecessary child component re-renders is emphasized. Creating components in render functions is identified as a major performance killer, and the benefits of moving state down and wrapping state around children are explained. The Talk also covers optimizing component rendering through memoization and provides a recap of the key points.
Build a Headless WordPress App with Next.js and WPGraphQL
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Build a Design System with React and Tailwind CSS
27 min
Build a Design System with React and Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
Detox 101: How to write stable end-to-end tests for your React Native application
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
You Do Have Time to Build it Twice
21 min
You Do Have Time to Build it Twice
Top Content
Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.
You don't want to Server-side Render your Next.js App
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
5 Years of Building React Table
24 min
5 Years of Building React Table
Top Content
React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.
Sharing is Caring: (How) Should Micro Frontends Share State?
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Top Content
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.
Hands-on with AG Grid's React Data Grid
147 min
Hands-on with AG Grid's React Data Grid
Top Content
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
How React Applications Get Hacked in the Real-World
7 min
How React Applications Get Hacked in the Real-World
How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.
Scale Your React App without Micro-frontends
21 min
Scale Your React App without Micro-frontends
This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.
React Microfrontend Applications for TVs and Game Consoles
25 min
React Microfrontend Applications for TVs and Game Consoles
This Talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP microfrontend architecture is introduced to manage the complexity of a complex catalog and enable efficient deployment and version management. The deployment and release process involves using AliB and updating metadata in the deployment dashboard. The integration to React and TV development process involves using the AliB package and having independent lifecycles for packages. Shared code is used across different targets, and testing is done in a remote virtual lab. Focus management and key moments detection in sports are also addressed.
Walking the Line Between Flexibility and Consistency in Component Libraries
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
Becoming a Form Wizard: Intuitive Multi-Step Workflows
26 min
Becoming a Form Wizard: Intuitive Multi-Step Workflows
This Talk explores the concept of form wizards and their role in creating intuitive, multi-step workflows. It discusses the use of state machines and various implementation options, including Formic and the Dream API. The process of building a form wizard using React context, reducers, and custom hooks is explained. Integrating state machines and the introduction of the Robo Wizard library are also covered, highlighting its flexibility and compatibility with different UI frameworks.
Find Out If Your Design System Is Better Than Nothing
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
The Art of Functional Programming
26 min
The Art of Functional Programming
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.
React at Scale with Nx
160 min
React at Scale with Nx
WorkshopFree
Isaac Mann
Zack DeRose
2 authors
The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling.
We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.
Don't Forget React Memo
7 min
Don't Forget React Memo
The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.
How to achieve layout composition in React
8 min
How to achieve layout composition in React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
The Apollo Cache is Your Friend, if You Get To Know It
23 min
The Apollo Cache is Your Friend, if You Get To Know It
This Talk discusses various aspects of Apollo Cache in GraphQL and Apollo Client 3. It covers topics such as cache fetch policies, normalization, updates, and garbage collection. The importance of proper data storage and management in the cache is emphasized. The Talk also explores the challenges of managing lists and the need for custom update functions. Overall, it provides insights into optimizing the performance and efficiency of Apollo Cache in software development.
Full-stack JS today: Fastify, GraphQL and React
25 min
Full-stack JS today: Fastify, GraphQL and React
The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.
Handling Data at Scale for React Developers
23 min
Handling Data at Scale for React Developers
This Talk discusses handling data at scale for React developers, including scaling databases and the need for search. It explores different ways to fetch data in React, such as using useEffect, fetch, and setState. The Talk also introduces Suspense for data fetching and how it improves user experience. It covers controlling React Suspense, handling search, and using render-as-you-fetch. The Talk concludes with a discussion on the RFC status and fetching in event handlers.
How to Share Code between React Web App and React Native Mobile App in Monorepo
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
High-performance Next.js
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
GraphQL - From Zero to Hero in 3 hours
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
Pawel Sawicki
Pawel Sawicki
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
A Frontend Developer’s Guide to Web3
22 min
A Frontend Developer’s Guide to Web3
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.
Avoiding CSRF with Remix
7 min
Avoiding CSRF with Remix
Welcome to my session on avoiding CSRF with Remix. Remix helps protect against CSRF by thinking about actions in terms of HTML form elements. To avoid CSRF with Remix, set the same site attribute on cookies and consider using a token in addition to the attribute. The token-based approach involves generating a unique token per session and form, transmitting it with the form, sending it back when the user submits the form, and securely validating it on the server side.
Large scale projects challenges (NextJS - Contentful)
20 min
Large scale projects challenges (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
The Journey of CodeSandbox Projects
32 min
The Journey of CodeSandbox Projects
Code Sandbox is an online code editor that allows for easy sharing of code. It started as a side project and evolved into a company with significant growth. Code Sandbox Projects integrates Git and allows for contributions back to the original sandbox. Code Sandbox uses a micro VM for fast collaboration and hibernation. The future of Code Sandbox includes improved performance and integration of a faster bundler.
Stop Abusing Client State Management
21 min
Stop Abusing Client State Management
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.
Marrying WASM/WebGL Games with React UI
22 min
Marrying WASM/WebGL Games with React UI
Jonny discusses marrying WebAssembly and WebGL games with React, emphasizing the importance of choosing the right tool for game development. He introduces the Godot game engine as a powerful choice for game development and highlights the limitations of Godot. Jonny demonstrates how to combine React with Godot and showcases the ability to dynamically switch between different games on the same website. He explains the process of exporting a Godot game to the web using WebAssembly. Jonny also discusses the communication between React and Godot games and highlights the benefits and future improvements of using this approach.
Bringing your React Web App to native with Capacitor
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.
Serverless for React Developers
107 min
Serverless for React Developers
WorkshopFree
Tejas Kumar
Tejas Kumar
Intro to serverlessPrior Art: Docker, Containers, and KubernetesActivity: Build a Dockerized application and deploy it to a cloud providerAnalysis: What is good/bad about this approach?Why Serverless is Needed/BetterActivity: Build the same application with serverlessAnalysis: What is good/bad about this approach?
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
32 min
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
This Talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven workflows and the use of Redwood Cells to handle state and simplify complex tasks. The Talk also highlights the seamless integration between the front end and back end using mock data and the optimization of workflow for performant teams. It concludes with a mention of Redwood's authentication features and the importance of community and collaboration.
Fast React Monorepos with High Quality DX
22 min
Fast React Monorepos with High Quality DX
Welcome to a talk about fast React monorepos with high quality DX. Monorepos allow for collaboration and code sharing between packages, providing a more organized development environment. Leveraging caching and distribution in CI can improve speed and efficiency. NX provides a feature-rich monorepo setup for React, improving developer experience. Monorepo tools like NX console extension and project graph visualization enhance capabilities and enforce code quality.
Web Accessibility in JavaScript Apps
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Introducing Design System to Multinational Web Apps
18 min
Introducing Design System to Multinational Web Apps
Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.
Keeping Sane with React Micro-Frontends in Production by Applying Observability
7 min
Keeping Sane with React Micro-Frontends in Production by Applying Observability
Observability for microfrontends involves defining clear separation of concerns between teams and tracking errors in production with structured events. By using React boundaries, failures can be isolated and high observability can be achieved. Logging errors with metadata allows for querying specific error types and receiving notifications. Automating the process with Terraform simplifies observability for microfrontends.
Tame the Component Multiverse
27 min
Tame the Component Multiverse
This Talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the complexities of the UI multiverse and the challenges in managing UI states. The suitability of different testing strategies across the testing continuum is examined, along with the importance of addressing the weight of UI testing challenges. The role of tools like Storybook and Chromatic in automated testing and collaboration is emphasized. Ultimately, the Talk emphasizes the love for the web and the need for strategies to manage the UI multiverse.
Improving Developer Happiness with Preview.js
21 min
Improving Developer Happiness with Preview.js
Francois, a developer happiness engineer, discusses the challenges of slow builds and their impact on productivity. He explores the implementation of showing unavailable menu items in a food delivery app and demonstrates the use of Storybook for component design. Francois introduces Preview.js, a tool for previewing React, Vue, and Solid components, and explains how it simplifies the development process. He also highlights the benefits of using PrivyJS with Storybook and VIT for faster and more efficient development.
Content Modeling for React Developers
7 min
Content Modeling for React Developers
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.
Multiple apps, one code to rule them all
20 min
Multiple apps, one code to rule them all
This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.
How to Build UI's for Smart Contracts
134 min
How to Build UI's for Smart Contracts
Workshop
Rahat Chowdhury
Rahat Chowdhury
There are many journeys we can take into becoming a web3 developer. Not all journeys require learning a completely new language and becoming a smart contract developer. In this workshop we will learn how to build our own React UI on top of any existing smart contracts on the Polygon Proof of Stake Blockchain. We will explore a basic overview of blockchains and learn about the advantages of building on Polygon. We will also gain an understanding of what Smart Contracts are, learn how to find existing ones, and learn tools that help us interact with them from a React application.
Dear Client, I'm Leaving You
21 min
Dear Client, I'm Leaving You
Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores different rendering strategies and the challenges of hydration in React. He introduces SuspenseSSL in React 18 as a solution for fetching data in advance and selectively hydrating components. He also mentions React Server Component as a game changer for reducing bundle size in rendering with React.
Measuring and Improving React Native Performance
19 min
Measuring and Improving React Native Performance
This Talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how to analyze JS performance with React DevTools. The Talk also explores optimizing rendering in React components, such as FlatList and nested lists with carousels. It concludes with strategies for optimizing the virtualized list and carousel to achieve better performance.
From Blender to the Web - the Journey of a 3D Model
26 min
From Blender to the Web - the Journey of a 3D Model
Today's Talk is about Blender and 3D in the web, covering topics such as rendering engines, material properties, exporting models, using React Fiber, lighting and shadows, state management, and adding wobbling effects. The speaker demonstrates how to create a 3D cupcake model and customize its appearance and behavior using React and Blender. The Talk also touches on topics like frosting selection, color changes, and adding orbit controls for interactive movement.
The Subtle Art of "Subtle Loading"!
10 min
The Subtle Art of "Subtle Loading"!
This Talk explores the concept of subtle loading in software development, focusing on techniques to provide a fast and seamless user experience. Tips include avoiding waterfall loading, optimizing loading sequences, and handling loading scenarios for users on faster connections. The use of React 18 APIs, such as start transition, is recommended to achieve an optimistic loading experience. Overall, the Talk emphasizes the importance of improving user experience through subtle loading techniques.
React Native Everywhere
22 min
React Native Everywhere
React Native Everywhere enables code sharing and platform individuality, responsive composition and navigation are key focus areas, the React Bangalore community has played a role in the development of React Native design systems, React Native URL Router provides a native feel with drag-from-edge navigation, collaboration with Software Mansion has been beneficial, and token-based centralization is important for consistent adaptation of design systems.
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
9 min
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
The Talk discusses the challenges of handling DOM manipulation with JavaScript and the performance issues that arise from using SPAs. It explores the solution of server-side rendering (SSR) to address SEO concerns but notes that bundle size remains an issue. Code splitting is introduced as a way to load content dynamically, but it presents challenges for SSR. The speaker suggests a solution using vanilla.js that solves the problem without scalability issues.
AG Grid's New React Rendering Engine
6 min
AG Grid's New React Rendering Engine
Today's Talk introduces AG Grid's new React rendering engine, highlighting its features and benefits. The difference between AG Grid and React table is explained, emphasizing AG Grid's powerful UI and enterprise capabilities. The integration of AG Grid and React is discussed, showcasing how React is used throughout the grid and its customizations.
Build Web3 apps with React
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Automated Application Security Testing
9 min
Automated Application Security Testing
StackHawk is a dynamic application security testing tool that helps developers find and fix security issues. The scan identified a SQL injection issue and a cross site scripting issue. The StackHawk YAML is used to configure the scanner with important information such as the application's location, environment, and ID. The scanner can also be pointed at open API spec or GraphQL definitions. Try StackHawk for free at stackhawk.com and integrate it into your development process to improve software quality.
React Native, as seen on TV
20 min
React Native, as seen on TV
This Talk discusses TV app development using React Native, focusing on limitations and specific considerations. The speaker demonstrates how to fetch and display random dog images using React Native hooks. They also explain how to handle focus and spatial navigation in TV apps, including using focus keys and a spatial navigation library. The Talk emphasizes the importance of optimization and performance in TV app development and suggests using useMemo and useCallback to avoid unnecessary re-renders. The speaker concludes by mentioning job opportunities at JustWatch.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
How To Design A Sustainable Freelance/Contracting Career + Speedcoding Challenge
75 min
How To Design A Sustainable Freelance/Contracting Career + Speedcoding Challenge
WorkshopFree
Shane Ketterman
Shane Ketterman
Ready to kickstart your freelance career or just getting started on your freelance journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.
The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.
This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.
At the end of the workshop there will be a Q&A session with a Freelance Developer who can answer your questions and provide insights and tips into their own success.
During the Workshop break, we will be running a speed-coding challenge! At the end of the workshop, we will award a prize for the winner and display the leaderboard.
We will have you login to our portal and complete the challenge as fast as you can to earn points. Points are assigned based on difficulty and the speed at which you solve the tasks. In case you complete all tasks, you get extra points for the remaining time. You’ll see your score, ranking, and the leaderboard once you complete the challenge.
We will be giving away three Amazon Gift Cards ($200, $100, $75) for the top three winners.
Reacting to Web3
6 min
Reacting to Web3
Decentology provides developer tools for building React component-based blockchain applications without writing blockchain code. Web3 development is beneficial for applications with game engines, microtransactions, mobile payments, mediator contracts, business logic applications, simple authentication, and payments. They advocate for open source and allow developers to add a small royalty fee to paid transactions.
What are Docker Extensions
6 min
What are Docker Extensions
Docker Extensions allow you to extend Docker Desktop's functionality, integrate workflows, and contribute to Docker Desktop. The Extensions SDK makes it easy to build extensions using React and TypeScript. The marketplace makes extensions easily discoverable, and a demo is available in Docker Desktop to install and explore extensions. Logs Explorer allows easy access and search of logs across all containers. Future plans include adding more extensions, improving the Marketplace experience, and gathering feedback from the community.
Exploring AR Try-On with React Native
20 min
Exploring AR Try-On with React Native
This Talk discusses exploring AR Tryon with React Native, implementing AR try-on experiences in e-commerce apps, and considerations for AR development. It also covers the integration of AR platforms like ARKit and ARCore with React Native using the Duvero bridge. The Talk highlights the use of off-the-shelf solutions like Wanna's SDK for virtual try-on and Snap's AR technology and shopping extension. The importance of creating 3D models for AR Try-On and the challenges of writing native code for AR development are also mentioned.
Don't take it Personally, it is Personalization
22 min
Don't take it Personally, it is Personalization
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
Crash Course into TypeScript for content from headless CMS
98 min
Crash Course into TypeScript for content from headless CMS
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production
Bringing the New React Native Architecture to the OSS community
25 min
Bringing the New React Native Architecture to the OSS community
Today's Talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component, improves performance, and enhances the developer experience. It includes features such as Fabric, Turbo Module, and Cogent component. The architecture also supports modern languages like TypeScript and Kotlin. Upgrading to the new architecture enables the use of React 18's concurrent features and new APIs. Proper documentation and a new architecture section on the website provide valuable resources for contributors and advanced developers.
Infiltrate Your Own React Native App
24 min
Infiltrate Your Own React Native App
Every bug and feature can be a potential flaw or entry point for bad actors. React Native projects have many dependencies that can be exploited. It's important to understand your app's native code and follow security guidelines. Analyzing and modifying code can alter an application's behavior. Repackaging and modifying compiled code is relatively easy. App update vulnerabilities can be demonstrated by redirecting URLs. Code reviews and automated tooling are important for accountability. There are resources available to learn about basic security precautions for React Native.
Lifting Privacy and Accessibility Up
25 min
Lifting Privacy and Accessibility Up
In this talk, the speaker discusses the creation of a component library that prioritizes accessibility and privacy. They highlight the importance of building applications that cater to users' devices and network limitations. The speaker shares their experience of solving performance issues with a YouTube iframe and introduces Light YouTube, a performance-focused web component. They emphasize the need to prioritize accessibility and privacy in applications and provide insights on how to address common problems. The talk concludes with a call to prioritize accessibility and create sensible defaults in libraries to improve user experiences.
New Way of Envisioning Security in the Dependencies
21 min
New Way of Envisioning Security in the Dependencies
Today's Talk explores the importance of understanding security issues and dependencies in software development. It emphasizes the role of developers in cybersecurity incidents and the need to detect and respond to vulnerabilities early. The Talk also discusses the risks associated with third-party dependencies and the impact of security breaches on organizations. Additionally, it highlights the significance of addressing security concerns and the potential consequences of exploiting vulnerabilities and exfiltrating data.
Sharing is Caring: Reusing Web Data Viz in React Native
26 min
Sharing is Caring: Reusing Web Data Viz in React Native
PolarisViz is a collection of React components that provide consistent visual styles, motion design, and accessibility features. It aims to solve the problem of inconsistencies in visualization decisions made by different teams. The library is flexible for different visual styles and has centralized theme management. PolarisViz was integrated with React Native using a separate library called Polaris Viz core. Challenges included limitations in native apps and the need to share UI components between web and mobile platforms.