Shopify App Bridge

[Shayne]

App Bridge rollout meter : 100%

Revised Launch Date : Thursday, November 8th, 2018.

We’re excited to announce that we're launching a new way for apps and channels to be embedded directly into the Shopify admin, including Shopify mobile and POS. This new library is called Shopify App Bridge. This consolidated tooling brings together the functionality previously provided by the Embedded App SDK and the POS App SDK and makes building and testing embedded apps easier through:

• Modern development workflows (npm, TypeScript support, and more!)

• Support for Redux DevTools

• More and better error reporting

• Strict versioning using semver

This update is currently being rolled-out to all current consumers of the EASDK, and since it’s backwards compatible, no new work is needed to get it set-up. It’ll also be available as open source on GitHub soon as well.

The titlebar has had a much needed redesign, adding extra space for future features and separating primary actions from secondary (screenshot below).

Embedded apps using App Bridge will also be able to access a new navigation menu builder, available as a new app extension in the Partners dashboard.

These improvements will help cut down your development time and ensure your app renders consistently across platforms—desktop, mobile, and Shopify POS.

For more information, please check out the docs here.

EDIT: 
Some people have been emailing in asking about the why of these changes, specifically the change to the title bar structure. 

We're working towards a future that includes more titlebar actions, with deeper, more extensible connections into the product. Offering support, leaving reviews, and a ton of other ideas are on the table. The old title bar just didn't give enough space to offer the kind of improvements that we're working on, so it made sense to release it with App Bridge.

The only method that was removed was ShopifyApp.Modal.input, due to it's exceptionally low use (only 77 total clients). In it's place, iFrame Modals can be used,

We're always looking for feedback; post it in the forums, or email us and we can set up a call — we're happy to talk about the future of the platform and want to make sure your voice is heard.

[Bjorn_Forsberg_]

Hey Shayne,

Found another issue on my test account. The issue is that the new button/nav bar from the previously accessed app is displayed when logging into another app, until the new app is "ready".

Steps to reproduce:

1- Login to any app that adds buttons to the top bar. Wait for the app to finish loading and make note of the buttons shown:


2- Go to Shopify Admin -> Apps
3- Login to any other embedded app
4- You'll notice that while the app is loading up, the buttons from previous app are displayed.

Hope it's useful. I have to admit, it worries me that I've found 3 issues on my beta and I'm not even looking for them.. just stuff I notice as I'm going about my normal business.. and this is rolling out to merchants already 😕

Either way,  have a great Friday! 🙂

[Dan_Sundy]

I never got an answer on how to remove the byline with Polaris. It doesn't make any sense in our app.

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

[HunkyBill]

Waiting on Polaris, like waiting on Godot.

[Shayne]

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

The "by Company" text is there to clearly display to merchants that this is an experience that's not built by Shopify. This becomes increasingly important as Polaris includes more and more features.

 

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

Polaris v3 was being blocked by App Bridge launch, but it's ready to go out now. If you want to opt out for the time being, send me an email with your app name and I'll get it done.

[Maris]

+1 from me as well to be able to bring back the top bar to one row.

We don't have too many buttons there, and this additional row really takes up so valuable app screen space, with no good reason for that.

Just an idea to consider for a solution:

1. "by <Company" could be put right after the app title.

2. Make the buttons jump to a second row only if there is not enough space for them to fit in the first row (wrap all or none to the second row). Making this as a responsive-UI experience.

Really appreciate if you can consider this...

[Parcel_Intellig]

Whatever change was rolled out recently seems to have broken to query string in a modal.open request. Can this be rolled back please?

[Eduardo12]

As a dev Shopify Gurus complicate transmitting information on issues that need to be addressed by Shopify devs. They have zero understanding of the more technical side of Shopify. Shopify needs a line of communication between their dev team and app developers if they want to succeed. I've given up on trying to get issues resolved and instead work around the bugs knowing that hundreds of other devs will end up falling into the same pitfalls.

[Kris_Doyle]

Hi All,

I've have a Modal from the old EASDK that's no longer working since App Bridge.

The code to open it is:

ShopifyApp.Modal.open({
    src: '<the_url_here>',
    title: 'The Title',
    height: 600,
    buttons: {
        primary: {
            label: 'Primary',
            message: 'importForm_submit',
            loading: false,
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        },
        secondary: {
            label: 'Secondary',
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        }
    }
});

And the form that populates the Modal is:

