+ Remote

LEARN FROM THE BEST
TRAINERS WORLDWIDE

Free Workshops

The workshops below are the complimentary part of Full Tickets.

They will be run remotely via Zoom.

All Full Ticket holders will get an email with a code to register to these workshops.

The recordings of most workshops will be shared with full ticket holders after the conference.

  • How to Design a Sustainable Freelance/Contracting Career (from Toptal team)

    Ready to kickstart your freelance career or just getting started on your journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.

    The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.

    This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.

    At the end of the workshop there will be a Q&A session with a Toptal Talent (Developer) who can answer your questions and provide insights and tips into their own success.

    Workshop schedule & location

    Date & time: October 18, 17:00-18:30 BST. Remote.

  • Best Practices and Advanced TypeScript Tips for React Developers

    Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.

    In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

    Workshop schedule & location

    Date & Time: October 26, 14:00-17:00 BST. Remote.

  • Introduction to React Native Testing Library

    Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.

    But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.

    Table of contents

    • The different kinds React Native tests, and where component tests fit in
    • A mental model for thinking about the inputs and outputs of the components you test
    • Options for selecting text, image, and native code elements to verify and interact with them
    • The value of mocks and why they shouldn’t be avoided
    • The challenges with asynchrony in RNTL tests and how to handle them
    • Options for handling native functions and components in your JavaScript tests

    Prerequisites

    • Familiarity with building applications with React Native
    • Basic experience writing automated tests with Jest or another unit testing framework
    • You do not need any experience with React Native Testing Library
    • Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/

    Workshop schedule & location

    Date & Time: October 28, 15:00-18:00 BST. Remote.

  • Building for Web & Mobile with Expo

    We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.

    In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!

    Table of contents

    • Setting up drawer and stack navigators with React Navigation, including responsiveness
    • Configuring React Navigation with URLs
    • Setting up React Native Paper including styling the React Navigation drawer and headers
    • Setting up a custom color theme that supports dark mode
    • Configuring favicons/app icons and metadata
    • What to do when you can’t or don’t want to provide the same functionality on web and mobile

    Prerequisites

    • Familiarity with building applications with either React or React Native. You do not need to know both.
    • Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/

    Workshop schedule & location

    Date & Time: October 27, 15:00-18:00 BST. Remote.

  • Best Practices and Patterns for Managing API Requests and States

    With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.

    Table of contents

    • Introduction
    • What is the API Layer, and what problems does it solve?
    • Implementing the API Layer
    • How to handle API states during requests and provide meaningful feedback
    • Request cancellation with the API Layer
    • APIs at scale with API Layer and React-Query

    Prerequisites

    To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.

    Workshop schedule & location

    Date - October 25, 13:00-17:00 BST. Remote.

  • End-To-End Type Safety with React, GraphQL & Prisma (from Prisma team)

    In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.

    Table of contents

    • Welcome & kickoff
    • Set up Prisma (lesson 1)
    • Set up a GraphQL server (lesson 2)
    • Build the GraphQL schema (lesson 3)
    • GraphQL on the client (lesson 4)
    • Bridge the gap (lesson 5)
    • Wrap up

    Prerequisites

    • Node.js installed on your machine (12.2.X / 14.X)
    • It is recommended (but not required) to use VS Code for the practical tasks
    • An IDE installed (VSCode recommended)
    • (Good to have)*A basic understanding of Node.js, React, and TypeScript

    Workshop schedule & location

    Date & time: October 12, 17:00-19:30 BST. Remote.

  • Build a Modern GraphQL Server Using GraphQL Yoga

    In this workshop we’ll build a GraphQL Yoga server from scratch, as well as cover how you can use Yoga inside of frontend applications like Next.js. We’ll also look through the plugin ecosystem of Envelop, and what can be added to Yoga to fully customize it to your needs.

    Workshop schedule & location

    Date & Time: - October 31, 15:00-18:00 BST. Remote.

  • Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

    In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.

    We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.

    Prerequisites

    • Familiarity with and experience working on large react codebases
    • A good understanding of common approaches to styling in React

    Workshop schedule & location

    Date & Time: November 1, 15:00-18:00 BST. Remote.

  • Getting Familiar with NextAuth.js (from Sourcegraph team)
    • How to implement authentication in your React apps with NextAuth.js
    • How to use Sourcegraph to quickly understand specific parts of the library
    • Finishing the session with a scavenger hunt

    Workshop schedule & location

    Date & time: October 18,15:00-16:00 BST. Remote.

  • Getting Started with AG Grid and React - The Best Javascript Grid in the World!

    Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

    We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.

    Table of contents

    • Column Definition: Row Data, Row Sorting, Default Column, Definition Filtering
    • Cell Rendering: Value Getter, Value Formatter, Cell Renderer Function, Cell Renderer Component
    • Cell Editing: Provided Cell Editors, Cell Editor Component
    • Persisting
    • Styling AG Grid: Cell Styling, Row Styling, Themes

    Prerequisites

    Basic React and JavaScript.

    Workshop level

    Beginner.

    Workshop schedule & location

    Date & time: October 17, 17:00-20:00 BST. Remote.

  • Build a Product Page with Shopify’s Hydrogen Framework (from Shopify team)

    Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.

    Table of contents

    • Get started with the hello-world template on StackBlitz
    • File-based routing to create a /products/example route
    • Dynamic routing /products/:handle
    • Hit the Storefront API with GraphQL
    • Move the query into the Hydrogen app
    • Update the query to fetch a product by handle
    • Display title, price, image & description.
    • Tailwind styling
    • Variant picker and buy now button
    • Bonus if there’s time: Collections page

    Prerequisites

    • A Chromium-based browser (StackBlitz)
    • Ideally experience with React. A general web development background would be fine.

    Workshop schedule & location

    Date & time: October 19, 15:00-16:30 BST. Remote.

  • Introducing Flashlist: Let’s Build a Performant React Native List All Together (from Shopify team)

    In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.

    Table of contents

    • Quick presentation about what FlashList, why we built, etc. (probably a more simple version of the presentation I had at RNEU)
    • Migrating from FlatList to FlashList
    • Teaching how to write a performant list
    • Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)
    • Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)
    • Optimizing performance of FlashList by using more advanced props like `getType`
    • 5-6 sample tasks where we’ll uncover and fix issues together
    • Q&A with Shopify team

    Workshop schedule & location

    Date & Time: Oct 19, 17:00-18:30 BST. Remote.

  • Using Feature Flags With Next.JS (from LaunchDarkly team)

    One of the most powerful aspects of Next.js is that it offers tools that let you render content at multiple points - whether that be at the build time, on the server, even or on the client. Beyond this, it offers an option for deferred rendering that builds pages only when they are requested.

    While these options add a lot of power, they can also create some confusion if you want to integrate Next.js and LaunchDarkly. Which library do you need? Where do you import and configure it? How do you use it once it is set up?

    In this workshop, we'll answer these questions for the different types of integrations Next.js offers.

    Workshop schedule & location

    Date & time: October 13, 15:00-16:30 BST. Remote.

  • Crash Course Into Multilingual Websites With next.JS and Headless Content (from Kontent team)

    In this crash course, we'll create a new project in the headless CMS, fill it with data, and use the content to build a multilingual Next.js app. We'll spend a lot of time in code to:

    • Generate strongly typed models and structure for the content
    • Set up the site for multiple languages
    • Use respective language codes in content fetching and incorporate language fallbacks
    • Resolve multilingual content from rich text fields

    You will learn:

    • How to work with content from headless CMS (Kontent.ai)
    • How content model can be leveraged to generate TS types and what benefits it brings to your project
    • How to add multilingual capabilities to Next.js website
    • How to use language fallbacks
    • What are the typical gotchas when working with multilingual content

    Workshop schedule & location

    Date & time: October 14, 15:00-17:30 BST. Remote.

  • A Tale of Two Codebases (from Modus Create team)

    Anybody can write code that “works.” But what makes the best engineers stand out is their ability to create solutions that are clear, concise, testable and easy to understand and maintain. Join us as we explore two of React’s most powerful tools for well-architected solutions by starting with a suboptimal game codebase and refactoring it using industry best practices such as custom hooks, higher-order components (HOCs) and contexts.

    Table of contents

    • Introduction of the initial implementation and description of its issues.
    • Presentation of the tools available to improve the code base.
    • The mindset behind architecting clean solutions and refactoring.
    • Highlevel passthrough of the code and creation of the plan.
    • Extraction of code into utility functions.
    • Extraction of state and effects into custom hooks.
    • Grouping behavior into HOC.
    • Creation of root level context and child components cleanup.
    • Result overview and discussion of possible future improvements.
    • How to keep your code clean, rules to follow and limitations to impose.

    Prerequisites

    A computer with git installed and a GitHub account.

    Workshop level

    Intermediate.

    Workshop schedule & location

    Date & time: October 13, 17:00-19:00 BST. Remote.

  • Build a Fullstack App Fast with Modern Tools (from Amazon team)

    Learn how to build web apps from design in Figma to deploying to AWS while moving very fast.

    Workshop schedule & location

    Date & time: TBC. Remote.

  • Hands-on E-commerce Storytelling With Storyblok, Gatsby and Shopify (from Storyblok team)

    In this workshop, you will integrate a decoupled Gatsby Shopify website into Storyblok real-time visual editor.

    1. Connect Gatsby with Shopify and build the catalog
    2. Build the shopping Card functionality using shopify-buy
    3. Connect Gatsby with Storyblok
    4. Build editable components for the Storyblok visual editor, including Shopify products and Collections

    Prerequisites

    Workshop level

    React and Gatsby intermediate.

    Workshop schedule & location

    Date & time: October 20, 15:00-18:00 BST. Remote.

