app bridge vs polaroid

[kkriv]

What is the difference and what should I use?

My understanding - both are for admin frontend development. Bridge - is plain js based, while polaroid is react.

I should use one of them depending on js or react preference and should not/should use both at once?

Any other ideas or missed here?

[Trish_Ta]

Hi kkriv,

You can use both App Bridge and Polaris at the same time. Polaris allows you to create UI elements inside your app iframe while App Bridge provides a way to render UI in Shopify Admin outside of your app. For example, when rendering a Banner inside your app you should use Polaris. For components that gets rendered outside your app iframe such as Modal, Toast and Title Bar, you would use App Bridge.

Currently, Polaris also provides access to App Bridge components but this is being deprecated in future release: https://polaris.shopify.com/components/structure/app-provider#section-initializing-the-shopify-app-b...

App Bridge is a vanilla JS library but it has React components released in a separate package: https://shopify.dev/tools/app-bridge/react-components

If your app is a React app, you should use Polaris (@shopify/polaris) alongside App Bridge React (@shopify/app-bridge-react).

[loganecolss]

hi @Trish_Ta , why Modal, Toast, TitleBar are outside of my app?

I thought they are part of the app, no?

[ameyacharya]

This just made it a whole lot more confusing. Isn't all components of our Shopify app supposed to be on an iframe? or do I have the wrong understanding. Hope you solve this. soon.

Regards