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 over 1.7 million 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, Polaris and Shopify 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 remote React 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 the Shopify App CLI, Polaris, and Shopify 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 popular How to Build a Shopify App with Node and React video, 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 as creating 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 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? 

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 on Shopify'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 the Android Accessibility Suite installed."

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

Participants of this workshop will learn how to:

• 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

Argo is 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 our Subscriptions 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 with Argo apps using session tokens to 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

D3 is 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 and react-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.