The workshops below are the complimentary part of full tickets.
They will be run remotely via Zoom.
The recordings of most workshops will be shared with full ticket holders after the conference.
Intermediate Gatsby Workshop
With Gatsby v3 out and freshly released, learn how to build modern, performant and accessible by default websites from one of the maintainers of the project, Sid Chatterjee. The main topics for this workshop will include:
- - Getting started with Gatsby v3
- - CSS and layout
- - Routing
- - Performant Images using Gatsby Image
- - Querying data with GraphQL, working with a headless including Contentful and Sanity
- - Mixing static and dynamic content
- - Building custom backend agnostic GraphQL types
- - Authentication and Protected Routes
- - Using Gatsby Themes
- - Deploying to Gatsby Cloud
Beginner-to-intermediate React skills
Date - April 5, 16:00-20:00 CEST. Remote.
Introduction to React
Exposition, small-group exercises, Q&A
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
Additional topics covered:
1-directional data flow
Writing stateful components
Writing components that handle events such as onClick
Controlled and uncontrolled form components
Pointers for next steps, e.g. context, higher order components, custom hooks, using React with typescript, testing with Jest and Enzyme
Any other questions about React
Date - April 6, 17:00-21:00 CEST. Remote.
Hybrid Cloud Development with Next.js, AWS, and Tailwind
In this workshop you'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.
We'll build out a multi-user blogging platform, implementing a database with DynamoDB, authentication with Amazon Cognito, and a GraphQL API with AWS AppSync and connect to the app from the Next.js client using AWS Amplify. Users will be able to edit and delete their own posts as well as add rich media like cover images using Amazon S3.
By the end of the workshop, you should have a good understanding of how to build full stack apps on AWS with Next.js and AWS Amplify.
Date - April 6, 18:00-21:00 CEST. Remote.
Landing Your Next Developer Job
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.
Date - April 7, 18:00-20:00 CEST. Remote
Incrementally Adopt Modern React Patterns in a Legacy Codebase
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.
- Working knowledge of React, aimed at those currently working on React codebases.
- Up to date version of Node and basic dev environment setup for cloning and running a React app.
Date - April 7, 17:00-21:00 CEST. Remote.
Building a Shopify App with React & Node
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs by 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. We’ll walk you through how to:
- Create an embedded Shopify app using the Shopify App CLI
- Build an interface with Polaris React components
- Take actions in your React app with App Bridge components
Attendees will need a Shopify Partner account with a development store, and should be comfortable writing React and using the command line.
Date - April 8, 15:00-16:30 CEST. Remote
Mixing Content, Commerce, and SEO with Headless WordPress
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.
Format: exposition, code-along with Q&A
- - Pull in products from Shopify and blog posts from WordPress
- - Display related content next to products and related products next to content
- - Create a custom content type to link posts and products
- - Use Yoast for SEO with a React component
- - Deploy to WP Engine Atlas
- Local WordPress site (localwp.com)
- Shopify store (developer account)
Date - April 9, 16:00-18:00 CEST. Remote.
Creating Accessible React Native Apps
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable by everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!
Objective: Share insight into testing and implementing accessibility best practices for React Native apps.
Five Things Audience Members Will Learn:
- Creating accessible React Native apps is possible
- How to test for accessibility in both iOS and Android emulators
- Specific examples (before and after) will be shared from Shopify’s Covid Shield app
- How the React Native accessibility API relates back to web development
- Where to find React Native accessibility documentation
Some React and/or React Native, some ARIA
Date - April 9, 15:00-16:30 CEST. Remote.
Build Your Own Live Streaming Platform
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.
Date - April 12, 18:00-21:00 CEST. Remote.
State Management in React with Context and Hooks
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.
What you'll learn:
- React Hooks
- Lifecycles in function components
- Using the Context API
- Component state vs Global state
- Preserving state
- Alternatives: Recoil, Immer.js
Experience with ES2015+, React
A computer with node and npm installed
Date - April 13, 17:00-20:00 CEST. Remote.
Crash Course into the Jamstack with Next.js & Storyblok
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 by and try it yourself!
- - Introduction into the Jamstack & headless world
- - Understand the power of the atomic design
- - Environment setup
- - Creating the first page
- - Creating article pages & understand how the dynamic routing works
- - Deployment to Live
- - Future tips and Q&A
Date - April 19, 17:00-20:00 CEST. Remote.
The Crash Course for Continuous Code Improvement
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.
- - 1. Introduction to the topic of Continuous Code Improvement
- - 2. Demo - Lifecycle of A Bug
- - a. Demonstration for real time alerts about errors in the applications, at any stage of the software development lifecycle
- - b. Reveal contextual metadata included with every occurrence of a bug
- - c. Error Classification: Default Grouping + Custom Grouping
- - d. Querying for Custom Workflows - Improving Signal with Custom Alerts
- - e. Focus on New Bugs Every Release
- - 3. Training Session - How to get started with your first project setup
- - 4. Wrap-up Time - Beyond The Demo: Getting Value from Error Data
Date - April 19, 17:00-19:00 CEST. Remote.
Publishing, Automating and Monitoring your JS App on Azure
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!
If you want to get hands-on yourself, you should create your Free Azure account in advance on azure.com/free, and a GitHub account – We'll also have a limited number of Azure Passes available.
Date - April 20, 16:00-18:00 CEST. Remote.
Faster media = faster websites
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.
Date - April 20, 18:00-19:30 CEST. Remote
React Hooks Tips Only the Pros Know
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 by a better understanding of how each React hook can be used.
Join me with your laptop in this interactive workshop. 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.
Date - April 21, 16:00-20:00 CEST. Remote
React at Scale with Nx
The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling.
We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.
Date - April 21, 17:00-21:00 CEST. Remote.
Shipping High Performance React Apps with Datadog and Real User Monitoring
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 (by 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.
- - Interactive Demo: See and hear latency (Web App performance and user joy scale linearly)
- - Add Real User Monitoring to Conduit (an open source clone of medium.com built on React)
- - Identify performance bottlenecks and anomalies in Conduit using Datadog’s RUM Explorer
- - Resolve Conduit’s issues
- - Verify the problems have been fixed using the RUM Explorer
- - Monitoring the user experience with Dashboards: User Sessions, Performance, and custom Dashboards for valuable metrics and BI
- - Q&A, and additional resources
Date - April 21, 18:00-20:00 CEST. Remote.
How to Build an Interactive “Wheel of Fortune” (aka spin to win) Animation with React Native.
- - 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
Date - April 22, 16:00-18:00 CEST. Remote.
E-commerce on the Jamstack with NextJS and Netlify
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.
- - Set up and Intro to NextJS
- - Theming with Theme-ui and components
- - Intro to use-shopping-cart and Stripe
- - Building components with use-shopping-cart
- - Serverless functions with Netlify and creating a Session ID
- - Showing off some Netlify Features: Split Testing, Forms etc
Date - April 22, 18:00-20:00 CEST. Remote.
Build Fullstack Apps with Blitz.js in Record Time
Come explore how you can leverage the unique properties of Blitz.js, that is extending Next.js, to help you build your next app in a fast and fun way. Learn how you can stop thinking about api's as you feel like you are importing server code on the client side! We'll build a fun toy app from start to finish to give you a taste of what it's like to use this wonderful framework. Everybody is welcome, no matter where you are in your journey. Workshop author is a Blitz.js contributor and level 1 maintainer.
Date - April 23, 17:00-19:00 CEST. Remote.