Trainers

Maurice de Beijer

Independent Software Consultant and Trainer, Netherlands

Maurice de Beijer is an independent software consultant and trainer. He specializes in JavaScript, React, and ASP.NET Core. His work includes a large, global, safety application for the oil and gas industry. Maurice is also active in the open source community. He teaches ECMAScript, TypeScript, React, RxJS and ASP.NET courses. Since 2005, he has received Microsoft’s Yearly Most Valuable Professional Award. Maurice is also active in the Dutch dotNed user group and helps organize its meetings.

Josh Justice

React trainer, USA

Josh Justice has worked as a developer since 2004 across frontend, mobile, and backend platforms. As a consultant he collaborates with teams to help them deliver great apps by optimizing their tech stack and development practices. He also writes, speaks, and livestreams about React and React Native, testing, and software design.

Thomas Findlay

Findlay Web Tech, UK

Thomas Findlay is a 5-star rated mentor, full-stack developer, consultant, and technical writer. He works with many different technologies such as JavaScript, Vue, React, React Native, Node.js, Python, PHP, and more. He has obtained MSc in Advanced Computer Science degree with Distinction at Exeter University, as well as First-Class BSc in Web Design & Development at Northumbria University.

Over the years, Thomas has worked with many developers and teams from beginners to advanced and helped them build and scale their applications and products. He also mentored a lot of developers and students, and helped them progress in their careers.

