React Summit Remote Edition 2021

Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model. We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features. The license is MIT. It's a bare metal, in terms of features. The release cycle is semantic version. The data structure is JSON. It's used by 83,000 packages and has 20,000 stars. The data model is made up of blocks with text and entities. It supports various editor features including block styles, inline styles, undo/redo, paste, lists, nested lists, media, and links. Editor.js is a block-based editor written in vanilla JavaScript. It has a 2.19 release, Apache 2.0 license, and a semver release cycle. The data structure is JSON, and there are numerous plugins available. It has 1,500 packages using it and 15,000 stars. The editor features include block styles, inline styles, undo/redo, paste, lists, nested blocks, media, and links.

React Query is a popular data synchronization library used by indie developers, startups, and Fortune 500s, with over 1,200 commits and 250 contributors. The Talk covers the creation of a simplified version of React Query called React Query Lite. It explores concepts like caching, background fetching, and garbage collection. The speaker also discusses the use of query observers and the integration of React Query with React. The Talk concludes with a discussion on React Native tools, testing, and the stability of React Query's API.

This Talk introduces the visual future of state management and how XState is bringing it to reality. It explains the role of reducers in containing application logic and how state machines and state charts provide a visual and mathematically rigorous way to represent behaviors. XState is easily integrable with React and other frameworks, allowing for the management of local, global, and semi-local state. The Talk also highlights new features in XState, such as the use of TypeScript for stronger typing and the introduction of the useSelector hook for improved performance. The future vision includes the combination of diagrams and code, with tools like Stately.ai, and the importance of explicit modeling of application logic using state machines.

Today's Talk discussed the impact of Core Web Vitals on SEO and website performance. Strategies for improving Core Web Vitals include using Next.js, optimizing images and fonts, and measuring performance with tools like Google Lighthouse. The hybrid approach of Next.js allows for flexibility in rendering applications. Recent releases of Next.js have focused on performance improvements. Next.js Commerce offers an all-in-one starter kit for e-commerce. Vercel provides a tool for measuring real user experiences and identifying potential causes of performance issues.

Today's Talk covers TDD and BDD in React testing, including the importance of testing practice in React. The Talk discusses the evolution of testing, the daily flow of developing a feature with TDD and BDD, and best practices for testing. It also emphasizes the significance of using the right tools and writing tests that resemble user actions. Applying tests in practice leads to better architecture decisions.

Rollbar is a leader in continuous code improvement, offering industry-leading grouping technology and real-time performance to turn error messages into actionable items. The new Rollbar for React SDK introduces a new way to initialize Rollbar using the Provider component and an error boundary for automatically capturing and logging React errors. The Rollbar React SDK provides multiple ways to set the rollbar context and customize its behavior. Attendees are encouraged to provide feedback on the Rollbar React SDK source code and sign up for an extended trial period using the provided URL and promo code.

Today's Talk discussed the development of Argo, a framework for remote rendering of content within Shopify's apps. The core concepts include creating a JavaScript sandbox, implementing a remote procedure call layer, and using proxies. The Talk explored the end-to-end flow of rendering content, the construction of the worker script, the rendering of UI components, and the advantages of remote rendering for security and flexibility. The Talk also touched on the challenges faced and the open-source nature of the project.

This talk provides an overview of building React Native apps with Expo and Xcode. It covers Expo managed projects, XO, Turtle, customizing runtime, Expo Development Client, and EAS. The talk also mentions the advantages of Expo Updates, the focus on a customizable runtime, and adding native libraries. Favorite React Native apps and libraries are recommended, and the future goals include enhancing performance and improving the development experience through EAS.

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

During this Talk, the speaker emphasizes the importance of negotiation skills in the tech industry and how it can help grow one's career. Mirroring and labeling are discussed as effective techniques in building trust and reducing negative emotions. The concept of being a sponge is introduced, highlighting the significance of listening attentively in negotiations. The Talk concludes by emphasizing the importance of communication and negotiation skills for engineers and encourages self-reflection and improvement.

