React Summit US 2024

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.

I'm the second-best TypeScript YouTuber. I'm giving a talk on streaming in React and the benefits it brings to applications. Streaming allows for faster perceived loading times by sending partial HTML to the browser, rendering it and waiting for the rest to complete. Server-side loading can cause delays, but this can be improved by caching HTML on a CDN. Streaming HTML in a different order has been a challenge, but there are JavaScript solutions. Optimizing HTML streaming with Suspense and dynamic I.O. can further improve loading times. Using suspense in client-side rendering and addressing challenges with Next.js React model are interesting patterns. Caching can now be done at a more granular level, improving SEO and reducing load on the host server. Rendering on the server is not a big penalty compared to multiple API requests. Thank you all.

React 19 introduces new features such as React Compiler and React Actions, which optimize code and provide better performance. The useOptimistic hook allows for optimistically updating UI, while the UseFormStatus hook tracks loading states and enables button disabling. The introduction of the 'action' attribute simplifies form handling and data retrieval. React 19 eliminates the need for useMemo and useCallback thanks to the React Compiler. The stability of React 19 has been observed in side projects without major issues.

Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

AI will revolutionize UI through the use of tools. Building recommendation systems for video games using AI libraries and data. Integrating Tansec Start to control server functions and override Fetch. Implementing RAG and using a vector database for response generation. Potential problems with context and data requests. Requesting tools and upgrading system context. Trying simulation games and using multiple steps for data retrieval. Client-side tool handling and tool request handling on the UI. Exploring Ollama application and direct post to AI. Giving AI tools and accessing data. AI evolution and the Tiny Troop project. Handling large databases and local models. RAG limitations and contextualized information. RAG live data retrieval and AI instruction. Exploring VectorDB and embeddings. Jack's thoughts on VectorDB and applause for presentation.

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.

Leadership is the key to building influence. Understanding the bigger picture and the impact of your work is crucial. Recognizing and appreciating the efforts of team members fosters a positive environment. Leaders should understand their strengths and weaknesses. Emotional intelligence and effective communication are important skills. Building influence in remote positions requires intentional relationship building. When giving feedback, create a safe environment and deliver it thoughtfully. Focus on resolution before discussing the reasons in urgent situations. Maintaining a professional distance while building team spirit is important.

Today's talk is about what it's like to be an open-source library maintainer, with examples and suggestions from the speaker's experience. Maintainers have various roles and responsibilities, including providing support for users and managing documentation. Setting boundaries, prioritizing documentation, and designing APIs are important aspects of being a maintainer. Release management and compatibility are challenging, requiring careful consideration of patch releases and breaking changes. The speaker shares an example of marking a method as deprecated in Redux and providing a migration path for users. Compensation for maintainers is a debated topic, and code mods can help with code migration. Maintainers often face challenges but can have a significant impact on the ecosystem and people's careers. Supporting open source developers is greatly appreciated.

I'm Jake, a developer advocate at Figma, and today I'll be discussing aligning patterns between design and development. Collaboration between designers and developers requires recognizing our different perspectives. The goal is to close the gap between design and development, but this is often aspirational. The optimal path between design and development is somewhere in between, depending on factors like friction or waves. By recognizing each other's areas of resistance, we can find ways to make collaboration more effective. Figma's Code Connect fills the gap between Figma component logic and code logic by allowing teams to publish code-based informed component code snippets. CodeConnect currently supports HTML, Web Components, Angular, Vue, React, SwiftUI, and Jetpack Compose, and seeks to support more languages.

Today's Talk focused on React 19 and its features, APIs, changes, and optimizations. The speaker emphasized the importance of migrating apps and building with React 19. They discussed the high-level features of React 19, including TypeScript emphasis and the testing library philosophy. The Talk also covered the APIs and integration of React 19, as well as the changes and type safety it brings. The speaker highlighted the improvements in useReducer types and the use of TypeScript. They introduced useActionState for migrating code and the useOptimistic hook for maintaining state immediacy. Real-time updates, action functions outside components, and the benefits of using the 'use' prefix in React were also discussed. The Talk touched on upgrade considerations, the role of RSEs and server actions in React, and the current state of RSC development. Overall, the Talk provided valuable insights into the new features and enhancements in React 19 and their impact on the development process.

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.