<form data-shopify-app-submit="exportForm_submit" class="form-horizontal" method="post">
   <input name="_token" type="hidden" value="<csrf_token>">
   <input name="shop" type="hidden" value="<shop>">
   <input name="collectionId" type="hidden" value="<collection_id>">
   <input name="type" type="hidden"  value="<type>">
   ...
</form>

There's other stuff in there but the <form> tag is the important bit.

There's two problems I'm running into:

1. The height param is being ignored making the modal too short which creates a scroll bar
2. When I click the Primary button, the submit is no longer being triggered so the form is never submitted. The callback fires and closes the window but nothing else happens

This has been working up until the release of App Bridge. My production app still works but App Bridge hasn't been enabled for it yet thankfully.

Any ideas?

EDIT:

After messing around a bit, I have a workaround:

1. Use ShopifyApp.Modal.setHeight() to specify the height within the modal window
2. Instead of relying on the postMessage, I added an ID to the form, and then I added ShopifyApp.Modal.window().document.getElementById('formId').submit(); to the callback function in the modal host window to force the submit.

Although this works, it would be nice to know why it changed. Not critical anymore but good to know all the same 🙂

Thanks,
Kris

[Kris_Doyle]

Hi All,

One other problem I'm having is with the resource picker. The Collection picker is now returning some incorrect data for Smart collections. It also no longer returns the Smart collection "rules".

Below is the object returned for one of my Smart collections from the Collection Picker (this is a published collection in the Online Store):

body_html: "<p class="well no-product-html">No HTML available for this collection.</p>"
handle: "specific-shoes"
id: 404960718
image: {alt: null, created_at: null, height: null, src: "https://cdn.shopify.com/s/files/1/1370/5471/collec…5663-c33c-4e48-8e71-61836403ef08.jpg?v=1484187967", width: null}
published_at: null
published_scope: null
sort_order: "best-selling"
template_suffix: null
title: "New Sneakers"
type: "custom"
updated_at: "2017-11-04T20:38:36Z"

1. The "type" is "custom" but should be "smart"
2. There are no "rules" present in the data
3. I'm pretty sure the "published" data (scope and date) are incorrect as well since this is a published Smart collection at the moment.

Thanks,
Kris

[Kris_Doyle]

Sorry, one more.

According to this if you don't include a "style" setting of "danger", the Confirm Modal will default to the primary color (blue). I don't set the style on any of my confirm boxes and they're all defaulting to "danger" red since the release of App Bridge. I've tried putting other styles in but it always defaults to "danger".

Thanks,
Kris

[Maris]

Hi, App Bridge developers.

Here's a weird IFrame inside the IFrame sizing issue - the outer IFrame seems to have the wrong height, causing it to become scrollable.

Here's the video where you can see that (couldn't embed, so sending the link): https://youtu.be/UCitundoRxA

Is there something I can do to fix this, or you need to fix it on your side?

Thanks!

[SK3]

The latest update causing our App loading twice and no longer working.

Please help!

[KDeveloper]

We are really dont happy with this update:

1. Two line top menu look weird - on small screens it take a lot of screen height!

2. Buttons at menu now mixed up - how to align all buttons right ?

3. Not all developers like React or Redux, but now you force to use it. React+Redux is not best js components system, we prefer other solutuions and want continue use old EASDK

4. Why do you think about drop support of EASDK ? Meny app build with this SDK, migration to App Bridge need significant changes in apps, it can be expensive for app developers.

[Brendan3]

EASDK is being deprecated in a year? I am working on a new app, and if I don't agree to fight upstream with React/Polaris/any other technical decision that Shopify decides to foist on me, I am going to see my app deprecated in a year?

If this is indeed the case, and you are actually forcing developers into long build-times and 3Mb JS bundles, not to mention the poor documentation and intellectual hurdles of learning new tech-stacks arbitrarily picked for them, then I will have to take a step back from continuing work on any of my Shopify projects.

Shopify's tech leadership appears to be lacking the maturity and perspective to make these sweaping decisions. If you can't make general, shared functionality (oh, and styles) consumable in a general, stack-independent way, than you should not be the ones creating this shared functionality. 

Oh, and if I am wrong and we CAN somehow continue to develop apps using whatever technology makes sense for our app, please feel free to correct me and invalidate the previous paragraph! Then my complaint would only be about the lack of documentation and clear communication, but at least I could continue building on Shopify.