This Talk provides an introduction to React Staytools, explaining how to use the state and setState function to update a counter. It also delves into the inner workings of React rendering, discussing the update queue and re-rendering conditions. The Talk concludes by mentioning the different modes of updating and triggering re-renders in React, and encourages further exploration of the source code and discussion in Discord.

This Talk discusses setting up feature flags with React, which allows for controlled rollouts of new features. Feature flags provide more control without touching the source code and can target specific users or types of users. In React, feature flags can be created and configured using Split.io. Different treatments can be applied to determine if a feature should be shown. Feature flagging provides control and flexibility in development.

Motion is a powerful tool in data visualization, but it must be used carefully to avoid confusion. Implementing charts with React and D3 can improve the user experience. The use of D3 scales and react-spring can enhance animations. Canvas is a better choice for rendering many elements. Accessibility considerations should be made to accommodate users who prefer reduced motion.

Iris, a software engineer, shares her cooking journey and invites others to share recipes on Twitter. She discusses testing guidelines, emphasizing the importance of automated tests that inspire confidence and run all the time. Iris provides tips for faster and more effective testing, including running tests in parallel and focusing on behavior. She also highlights the importance of making tests robust, readable, and maintainable. Finally, Iris emphasizes the value of testing, predictive tests, and audience preferences in software development.

React Fiber is a reconciliation algorithm introduced in React 16 to address laggy input fields and heavy rendering. The old stack reconciler caused a laggy experience by re-rendering the entire subtree immediately. React Fiber solves this by breaking work into incremental units and assigning priorities. It introduces concurrent mode to make apps responsive and adaptable. The useDeferredValue hook is commonly used to keep the interface responsive by rendering components immediately and others at a later time.

The speaker discusses their React Native architecture and how they structured their app, choosing React Native over native development due to limited resources and the need for UI experimentation. The architecture consists of support, components, and screens, with a focus on code organization and extensibility. The speaker explains the screen creation process, including the use of React Native Navigation and a state machine pattern. They also highlight the use of GraphQL for data retrieval and navigation between screens. The talk covers the structure of common components, utilities for styling, and support for dark mode. Overall, the speaker emphasizes the importance of isolating dependencies and utilizing a directory structure approach.

This Talk discusses the process of converting to TypeScript at CodeCademy. It emphasizes the importance of encouraging adoption and knowledge sharing within the team. The Talk also highlights the seamless integration of TypeScript into the existing infrastructure and build system. The strategy for converting to TypeScript involved using dedicated pull requests and automated tools. The speaker shares tips on automating changes, setting up a styling guide, and celebrating victories. Resources for learning TypeScript are also mentioned.

This Talk explores the core components of design systems, their benefits and challenges, as well as the importance of having a design system for products. It also discusses the concept of a design language and its role in creating a design system. The section on building a design language and component library emphasizes the significance of selecting options for a design language and creating reusable components. The section on building and scaling design systems highlights the benefits of design systems and the challenges involved in building and scaling them. It also mentions the changing mindset towards recognizing the value of design systems in the competitive space.

Today's talk explores intelligent prefetching in React, including code splitting, lazy loading, and prefetching to improve performance. The use of neural networks for sequence prediction and training with actual user behavior is discussed. React context is used to link UI handlers with predictions and prefetching, enabling dynamic content import and improved user experience. The combination of AI and UI development is showcased in this personal project.

Today's Talk focused on accessibility in web apps, covering topics such as WCAG guidelines, handling required fields and field formats, error handling and disabled buttons, and the importance of DOM and visual order. The Talk also discussed the accessibility of hidden elements and links, the impact of animations on accessibility, and the use of development tools for accessibility testing. The Q&A session addressed questions about asterisks in required fields, date inputs, and automated testing tools. Overall, the Talk emphasized the importance of building web apps that are accessible to all users.

This talk explores extreme programming (XP) and balanced teams, emphasizing the importance of simplicity and team collaboration. The application of XP practices, such as paired programming and test-driven development, is discussed, along with the organization of frontend code. Atomic design is introduced as a methodology to solve dealer problems, and the process of creating the user journey and identifying atoms is explained. The talk also delves into testing components and the completion of the user journey using XP and Atomic Design.