At Evinced, the mission is to make the web more accessible for everyone. Accessibility issues are common despite intentions. Today's Talk focuses on coding in an accessible way using TDD to catch defects early. Unit tests can be written to ensure accessibility requirements are met. Testing Library provides utilities for testing accessibility. The ATDD approach allows continuous creation of tests for compliance. Unit testing is valuable for complex components. Advanced has developed an SDK called the Unit Tester for automating accessibility tests.

Thank you for coming to React Summit! I wanted to create clarity around React Hooks and provide tools for troubleshooting React issues. Functional components in React are different from class components in terms of their lifecycle. Understanding the creation and destruction of objects in JavaScript is crucial to comprehend the behavior of functional components. Creating functions and objects that are not used can lead to memory waste and system resource consumption. Storing references to variables can keep them in memory, so it's crucial to ensure there is a direct path from window to the variable. This talk discusses creating objects and storing them in React components using useState and useMemo. It emphasizes the importance of using useCallback in cases where a callback is going into a component with a large state tree to avoid unnecessary renders. The talk also explores different approaches to handling data retrieval and update in React components, highlighting the use of useRef as a solution to access and update data in server-side data sources. Overall, the talk provides insights and tools for troubleshooting issues in React functional components.

I'm Firas, an experienced open source developer with a focus on web security. JavaScript security is challenging due to the concept of dependency hell and the reliance on open source dependencies. Vulnerable and outdated components pose a risk, and recent examples highlight the dangers in NPM. Malicious packages can remain undetected for a long time, and current tools for JavaScript security are inadequate. The speaker started Socket as a company after an interesting NPM attack in 2017. The hazards of installing unverified code are discussed, and the impact of AI on security is explored. Socket aims to address the noise problem in security alerting by focusing on the most severe vulnerabilities.

Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.

Let's talk about writing your first Vip plugin. VIT, rollup, and Vip plugin are important tools in front-end development. Rollup is a bundler that can bundle JavaScript files into a single file. VIT goes through all the plugins and transforms files to JS modules. VIT and rollup have similar plugin architectures, allowing the use of existing rollup plugins in VIT. I'll discuss three plugin properties: resolve ID, load function, and more. Let's take a deeper look at the transform function. The resolve ID function determines the ID of the file or module, and the load function reads the file or module and returns its content. The transform function actually transforms the file or module into something else. For example, it can modify the code depending on the file extension. We can transform the result object into code by using object keys and map. This allows us to extract specific data and include it in the output. By making the code flexible, we can add additional information like 'built at' and utilize it for various purposes, such as displaying branch name or commit hash during deployment. You can implement various functionalities in the Vip plugin, such as reading Markdown files, implementing file-based routing, and creating domain-specific languages.

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.

Thank you for joining my session on untangling your dependencies. I encountered errors when trying to update dependencies in the project, leading to a tangled mess of issues. Managing dependencies can be like working with a ball of yarn, trying to knit a project. I'll share my favorite practices for managing dependencies and provide some background about myself. Leonardo da Vinci said, 'art is never finished, only abandoned,' and this applies to software as well. I'll share tricks and tips for managing complex dependency management systems and understanding different types of dependencies. Working with dependencies often comes with challenges, especially when using React Native. Examples of tools that assist with managing dependencies include yarn upgrade interactive, NPM check updates, and React Native upgrade helper. When encountering issues, breaking them down into smaller chunks helps find solutions. To tackle dependency issues, focus on one platform at a time and choose the right tools. Tools like NPM why and Clip can help identify unnecessary dependencies and unused files. Monorepos and tools like Yarn workspaces and npm shrinkwrap are useful for managing monorepos. Bleeding edge branches and dependency updates allow for incremental and broken commits. Regular updates are recommended to stay aligned with platform changes.

This talk covers seven steps to secure React apps, including dependency management, validation, secrets management, code exposure, content security, security implementation, and additional security measures. It emphasizes the importance of understanding dependencies and risks, using tools like NPM Audit and Socker.dev. It also highlights the need for dependency validation and package namespace, as well as input validation using libraries like Zod and Valobot. Secrets should be managed using tools like .env and a secrets manager, while code exposure can be minimized by separating server-side and client-side code. Content security policies and tools like Next Safe and Helmet are recommended for implementation. Additional measures include deep code analysis, code execution monitoring, and strict content security policies.