Sabin Adams

Prisma, USA

I'm Sabin Adams, and I've been working in web development for about ten years now. I love solving problems and making tools that make developers' lives easier, and currently, I work as a developer advocate for Prisma. Teaching, speaking, and writing about web development is my passion!

Jamie Barton

Grafbase, UK

GraphQL, React, Serverless, and Jamstack advocate. Mostly creating videos and content on this, and more.

Richard Moss

Sainsbury's, UK

An avid technologist, Richard has worked on a variety of projects with a diverse range of people, crossing technologies, languages, and continents. With a particular focus on the front end space, he is currently working across teams to help build and develop the tech function at Sainsbury’s. Passionate about teaching and sharing, he’s also a co-organizer of JavaScript London and was previously a senior coach at React GraphQL Academy helping professional devs take their skills to the next level.

Yoway Buorn

Sourcegraph, Turkey

Yoway is a technical Customer Engineer experienced in DevOps, security, analytics and software development. He loves kebabs and traveling with his wife Julie and their cats Bowie and Franklin.

Simon Waterer

Sourcegraph, UK

Simon lives in Buckinghamshire near Oxford, though he grew up in Edinburgh. He likes most sports but especially cricket, rugby and F1. He lives with his wife Julie, cats Tabatha and Sadie and Willow the 1 year old sprocker spaniel. He loves spending time outdoors taking the dog for a walk, walking around with a bag of golf clubs - and one day maybe able to do both. He has worked across a range of technologies including object and NoSQL databases, high performance and grid computing.