This Talk discusses Schedule React development with NX and introduces Annex, an open-source dev tool for Monorepos. It covers topics like generating workspaces and libraries, creating public-facing Next.js applications, imposing restrictions and defining boundaries, testing with linting, speed improvements with the 'affected' command and caching, retrofitting NX into an existing Monorepo, migrating, testing, deployment, and publishing, publishable libraries in NX, Webpack 5 module federation, React context API, and managing tags, scope, and dependencies.

This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.

Animations can enhance the user experience and provide context in interface design. Using frame and motion in React can create smooth fade-in effects and improve navigation. Optimistic updates and instant comment appearance can eliminate waiting time and improve user experience. Motion can be used in multiple ways to give context and enhance user experience. Accessibility and performance should be considered when implementing animations. Choosing the right library, such as frame of motion or React Spring, can simplify animation implementation. Animations can enhance perceived performance and influence users' perception of speed.

The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.

Recoil.js is a state management library developed by Facebook that allows for separate atoms to be updated independently. It provides performance analysis tools based on multiple measurements taken from production and aggregated into statistical distributions. Recoil 0.2 introduced improvements in selectors and performance, as well as a data structure that improves copying efficiency. Recoil supports server-side rendering and can be used in React Native. It is recommended to start with React alone and consider adding Recoil if needed for handling updates in distant parts of the tree.

The Talk discusses the use of ReMotion, a library that allows for declarative video creation in React. It covers the process of creating videos, animating elements, and rendering multiple compositions. The Talk also mentions the features of ReMotion, such as audio support and server-side rendering. ReMotion 2.0 introduces audio support and the possibility of live streaming. The Talk concludes by highlighting the frustration with existing video editing tools and the integration of existing videos into ReMotion projects.

The Talk discusses how Stencil, a low-level compiler, helps generate and maintain reusable components that work across different frameworks. Stencil enables the creation of self-contained applications by relying on existing web APIs within the browser. It allows components to work in different frameworks without maintaining multiple code bases. The speaker highlights the usefulness of web components and how they can benefit different use cases. Stencil solves the problem of maintaining one code base while working everywhere, making it worth exploring for those in similar situations.

This talk explores how React Suspense and Concurrent mode can enhance the user experience by controlling loading areas, prefetching data, and reducing loading time. It demonstrates how UseTransition can remove unnecessary loaders by skipping the loading state if data arrives within a specified time. The speaker advises using these experimental features in personal projects rather than enterprise applications. The talk concludes with an invitation to join the journey at Postman and thanks to the organizers, sponsors, speakers, and audience for making the conference a success.

Lyft has developed a next-generation microservice platform called Lyft Service, built on Next.js. They use a plugin system to reuse code and keep their stack modern. The plugin system allows for easy packaging and delivery of application functionality. Lyft has a structured approach to migrations and versioning, ensuring seamless upgrades. The success of the platform is attributed to organizational and cultural processes, as well as buy-in from senior leadership.

This Talk introduces Spectate, a library that generates apps based on tests. The speaker demonstrates building an email signup form using Spectate, writing tests to handle empty email and password errors. They explain how Spectate works by simulating tests to build a model and updating the app's state based on user input. Spectate selects the most similar state from the model and runs corresponding actions. The Talk concludes by encouraging listeners to explore Spectate's features and examples.

This Talk on runtime performance covers various aspects such as understanding and fixing performance issues, optimizing performance and perceived performance, profiling runtime performance, analyzing performance and debugging memory leaks, and dealing with memory leaks. It also discusses the use of dev tools, CSS transforms, and layout in improving performance. The Q&A session addresses questions about libraries like Immutable.js, common trends in memory leaks, and the impact of animations on performance.

Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.

React has evolved over the years, introducing breakthroughs like the declarative component model and React hooks. Create React App and Next.js abstracted away webpack config and routing, improving developer productivity. GraphQL backend as a service platforms made it easy to set up a backend without extensive knowledge. Blitz.js and Redwood.js are game-changing batteries included frameworks for full stack React development. They aim to make backend development easier for front end developers and optimize full stack productivity.

