Shopify’s platform is the Web platform

Surma

Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills.

Shopify

•

Surma

•12 min read•intermediate•

--

•View Original

CDNGraphQLHTMLJavaScriptLocalStorageMySQLOAuthPrismaReactRedisRemixSQLite

Overview

The article discusses Shopify's transition to using Remix as the recommended framework for building Admin apps, emphasizing the importance of web standards and developer experience. It highlights the new App Bridge, which enhances integration and functionality for apps within Shopify's ecosystem, while also addressing common challenges faced by developers working with iframes.

What You'll Learn

1

How to build Admin apps on Shopify using Remix

2

Why using App Bridge is essential for deep integration with Shopify Admin

3

How to implement server-side rendering with Remix for enhanced performance

Prerequisites & Requirements

Familiarity with web development concepts and frameworks
Basic understanding of Remix and Shopify's API(optional)

Key Questions Answered

What is the recommended way to build Admin apps on Shopify?

The recommended way to build Admin apps on Shopify is by using Remix, which provides a best-in-class developer experience and ensures high performance. Remix allows developers to leverage their existing web development skills and integrates seamlessly with Shopify's platform.

How does App Bridge enhance app integration with Shopify Admin?

App Bridge enhances app integration by providing a message-based protocol that allows apps to communicate with Shopify Admin. It restores functionalities that browsers have restricted, enabling deeper integration and a consistent experience across web and mobile platforms.

What are the limitations of using iframes in Shopify Admin apps?

Iframes in Shopify Admin apps face restrictions such as inability to set cookies or store data in local storage due to browser sandboxing. This can complicate user tracking and data persistence, making it essential to use the postMessage() API for communication between the app and Shopify Admin.

What improvements does the new version of App Bridge offer?

The new version of App Bridge simplifies setup by allowing developers to include a script tag in their document's head, eliminating the need for complex initialization code. It also fixes issues caused by iframe restrictions, enabling standard web development practices to work seamlessly.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend

Remix

Used as the recommended framework for building Shopify Admin apps.

Frontend

App Bridge

A message-based protocol for integrating apps with Shopify Admin.

Backend

Graphql API

Used for interacting with Shopify's data and services.

Database

Prisma

Provides an ORM for managing database interactions in Shopify apps.

Key Actionable Insights

1
Utilize Remix for building Shopify Admin apps to leverage modern web development practices.
Remix allows developers to create fast and resilient web apps, making it easier to manage data and improve performance through server-side rendering.

2
Implement App Bridge in your Shopify apps to enhance integration and user experience.
By using App Bridge, developers can restore functionalities lost due to iframe restrictions, allowing for a more cohesive app experience within Shopify Admin.

3
Take advantage of the new App Bridge features to simplify your app's setup process.
The updated App Bridge allows for a straightforward script inclusion, reducing setup complexity and ensuring immediate access to new features and fixes.

Common Pitfalls

1

Misunderstanding iframe restrictions can lead to functionality issues in Shopify Admin apps.

Developers may assume that standard web practices apply within iframes, but restrictions on cookies and local storage can hinder app performance and user tracking.

2

Neglecting to implement App Bridge can result in a disjointed user experience.

Without App Bridge, apps may not integrate well with Shopify Admin, leading to a less cohesive experience for merchants.

Related Concepts

Web Development Best Practices

Server-side Rendering With Remix

Integration Patterns For Shopify Apps