Ajay Sridhar

Sourcegraph, UK

Ajay lives in the UK with his wife and daughter, he came over to Sourcegraph from prior sales roles at Puppe. He loves everything sports and cars, in his spare time you will either find him at the gym or doing something fun outdoors.

Brian Love

LiveLoveApp, USA

Brian is a Principal Architect at LiveLoveApp where he provides technical leadership, product design and development, and helps companies deliver absolute joy. Brian is a Google Developer Expert in Web Technologies with a passion for learning in public. When not coding, Brian enjoys skiing, hiking, and being outdoors.

David Witt

Shopify, USA

David is a Developer Advocate at Shopify, and previously a tech lead for an ecommerce agency. He is new to Shopify, but brings ten years of ecommerce and software experience with him to help foster relationships with Shopify and the developers using the platform.

David Cortés Fulla

Shopify, Spain

Development Manager in the React Native Foundations team.

Marek Fořt

Shopify, Germany

Software Engineer in the React Native Foundations team.

Talha Naqvi

Shopify, Canada

Development Manager on the Retail Dev Accelerate team.

Jessica Cregg

LaunchDarkly, UK

Jessica is a Developer Advocate at LaunchDarkly. She writes articles and tutorials for tech publications and works as a co-organiser of DevOpsDays London and the regular meetup group DevSecOps London Gathering. She also works with Coding Black Females and Women In DevOps.

Ondrej Polesny

Kontent by Kentico, Czech Republic

Ondrej is a Jamstack enthusiast focused mostly on React and Vue-based tools. As a Developer Evangelist at Kontent by Kentico, he constantly stays connected with in-house and partner developers, which brings him closer to many interesting digital projects built with various tools. Always interested in problems that everyone claims have no solution, Ondrej enjoys building the architecture of components or applications and figuring out how all parts fit together. He also creates videos and speaks at conferences and podcasts.

Michael Tintiuc

Modus Create, Moldova

Michael is a full-stack engineer and designer with over a decade of commercial experience in multiple web and mobile technologies. An advocate and frequent contributor to open source software, Michael is the author of the ionic/vue library which allows developers all over the world to write Ionic mobile apps using the Vue framework. In his free time, he enjoys game development, contributing to Open Source, hardware modding and creating projects in new languages.

Christian Nwamba

Amazon, UK

Chris Nwamba is a Senior Developer Advocate at AWS focusing on AWS Amplify. He’s also a teacher and with years of experience building products and communities.

Alexa Spalato

Storyblok, Spain

Alexandra Spalato is a Developer Relations engineer at Storyblok.She was born and raised in France and lives now on the beautiful Spanish island of Mallorca.While working as a freelance developer and entrepreneur, she decided to fully specialize in JAMstack.Her strong support of that technology and promotion to her clients led her to establish GatsbyWPThemes.As an advocate for headless architecture, she is now part of Storyblok, a company that best represents it.

We guarantee

  • Modern training courses from first-class industry experts
  • Small-sized groups for maximum individual attention
  • A focus on practical exercises to promote learning by doing
  • Our friendly team on-hand to answer your questions

If you are a developer

Whether you are looking for skills to help you level up at work, get a promotion, or make yourself more competitive in the job market, our full-day workshops taught by industry experts are designed to get you there. Training in the fastest-growing JavaScript frameworks will make you a developer in demand, opening the door to new and exciting career opportunities. Learn to unleash the full potential of React and React Native and see for yourself!

If you are a business owner

Investing just eight hours in your employees’ development can result in a substantial improvement in performance. Let’s say 10 of your engineers attend a full-day workshop. In the next year, they will put in approximately 20,000 hours of work for your company. If, after the workshop, their performance improves by only 1%, your organization will have gained 200 hours of work in return. That's an impressive outcome for just one day of training!