Let's start diving into the presentation on AI and accessibility. AI is a simulation of human intelligence by machines, and this presentation will focus on narrow AI. Generative AI has achieved great things in accessibility, and AI advancements have improved various applications for people with disabilities. OpenAI's newest model allows blind people to access AI through Be My Eyes. Challenges with AI include bias and accuracy. AI can be a useful tool in improving accessibility, but it has limitations and risks. Advocating for AI ethics and accessibility, collecting data, and addressing specific accessibility concerns are important. Khan Academy is working on improving accessibility in education.

My name is Tom, the head of developer experience at Convex. Convex is a sync engine written in Rust that includes database, file storage, and full text search. It can be self-hosted and allows you to write Convex code alongside your other code. It runs in a V8 isolate on the same machine as your data, making it fast. Convex uses web sockets for interaction and offers optimizations like optimistic updates. It is widely used and can handle real-time data. Convex aims to remove development burdens and focuses on scalability. It offers smooth concurrency and reduces friction in development. Convex for Startups is a program that offers perks like free access and aims to attract interesting applications.

I'm here with the Poimandris Open Source Dev Collective, and I'm going to show you how to make a game with React using patterns you know and probably a lot you don't. We'll use React, React 3 Fiber, Kota, and Triplex. Cota is a nimble state solution that creates a local database for efficient updates. Spawn entities with specific traits and update them accordingly. Learn about composable behavior in Kota and how to update entities every frame. Enhance the visual appearance of the game by adding a HiFi view, materials, lights, and post-processing for bloom. Understand the concepts of creating games in React, dynamically spawning entities, and giving them behavior. Learn about testing strategy, compatibility with React Native, and the advantages of using React for game development, including wider accessibility and quicker iteration.

Hello, everyone. I'm Hina from Expedia Group. This talk is about making Expedia flights faster. We will focus on performance initiatives on the Flight Search page, including prefetching and preemptive search. Monitoring is crucial with custom metrics like page usable time and non-supply overhead. Prefetching fetches JS bundles beforehand for faster CDN path retrieval, while preemptive search predicts Flight Search responses before the user lands on the page. The page performance improved up to 50% on both web and native. Preemptive search and microqueries were implemented to improve path and performance. Async loading and loaded query optimization resulted in an 8% improvement. Micro-front-end architecture improved bundle size and component reusability, leading to significant performance gains.

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.

Hi, everyone. I'm Chris, the CTO at Nock. We help product teams power user-centric cross-channel notification experiences. Today, I'll talk about extending the abilities of our in-app messaging and how you can power any kind of in-app messaging using our platform. We optimize for flexibility, customization, and a shallow learning curve. Our pre-built React components include a banner, modal, card, and notification feed. All of this comes out-of-the-box, supporting light mode and dark mode. Easily show modals and announcements with no additional code. Own the rendered components for performance and customization. Build custom components with minimal code. Use hooks for fetching data and real-time updates. Noc provides a schema for strong data integrity.

We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

I'm presenting on simplifying analytics in React apps. We want to build embedded analytics for developers using common languages like JavaScript and TypeScript. By reducing backend complexity, developers can prioritize building dynamic data-rich UIs. BI platforms didn't deliver the customization required, so we aim to use React to create a powerful SDK. The SDK involves constructing a semantic layer, building reusable components in React, and doing cool things with it. We simplify the data model and generate a TypeScript representation. Sisense provides APIs for authentication, row-level security, and customization. We can now build React components directly off the generated model. The data model called datasource enables simple UI and eliminates the need for front-end engineers to write SQL API calls. We built a near-production-ready application using a React template and Sisense as the backend. With the simplified system and a semantic layer, we can now use large language models for chatbot-driven visualizations and dashboard layouts. This framework enables faster development and alternative methods for generating interactive React objects.

Monorepos are single repositories containing multiple distinct projects with well-defined relationships. Relationships in code are based on distance, where code in different files is the closest relationship. By importing code from one file to another, dependencies are established, allowing for changes in one file to immediately impact the other. This enables fast iteration and development. When we separate code into packages or APIs, it increases the distance between code pieces, making it slower to understand the impact of changes. However, when multiple projects are combined in a monorepo, the relationships between them are reduced, enabling faster development. Monorepos make relationships explicit and provide tools to understand their impact. To learn more, visit monorepo.tools or nx.dev for information on managing monorepos with NX.

