April 11 - 15, 2021
React Summit Remote Edition
Online

React Summit Remote Edition 2021

The biggest React conference in the cloud

Attend a three-day React conference gathering thousands of international Front-end and Full-stack engineers in the cloud. To help you stay up-to-date on the latest React tech, the GitNation team is bringing you a fresh remote gig on April 14-16, 2021. Mark your calendars and join the most prominent virtual event for the React community. Each day will feature two tracks of talks: the Summit track for pro React developers and the Base Camp track with more mainstream content for all levels. Besides the conference talks and hands-on React workshops, you can expect excellent MCs, virtual networking rooms focusing on tech topics, interactive entertainment, and engaging challenges for all participants.

This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Building Better Websites with Remix
33 min
Building Better Websites with Remix
Top Content
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.
React Hooks Tips Only the Pros Know
177 min
React Hooks Tips Only the Pros Know
Top Content
Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
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.
Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project
8 min
Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project
Top Content
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.
Let's Build React Query in 150 Lines of Code!
30 min
Let's Build React Query in 150 Lines of Code!
Top Content
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.
XState: the Visual Future of State Management
35 min
XState: the Visual Future of State Management
Top Content
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.
How to Build an Interactive “Wheel of Fortune” Animation with React Native
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
31 min
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
Top Content
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.
Building a Shopify App with React & Node
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
BDD & TDD in React
23 min
BDD & TDD in React
Top Content
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.
Lessons To Outlive React
34 min
Lessons To Outlive React
Top Content
The Talk focuses on the lessons we can learn from React's success, including API design, optimizing for change, testing, and community engagement. The idea of a DX UX mullet, with immediate mode in the front and retained mode in the back, is observed in various areas of software development. The importance of naming and optimizing for change is emphasized, as well as the significance of DevTools and building a community. The principles behind the Temporal framework and the importance of good naming in API design are also discussed.
Using Rollbar in React
8 min
Using Rollbar in React
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.
State Management in React with Context and Hooks
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Remote Rendering with Web Workers
32 min
Remote Rendering with Web Workers
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.
Fire-Side Chat with Kent C. Dodds
31 min
Fire-Side Chat with Kent C. Dodds
Kent C. Dodds discusses various topics including migrating projects to TypeScript, Next.js and Remix, testing libraries, RTL testing with React Testing Library, integration testing for component libraries, testing design systems, writing tests, communication resources, and the popularity of Hooks in React development.
Building a Mobile App with Expo, EAS, and React Native
35 min
Building a Mobile App with Expo, EAS, and React Native
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.
Scaling WordPress with Next.js
9 min
Scaling WordPress with Next.js
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.
Engineers Learn to Negotiate
8 min
Engineers Learn to Negotiate
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.
We Don’t Know How React State Hooks Work
7 min
We Don’t Know How React State Hooks Work
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.
Setting Up Feature Flags with React
7 min
Setting Up Feature Flags with React
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.
Battle-Tested Techniques for Animation and Data Viz with React
25 min
Battle-Tested Techniques for Animation and Data Viz with React
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.
React Without JavaScript?
26 min
React Without JavaScript?
This is a talk about the language of web development and how it influences what we can build. It introduces Astro, a method for building faster websites with less client-side JavaScript. Astro brings together the power of JavaScript and the speed of HTML. It explains how to mix scripting and markup using a frontmatter script. Astro allows you to use React components in an Astro application, generating server-side markup. It offers opt-in interactivity with JavaScript and an HTML-first output.
Test Kitchen: A Recipe for Good Tests
29 min
Test Kitchen: A Recipe for Good Tests
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.
Inside Fiber: An Overview of React's Reconciliation Algorithm
20 min
Inside Fiber: An Overview of React's Reconciliation Algorithm
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.
React Native Architecture at Product Hunt
18 min
React Native Architecture at Product Hunt
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.
Stories and Strategies from Converting to TypeScript
20 min
Stories and Strategies from Converting to TypeScript
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.
Incrementally Adopt Modern React Patterns in a Legacy Codebase
130 min
Incrementally Adopt Modern React Patterns in a Legacy Codebase
WorkshopFree
Richard Moss
Richard Moss
In this workshop, we’ll look at some of the approaches and techniques that can be applied when making refactors or adding new features to a legacy React codebase to bring it inline with the latest approaches. We’ll cover topics such as how to use React Hooks to share component logic in a way that will allow reuse in class components; how to incrementally introduce other patterns to a React Redux app; and how to build in flexible UI components via abstractions where we are tied to some global CSS or a component library. Along the way, we’ll touch on many React patterns and state management approaches with the ultimate aim of being able to evaluate these options and let our requirements drive the architecture in moving towards a more robust and maintainable codebase.
Design Systems - Revamping Products for Consistent UIs
13 min
Design Systems - Revamping Products for Consistent UIs
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.
Build a UI that Learns - Intelligent Prefetching with React and TensorFlow.js
17 min
Build a UI that Learns - Intelligent Prefetching with React and TensorFlow.js
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.
Keeping It Simple
9 min
Keeping It Simple
React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.
Building Accessible React Components
34 min
Building Accessible React Components
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.
Building the Right Product and Building It Right: Extreme Programming and Atomic Design
23 min
Building the Right Product and Building It Right: Extreme Programming and Atomic Design
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.
Scaling React Development with Nx
32 min
Scaling React Development with Nx
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.
API-first Development with Headless WordPress
33 min
API-first Development with Headless WordPress
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.
Lessons Learnt from Building Interactive React Applications
35 min
Lessons Learnt from Building Interactive React Applications
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.
Fire-side chat on Recoil
34 min
Fire-side chat on Recoil
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.
Internationalizing React
29 min
Internationalizing React
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.
React User Authentication for Self-Sovereign Identity with Magic
18 min
React User Authentication for Self-Sovereign Identity with Magic
Welcome to this talk about React user authentication for self-sovereign identity with Magic Labs. Learn how the user trust model of the internet is broken and a novel solution to fix it. Understand the concept of zero-knowledge proof and the key-based model for user identity. Magic improves trust by leveraging Infrastructure-as-a-Service, secure user keys, and providing passwordless authentication. Explore decentralized identity and how it solves the authentication problem, including the use of decentralized identity tokens (DIDT) for managing permissions and authentication.
Creating Videos Programmatically in React
34 min
Creating Videos Programmatically in React
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.
Road to a Better UX with Suspense and Concurrent UI
9 min
Road to a Better UX with Suspense and Concurrent UI
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.
Scaling Components Across Multiple Frameworks
25 min
Scaling Components Across Multiple Frameworks
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.
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
34 min
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
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.
Write Tests. Generate UI. Profit!
20 min
Write Tests. Generate UI. Profit!
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.
Doing the Least Amount of Work Possible: An Intro to Runtime Performance
35 min
Doing the Least Amount of Work Possible: An Intro to Runtime Performance
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.
SVGs to Make Your Blog Stand Out
36 min
SVGs to Make Your Blog Stand Out
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.
The Dawning of a New Age for Fullstack React
34 min
The Dawning of a New Age for Fullstack React
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.
Sharing a Codebase with React & React Native: The Holy Grail?
7 min
Sharing a Codebase with React & React Native: The Holy Grail?
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.
Intro to React
138 min
Intro to React
Workshop
Will Voelker
Will Voelker
Essential topics covered:- Setting up and developing a react project using create-react-app- Basic JSX syntax- The declarative philosophy, what props and state are- Function components
Crash Course into the Jamstack with Next.js & Storyblok
165 min
Crash Course into the Jamstack with Next.js & Storyblok
Workshop
Samuel Snopko
Samuel Snopko
You may read already about the Jamstack. You probably already used Next.js, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why the Storyblok in combination with Next.js is the best combo for your next project. Stop and try it yourself!
React on the Blockchain - the Missing Getting Started Guide
32 min
React on the Blockchain - the Missing Getting Started Guide
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.
Turning the Cloud Inside Out
36 min
Turning the Cloud Inside Out
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.
E-commerce on the Jamstack with NextJS and Netlify
120 min
E-commerce on the Jamstack with NextJS and Netlify
Workshop
Nick DeJesus
Nick DeJesus
Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities.
Landing Your Next Developer Job
121 min
Landing Your Next Developer Job
WorkshopFree
Sadek Drobi
Nouha Chhih
Francois Bohyn
3 authors
Renaud Bressant (Head of Product), Nathanael Lamellière (Head of Customer Success and Solution Engineer), Nouha Chhih (Developer Experience Manager) will be looking at the different developer jobs that you can accounter when looking for your next developer role. We'll be explaining the specifics of each role, to help you identify which one could be your next move. We'll also be sharing tips to help you navigate the recruitment process, based on the different roles we interviewed for as recruiters, but also as candidates. This will be more of an Ask Us Anything session, so don't hesitate to share your thoughts and questions during the session.
Understand and Visualize your Data with InfluxDB Cloud
7 min
Understand and Visualize your Data with InfluxDB Cloud
Christina Robinson introduces InfluxDB and Giraffe, a JavaScript library for visualizing timestamp data. Giraffe supports various visualizations and can be used in external applications. Data can be imported into Giraffe using Flux queries via the REST API. The plot is the base entity for visualization in Giraffe, requiring CSV data and a layers object to specify the plot type and properties.
Debugging RN Android Performance
7 min
Debugging RN Android Performance
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.
Streamlining the Component Creation Process
9 min
Streamlining the Component Creation Process
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.
Shipping High Performance React Apps with Datadog and Real User Monitoring
87 min
Shipping High Performance React Apps with Datadog and Real User Monitoring
Workshop
Ben Michel
Ben Michel
The way you observe your Web App’s performance over time can make or break the experience of your users. Fortunately, you can continually stay informed about the health of every delta in your UX using Real User Monitoring, and immediately identify any issues that are holding your current users back. With it, you can manage optimizing how long it takes for users to load your App on mobile, round trip times for asset fetching, the average latency between user actions and component updates, and more ( adding a small block of code in the right place). In this workshop you’ll learn how to leverage Real User Monitoring in order to track and resolve the issues that prevent your App’s greater adoption, and retention. We’ll discuss how to think about performance from the user perspective, gauge what metrics are important to monitor continuously, and define a good strategy for alleviating the latencies and issues that affect your users most.
Complex React Migration: New Solutions to Old Codebase Problems
32 min
Complex React Migration: New Solutions to Old Codebase Problems
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.
Remember CSS Sprites? Let's Do That with Video!
7 min
Remember CSS Sprites? Let's Do That with Video!
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.
By the Power of Headless!
8 min
By the Power of Headless!
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.
Graphics, as a Function of State / Graphic = fn(state)
15 min
Graphics, as a Function of State / Graphic = fn(state)
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.
Build Your Own Live Streaming Platform
138 min
Build Your Own Live Streaming Platform
Workshop
Dylan Jhaveri
Dylan Jhaveri
In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams.
Faster media = faster websites
90 min
Faster media = faster websites
Workshop
Marissa Masangcay
Pramod Shenoy
Akshay Ranganath
3 authors
As eCommerce all around the world has shifted to a predominantly online-first platform the need to provide a high performance website to your users has significantly increased. And on top of that, google has announced that as of May 2021 Core Web Vitals will have a direct impact on page rankings and SEO making web performance even more significant. Come learn the basics of web performance and how it relates to media. Using a simple React based ecommerce app in conjunction with a media optimizing product, you can learn how to deliver the optimal format and fidelity, potentially improving your page rankings.
Intermediate Gatsby
207 min
Intermediate Gatsby
Workshop
Sid Chatterjee
Sid Chatterjee
With Gats v3 out and freshly released, learn how to build modern, performant and accessible default websites from one of the maintainers of the project, Sid Chatterjee.
The Crash Course for Continuous Code Improvement
81 min
The Crash Course for Continuous Code Improvement
Workshop
David Woller
David Woller
Every business today is a software business. Software is made of code. And code is meant to be improved. Yet developers get stuck reactively monitoring, investigating, and debugging code to fix issues. They lose too much time manually searching through logs, APM, and observability tools. Instead, they could be using that time to innovate. In this workshop, the participants will be introduced to the continuous code improvement platform that can help them see errors in real-time and gives them the tools needed to automate how they respond. Participants will learn how to instrument Rollbar's lightweight SDKs into their applications to capture uncaught exception errors as they happen along with the surrounding context and details. Participants will walk away with complete visibility on every error in their application, coupled with all the important data needed to make resolution painless.
Workshop: Mixing Content, Commerce, and SEO with Headless WordPress
114 min
Workshop: Mixing Content, Commerce, and SEO with Headless WordPress
Workshop
Matt Landers
Will Johnston
2 authors
When working with Headless WordPress it can be daunting having to setup an e-commerce site. This workshop will take you through connecting a Shopify app with your WordPress site, linking your WordPress content to your Shopify products, building a React and NextJS frontend to show your products and posts, using Yoast SEO, and deploying your site to WP Engine’s Atlas platform.
Publishing, Automating and Monitoring your JS App on Azure
138 min
Publishing, Automating and Monitoring your JS App on Azure
Workshop
Suzanne Daniels
Nick Trogh
2 authors
In this workshop you're going to deploy a JS app to our Azure Services. Obviously, we don't want to do this manually, so you're going to use GitHub actions to streamline this experience. Now that our App is on Azure, we want to make sure that we're aware of crashes and performance issues, so we'll add some App Insights in the mix. During the workshop, we'll show some cool features you could leverage!