[Parcel_Intellig]

I'm of the opinion that technologies shouldn't be forced upon us too, it's nice to have a common UI from a customer point of view, however forcing us onto a specific technology stack will mean your partners will be spending a lot of time on re-work rather than creating functionality to help Shopify merchants, it's just a waste of time... the documentation is also poor, for someone who doesn't use react, i have no idea what those examples mean to me in terms of what needs to change to fully comply with the new app bridge SDK. Can we have some example libraries in other languages? or perhaps lower level documentation so we can translate this to other technology stacks?

[Seller_Panda]

Well, just to give me 2 cents into this, I agree with "don't force tech upon us" comments above, but its not really true in this case, you are not forced to use the embedded feature of shopify, shopify built this feature to make it easier for developers, you can easily disable this feature and take full control over your app window, this is exactly what we are going to do from now on, all the small apps that doesn't require much will be left embedded, but all the larger apps will not be embedded, so we will have full control over them (They simply open in a new window, but we still have access to the auth and the billing process of shopify).

The embedded app is an optional feature that gives you a lot fo benefits and you end up with already built tools that you can use in few lines of code and you don't have to rewrite the whole thing on your own, while the idea is great, this thread shows exactly how shopify failed to execute this idea.

The most dangerous thing i see in this thread is the fact that many bugs were known BEFORE they rolled out this feature for the second time, you can actually see them in this thread, but for some reason shopfiy thought its a good idea to roll out the feature again without fixing those bugs, I have no idea why that happened, but I really hope Shayne can explain this to us?

[HunkyBill]

@SellerPanda hits the nail on the head. I cannot believe I stuck it out with EASDK as long as I did. After consulting long and hard with fellow developers, I am abandoning this failed EASDK and going solo. Too many bugs from Shopify.

[Shayne]

Hey everyone,

Happy to explain where we're at right now.

1) The title bar

The design team is taking everyone's opinions to heart on this. We can see how a setup with a small number of buttons can look empty, and like there is wasted space. We're working on it.

2) Support isn't responding

If you need support with this, usually emailing apps@shopify.com is the fastest way to get in touch with someone who can help. I've said that a few times on this thread, please do not go through regular merchant support channels. They are not equipped to help you. In this case, you can email me directly at shayne@shopify.com and I'll help you. A number of people in the thread have done this, and we were able to walk through their issues very quickly.

3) The buttons are mixed up

Secondary buttons are pushed to the left side now, which is how Shopify's admin is built. I can understand the frustration with buttons moving without us notifying you first. This was a mistake, and won't happen again. Even if the methods didn't break, the intent behind what the method means did.

4) It's expensive to migrate

The legacy EASDK methods will be supported for the forseeable future. We will not be adding new methods, so while you should not use the EASDK to build new products, we haven't made any decisions on when this will actually be deprecated. It will not be for at least a year, and we will give a full years notice when we make the decision.

5) You're forcing tech that we may not want to use

You don't need to use React, Redux, NPM, Yarn, or anything else if you don't want to. You can use a CDN link just like the old EASDK (through something like unpkg), and regular JS just like the old EASDK. We're working on a tutorial that will be added to docs today or tomorrow to show exactly how to do this.

6) There are still lots of bugs with App Bridge

The issues that people are running into are mostly unrelated, and are symptoms of a shift to GraphQL rather than REST for internal APIs. There are some discrepancies in the data that is returned from those resources, and we're working on a fix as we speak. There are also some issues that were related to Polaris v3.0.0 (like scrolling), that have been resolved.

7) The documentation is poor

We're working full-tilt to get it to a place that's better than the legacy EASDK. Stay tuned.


I'm still very open to any meetings via livechat, the phone, or in person (If you're in Ottawa, Toronto or Montreal) to talk to talk about the launch or issues that people may be having and walk you through a solve. Email me to set it up.

[luke_pxu]

Secondary buttons are pushed to the left side now, which is how Shopify's admin is built.

Can you elaborate here? I don't see this button layout in any of the forms I see in the Shopify Admin:

[Shayne]

Can you elaborate here? I don't see this button layout in any of the forms I see in the Shopify Admin:

If you take a look at the new Polaris docs for v3.0.0, you can see that this pattern is shifting to be closer to what you get for free with App Bridge, with secondary actions on the left with primary on the right.

Examples : Page Actions, Page

Changes start with Polaris and then trickle down to be adopted by consumers, both internally and externally.