Welcome to the session on communicating technical information to non-technical audiences. Today, we will explore how to apply your existing communication skills to share technical jargon. Understanding your audience through asking questions, making observations, and doing research is key to successful communication. When communicating with non-technical audiences, consider their baseline knowledge and avoid making assumptions. Use jargon when it is understood by all and explain unfamiliar terms when necessary. Analogies and stories can be effective in explaining complex concepts. Visual aids and experiences can enhance presentations. Clarify the purpose of communication to avoid misunderstandings. Utilize resources like written communication, podcasts, and videos to educate team members. Include others in technical conversations to learn and build something bigger. Effective communication requires context and understanding. Utilize the course 'Technical Communication for Non-Technical Audiences' on Pluralsight for further guidance.

Hey, everybody, I'm Graham, and I'm really excited to give you a talk today on feature flagging with React server components. We're going to give examples of how you can deploy feature flags in your application, and how feature flagging interacts with React's rendering strategies. Feature flags are conditional logic that allows you to control the state of a feature independent from the code deploy. This separation of code deployments from feature releases is critical for large product organizations. It enables frequent commits without exposing changes to users, conditional release of features, and easy rollback in case of unexpected bugs. Using FeatureFlag gives you a kill switch where you can turn off your feature. It allows you to do A-B testing and measure the impact of new features. You conditionally release the feature to different sets of users, allowing you to control for externalities and changes to your product. A FeatureFlag is used to get the state and conditionally show a component. The flag state can be stored in a file or using environment variables. However, environment variables have limitations in terms of complexity. A more complex example uses growth book syntax, allowing for advanced control over feature rollout. Building your own system can be tricky, but feature flagging platforms offer fully-featured solutions with two main advantages. Feature flagging applications have a nice UI for controlling feature releases and an SDK that integrates with the code. React poses complications in using feature flags due to its rendering strategies. Static site generators like Next.js have limitations in user targeting and require redeploy for updates. Client components are not async, requiring the use of React primitives. These approaches have their own challenges in implementing feature flags. To initialize the SDK, instantiate the SDK outside of the app and use a user effect hook to download the feature flag payload and update the user data on the SDK. The growth book provider builds context for evaluating feature flags, allowing components to easily access feature flag states. However, there may be a slight flicker in the UX due to the time it takes to initialize the SDK and download the feature flag state. Network optimization can help reduce flickering, but the client's network connection is beyond your control. There are some workarounds for flickering, like showing a loading spinner while rendering in the background. Using feature flags for SEO is not ideal as the initial HTML payload doesn't include all the contents. Server components in React 19 provide an async solution without the need for complicated useEffect and state. react.cache allows caching expensive operations scoped to the current request. The getSdk function call retrieves the value of the feature flag from the cache, providing faster subsequent calls. Our SDK has its own in-memory cache. Dynamic rendering can be expensive in terms of requests, rendering, network calls, and running React on the service side. It can also be slow, and tracking events may be challenging. The server-client hybrid approach combines the advantages of the previous strategies without the downsides. By making the outer app a server component and caching the feature flag payload, we can achieve no-flicker client-side feature flagging. The client component can use the UseMemo hook and the initSync method with the payload already in memory. Passing the SDK instance and wrapping the main app in a provider allows us to have the best of both worlds. Although it may be slightly more complex to set up, using Next.js with React server components offers a cool and modern approach to feature flagging with high performance.

Hey, React Summit! Today I want to share my thoughts on creating a generic React application using TypeScript. I'll discuss the Type Build concept, generic application routing, and provide an example. What is the type build? It is a test that uses the characteristics or properties of an object to determine its type. Duck typing brings flexibility and simplicity, allowing for loose coupling and shorter code. Type guards are used to implement duck typing in TypeScript, enabling custom logic to determine the type of an object. This approach ensures type safety and better error checking. We use a switcher component to render components based on the CMP variable type. When working with React, create components as you would for any application. Use routers for dynamic routes with IDs to handle different pages. The outlet receives the valid page ID from the parents and uses a map to render components based on type. The object result can be seen in the next slide. Create a menu in your application with valid pages. This is an extensible approach for handling complex forms. Find the sample app on my GitHub.

Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.