The speaker discusses their experience with React Native app development and their goal to deliver high levels of product value. They wanted to build new features for both the Facebook Messenger and Native app, so they explored the possibility of sharing code between the two platforms. They attempted to share a file of branded colors using symbolic links and Yarn workspaces, but encountered issues. Ultimately, they decided to duplicate the shared code and rewrite it with strict type safety.

Today's talk is a guide to developing on the blockchain using Solidity and React. It covers the basics of blockchain, Ethereum, and smart contracts. Interacting with the blockchain involves submitting transactions and solving cryptographic puzzles. Smart contracts can be written in Solidity and tested using the Remix Web IDE. To connect to the Ethereum blockchain, you can run a local node or use an Ethereum node provider. Setting up the development environment involves installing Node.js, Python, Truffle, and MetaMask. Working with Web3 allows for interacting with contracts. The blockchain provides transparency and decentralized networks for use cases like decentralized finance.

Today's Talk discusses turning the cloud inside out using GraphQL, highlighting its benefits such as type validation, real-time capabilities, and query efficiency. It explores the use of GraphQL as an API gateway, particularly in the context of microservices, third-party APIs, and blockchain. The talk also covers the efficient indexing and cloud integration offered by GraphQL, as well as building cloud APIs with AWS using API Gateway and AWS AppSync. It concludes with insights on deploying GraphQL APIs with tools like Amplify and CDK, and creating GraphQL APIs backed by Lambda and DynamoDB.

Today's Talk focuses on React Native app performance. The speaker discusses the importance of frame rate as a metric and introduces the performance monitor provided by React Native. They explain how Systrace, a system trace tool, can be used to identify performance issues. The first performance issue analyzed involves the UI thread performing excessive calculations, leading to a significant amount of time being spent on the draw function. The Lottie animation view is identified as needing optimization. The Talk also mentions a second performance issue that will be explored.

Slice Machine is a development workflow that allows for the creation of reusable sections of a website. The Talk covers the process of adding a map slice to an existing Next.js website and building the component. It also discusses styling the map slice, publishing changes, and triggering a rebuild. The summary highlights the key points of the Talk in a concise manner.

This Talk discusses the challenges of dealing with legacy code and the benefits of partnerships in software development. It highlights the case study of ServingMonkey and Rango, showcasing the solutions implemented to modernize their code bases. The talk emphasizes the importance of three-tiered architecture and collective ownership in achieving sustainable changes. It also addresses the challenges of migrating to new technologies and the need to consider business value when making technology decisions. The talk concludes with insights on preventing code from becoming legacy and the benefits of code migration and collaboration.

Today's Talk discusses the use of video sprites to optimize video playback. Video sprites, similar to CSS sprites, allow for the selection of specific parts of an image. By combining multiple videos into one and selecting the desired one, video synchronization can be enhanced, and viewers can choose different camera angles in live events. The implementation involves dividing the video into quadrants, allowing viewers to select which quadrant they want to watch for synchronized feeds and a shared audio stream.

Headless CMSs offer freedom of choice in front-end frameworks and backend APIs, focusing on user experience and integration with third-party solutions. They provide a good developer experience and are an important part of the web ecosystem. A headless CMS allows project structuring, technology/API selection, and UI extension. Consider features like translation, workflow setup, content scheduling, editing experience, and integration capabilities when choosing a CMS.

Anil Durman, engineer at the New York Times, discusses the role of graphics in the context of state. He highlights the work done by his team in helping people understand the news through new formats and pages. The team is hiring for various tech roles. By night, Anil is a creative coder exploring the intersection of creativity and code, and his latest project, Good Graphics, focuses on UI as a function of state, React components, and SVGs. He demonstrates how components can be updated based on state, allowing for declarative graphics. Anil also showcases how nested circles and grids can be used to create complex systems in React, enabling dynamic and reactive graphic designs.