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:

Introduction to React

Format:

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

Function components

Additional topics covered:

1-directional data flow

Writing stateful components

Writing components that handle events such as onClick

Controlled and uncontrolled form components

Class components

Advanced outcomes

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

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.

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.

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.

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

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

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

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.

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

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!

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.

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.

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.

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.

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.

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.

How to Build an Interactive “Wheel of Fortune” (aka spin to win) Animation with React Native.

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.

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.