I'm Richard Kerrigan and I'll show you how to add multilingual support to your React apps. We need a way to support other languages on our websites and web apps without affecting team productivity. We'll explore a low-cost solution using AI and automation. When my team started tackling this problem, we looked at Azure and found the Azure AI Translator service, which offers both ad-hoc text translation and document translation. Key features include language support for over 100 languages and dialects, a generous free tier, Neural Machine Translation for accuracy, and the ability to use custom glossaries. Designing workflow for translating JSON content at runtime or incorporating translation process into CICD workflow for HTML or Markdown files. Exploring how to translate HTML files within a CICD pipeline. Translation service and storage account setup. Function app building and deployment. Configuring translation to Spanish with a glossary in CSV format for file translation. Sending a request to the translator and receiving the translated file. Discussing the problem of websites not offering content in additional languages. Highlighting the benefits of Azure AI Translator and its alternatives. Showcasing different versions of the app for translating JSON, HTML, and markdown content. Checking the progress of the workflow, deployment of Azure resources and function, and translation of markdown files. Quick explanation of infrastructure as code and deployment options. Changing languages shows translated title and excerpt while maintaining original formatting.

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.

Today's Talk discusses type-safe app configuration and its benefits. It explores how app configuration can accelerate software development using the example of a SaaS company called Potion. The Talk highlights the use of feature flags to control app discounts and the advantages of decoupling discount control from the engineering team. It also covers the ability to run A-B tests, personalize discount messaging, and optimize for upgrades using an AI loop. The Talk emphasizes the flexibility of the app configuration system, allowing for managing multiple overlapping discounts and controlling various aspects of the app. Lastly, it mentions the necessary components of building a flexible app configuration system and how Hypertune offers these features.

Welcome to Beyond 1.0, a talk about scaling and maintaining design systems. A design system is a collection of reusable components, principles, constraints, and best practices governed by clear standards. We have expanded our design system over six and a half years to include over 70 components and support over 50 developers. To maintain a maintainable code base for your design system, enforce a singular code style across your entire code base through a linter. Use Next.js for a comprehensive and custom design system documentation site built with Markdown. We've improved our design system documentation by using react.gen typescript to dynamically parse out component props, allowing for more interactive and maintainable documentation.

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

Hi everyone and welcome to my talk about the women in the history of computer science. I want to pay tribute to women who have done fantastic work in computer science. The history of computer science begins in 1840 with Ada Lovelace, who invented the concept behind the analytical engine and provided the first algorithms. Women played a significant role in early computing, such as the programmers of the ENIAC. Grace Hopper made significant contributions to the field, including the development of COBOL. Women have made significant contributions to artificial intelligence, such as Karen Spike Jones and her development of the TF-IDF method. It is important to highlight women in the tech field and provide role models for young girls. The talk aims to inspire and encourage.

Hello, React Summit. Welcome to this talk, a retrospective on four years in the making of our React Native video player. We will cover what went well, what didn't go well, and the lessons learned. We used React Native Video 5.2.1 and custom components to optimize the player. Streaming HLS, subtitles, and transcripts worked well. iOS performance was good, but the Android player and background audio management caused issues. Different media players and syncing audio players were challenges. Managing dependencies and versions was difficult. Upgrading React Native Video to version 6.4 improved stability and added notification features. Future updates will include DLL support and player-control separation.

Hi, welcome to Shining Offline. I'll share how using the offline first approach saved us in the mobile urban lighting system. We'll discuss Kismet, the Bayless system, and the transition to a progressive web app. The system handled work orders, but the manual process caused unnecessary effort. In 2015, we built a native iOS app, but faced challenges with updates and communication. Eventually, we convinced the client to switch to a progressive web app. The new PWA's design improves usability and uses maps and services from the city's own infrastructure. Implementing the offline-first principle addressed many issues, and providing offline maps required using MapLibreGL app protocol. Offline communication with the iOS app endpoint and managing conflicts were also discussed. Offline-first requires significant effort but leads to user satisfaction. iPads are the devices of choice.