Learn About Shopify App Development at React Summit 2021

Within Shopify, React is the default language for building both on the web and mobile. The Shopify Admin, which supports millions of merchants worldwide, is powered entirely by React and GraphQL, while all of our new mobile apps use React Native.

But React is also a hugely important library for our app developer community, and is the most commonly used front end framework for Shopify apps. Two of our most popular developer resources,PolarisandShopify App Bridge, provide comprehensive React components that developers can implement into their apps, making it easier to build intuitive UIs for merchants.

To share insights we've learned on this journey, and to demonstrate how developers can build on Shopify using React, we'll be hosting a range of workshops and talks at this year's remoteReact Summit—running April 14 to 16. In this article, we'll be exploring each of the conference events that attendees can participate in, and catching up with the speakers for a preview of what you can expect to see.

We're very excited to be teaming up with React Summit and are looking forward to seeing you at one of these events!

Developer workshops

Learn more about the developer workshops running throughout the event.

Building a Shopify App with React & Node

Date:April 8, 9:00-10:30 EST, Remote

Hosted by Shopify web developer Hanna Chen and front end developer Jennifer Gray, this workshop will give participants hands-on experience building an embedded Shopify app using theShopify App CLI,Polaris, andShopify App Bridge. This practical workshop is a great opportunity for developers already familiar with React to start building apps that integrate with the Shopify Admin and access store data.

Expanding on her popularHow to Build a Shopify App with Node and Reactvideo, Jennifer Gray expects the workshop will provide valuable guidance for app developers exploring Shopify.

"From getting to 'Hello World' in a couple minutes to creating a beautiful and seamless user experience with just a few lines of code, I'm really excited to share the tools that our teams have created to really accelerate Shopify app development," Gray says.

During the workshop, you'll be introduced to developer tools and resources that can fit into your existing workflow, to help you build seamless app experiences as quickly as possible. 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

"Developers should prepare for this workshop by installing the Shopify App CLI along with its requirements, as well ascreating a Shopify Partner account," Gray advises. "Developers will get an overview of what it means to be a 'Shopify app developer' and create a working, embedded Shopify app that interacts with a development store."

You might also like:How to Build a Shopify App as a Front End Developer.

Creating Accessible React Native Apps

Date:April 9, 9:00-10:30 EST CET, Remote

React Nativeis 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?

In this workshop, Shopify Platform Accessibility Specialist Scott Vinkle will share tips on how to test and build React Native apps with accessibility baked in. Drawing on his experiences working onShopify's Covid Shield app, Vinkle will explore techniques for testing and implementing accessibility best practices for React Native apps.

"Not only will I be sharing technical details of React Native, but also the social aspect of digital accessibility," Vinkle says. "We'll be exploring what to watch for in terms of inclusive design best practices and how to address common issues with the React Native Accessibility API."

"Get your phones and simulators ready for some screen reader testing!" Vinkle advises. "MacOS and iOS environments already have VoiceOver built in, but Android emulators need theAndroid Accessibility Suiteinstalled."

Vinkle will share specific examples from Shopify’s Covid Shield app that examine the before and after effects of implementing accessibility improvements.

本研讨会的参与者将学习如何:

• Create accessible React Native apps
• Test for accessibility in both iOS and Android emulators
• Understand how the React Native accessibility API relates back to web development
• Find React Native accessibility documentation

You might also like:How to Build a Shopify App: The Complete Guide.

Conference talks

In addition to workshops, be sure to catch the following conference talks by Shopify employees.

Remote Rendering With Web Workers

Date:April 14, 10:50–11:45 EST, Remote

Argois a powerful extensibility framework that allows developers to seamlessly extend Shopify’s apps on every platform. In this talk, Shopify Staff Developer Trish Ta will explore how we built Argo, and how it can be adopted by our developer community. Behind the scenes, Argo uses web workers and an open sourced library,remote-ui, to create a sandboxed execution environment for external scripts.

"I’m excited to share how we were able to build a solution to allow developers to write React or JavaScript code and have it work natively inside Shopify’s apps," Ta says. "Attendees can expect to learn about the building blocks of Argo, and how the architecture allows it to work with different technologies both on the app side and the host side"

Already in use with ourSubscriptions API, Argo provides developers with APIs to execute behavior on the main app, and a component library that renders a native UI identical to Shopify’s own component whether it’s on iOS, Android, or web. Additionally, Argo is starting to play a larger role within the Shopify developer experience withArgo apps using session tokensto authenticate requests between extensions and the backend server.

This talk will be valuable for developers looking to understand the future of app development with Argo, and how it can allow developers to build secure and consistent solutions that ensure the best experience for merchants.

Battle-Tested Techniques for Animation and Data Viz with React

Date:April 14, 13:37-13:57 EST, Remote

D3is a JavaScript library for manipulating documents based on data, and has been used to generate visualizations with HTML, SVG, and CSS. In this talk, Shopify Senior Front End Developer Krystal Campioni will discuss how to combine the power of D3 as a math library with React’s rendering capabilities.

"We’ve been doing a lot of explorations of how to use motion to make our data charts tell a story," Campioni says. "I’m super excited to share what we learned from a developer perspective, with a bunch of code examples showcasing D3 andreact-spring."

As Campioni digs deeper into techniques applied to real-world examples, she'll be exploring how to:

• Encapsulate animation for reuse with React functional components
• Deal with restrictions in data structures to create interesting visualizations
• Approach performance issues when there are multiple animated elements on the screen

Shopify and React: A winning combination

With the ease of being able to integrate front end components straight into your Shopify app projects, React is a natural choice for many app developers. We're looking forward to sharing more insights for developers during React remote summit.

If you're thinking of building on Shopify with React, this conference offers the opportunity to learn how to create intuitive, accessible, and secure UIs.