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.

[Shayne]

Hey everyone — thanks for sticking with us through this one. It's an incredibly complicated launch from our side. There's a ton of legacy code that we're trying to keep supporting, but everything on the backend has been rewritten from scratch.

We're back at 0% rollout for the weekend, and any further rollouts will be posted here.

I'm going to address every concern that I can. If I miss anything, reply, and I'll answer. My personal email is shayne@shopify.com if anyone wants to have a longer form discussion.

Now, onto everyone's comments.

I'm curious if we're able to avoid implementing the changes to the navigation bar from this recent update as they make for what appears like a broken layout, pushing secondary buttons to the left with the single primary button to the right? This is not how Shopify admin pages (and most forms) work, coupling Save/Cancel buttons next to each other on the right. I'm excited for possibility of adding tabs to this new navigation bar, but want to avoid using it until it's available to us.

Since we've already got a call coming up to talk about these changes Luke, I'm going to loop in a designer who worked on the change and a Senior PM so that we can work through your feedback (and suggestions) together.

As per the new corporate Shopify, running the show, putting us in our place, it sucks to be part of corporate experiments that are half-baked, not tested, and had little or no input from us, the end users/creators/artists/developers that Shopify now seems to pretend to love. 

I've always valued your input HunkyBill, and would love to hop on the phone or get an email thread going to make sure that we can act on your feedback. If you want, you can even swing by the office for lunch, I'd love to talk about this stuff in person. Email me if you want to set it up.

I hope this will be fixed soon, I talked to developer support over email, but they are bhaving like there is nothing wrong from their side, they says you should check your app code and fix the issue.

Developer Support is aware of the issues. If you're able to forward the relevant thread to me, I'll verify that you're going through the correct support channels. If somehow you ended up in general escalated support, I could see you getting a response like this.

I had the query issue with 2 of my apps last week, after talking with support guru they said it was rolled back 2 days after our talk, and the apps were working again, yesterday i tried to implement the new app bridge library into my test app, but for some reason nothing was working, its like the parent shopify window doesn't receive the post messages.

Any update on this? what is working or what is not?

Currently, we're rolled back to 0%. We don't want anyone to have to deal with broken apps over the weekend, and we realize that there are still a couple of bugs affecting some people. From now on, you can consider this forum post to be the source of truth for rollout. I'll edit my original post when we start pushing it out again.

• No one at Shopify sent out a letter saying things are busted

As soon as we noticed that there were unaddressed bugs, we rolled back the launch. What we should have done after that was notified developers who were affected by the bug. Not doing that was a mistake. We're working to make sure this doesn't happen again.

• When we pointed out things were busted, they denied for the most part

This was absolutely not our intention. If you can point out where this happened, we'll be more mindful of it in the future.

• When they finally acknowledged things were busted, they still never clarified why, for how long or when a fix would be done
• they fixed the bug, but again never told anyone, when, nor what happened there

I'm doing my best to rectify that with this thread, but I agree that there could have been more transparency. We'll work on this, we've set up a meeting internally to standardize these type of announcements and bug reports. Once App Bridge goes open source, this will be a lot easier to manage.

With the new app bridge the TitleBar does work for me but the flash messages doesn't, I guess we have to keep our eyes on shopify new features and check daily to see if our apps are still working as expected and nothing was changed.

If you can email me your app name and a sample shop where this is happening, we'll fix it.

The problem with the pages loading twice still happens with the updated roll out.

Only happens with the links / buttons within the title bar section.

If you (or Bart) can email me your app name and a sample shop, we'll work on this ASAP.

It is a little unsettling being guinea pigs. Sometimes the canary in the coal mine died 😉

Agreed, and we don't want to kill any canaries. Making the decision to make App Bridge fully backward compatible was a hard one. It took a ton of extra work, but that work was only worth it if everyone's canaries are still alive (and their apps are still working).

Again, I want to thank everyone for their feedback. Feel free to email me if you have any comments that you don't want to publicly post, and I'll respond right away.

[Shayne]

Also — if anyone wants me to roll out the change to a specific shop for testing, email me and I'll apply a flag to the store so that you can test the new feature set.

[DiscountNinja]

Hi Shayne,

Thanks for the update and transparency. It has been quite a struggle to get our app (Discount Ninja) to work properly in the last few days due to the issues with navigation and the changes thereof. It caused us to rework and redeploy the app three times. Not what you're looking for when your app is being featured on the homepage!

I'll be sending you a private message via email with further info.

Regards,
Bart

[Bjorn_Forsberg_]

Hey Shayne,

I've love to have this beta activated on one of my dev sites, to test and provide feedback. Could you please do it for yost-tromp6906.myshopify.com ?

Many thanks!

Bjorn

[Guille_Lopez2]

Shayne, sorry I can't find your email address to DM. Could you please add small-victories-test.myshopify.com ? Thanks.

— Guille

[Dan_Sundy]

I just wanted to add to Luke's comment about the header/navigation design. Our apps have "by [our company name]" in the title which makes the new byline completely redundant. I've seen enough partners using a similar naming convention that I think it will be a problem for a lot of app devs. It feels as though the "by company" section in the top right is there just to take up space now that the navigation has moved to the next line.

Again, it isn't clear what we will be able to edit (we're using Polaris's AppProvider and Page component in case that is of any consequence) but we would really like to be able to at least remove the byline if not move the button navigation back up to the same line as the title to save space.

Thanks for your consideration on this stuff, Shayne.

[Shayne]

I've added the beta for your stores, Bjorn and Guille.

Thanks for the feedback Dan — I'll post any updates to our design decisions here as well.

[Shayne]

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

If you want early access today or tomorrow, email me and I will enable it for your store. We're working on a self-serve beta opt-in for these types of launches in the future.

We now also have the capability to delay launch for specific apps or shops if requested. If you want to stay on the legacy EASDK (to give you more time to adapt to the changes), email me at shayne@shopify.com and we will give you what you need.

To all of those who hopped on the phone with me or started private threads, thanks so much for your input on this one. All of the bugs that were discovered during the previous rollout cycle should be resolved.

[HunkyBill]

Would be nice if Shopify could spend a few minutes explaining who this Bridge is for. The only words describing it so far are

• modern (meaning what? For developers under 20 years old?)
• Redux (why would I care about some Javascript I never use for anything)
• SemVer... Huh? 

For some of us out there, do we need to care about this bridge at all? Is this some sort of fancy support for the crowd writing Apps with that Polaris library as their only arrow in the quiver? 

Where is there any excitement in this whole Bridge thing you're unloading on us? 

[conrad-decker]

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

Thanks!

[Shayne]

For some of us out there, do we need to care about this bridge at all? Is this some sort of fancy support for the crowd writing Apps with that Polaris library as their only arrow in the quiver? 

You're going to have more tools at your disposal to look and act like Shopify, with less code to write and better debugging. We added the extra bar at the top so that people can know when they're in an app view, because we're giving away all the tools to start looking pretty much exactly like us.

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

You won't be affected! Everything is backwards compatible, you'll just have the option to adopt the newer, better documented library whenever you like after Thursday.

[conrad-decker]

@Shayne Thanks for all of the info. Unfortunately it's really unclear who is truly being affected by this rollout (glad I'm not the only one that feels that way). Can you tell me if this rollout (on what sounds like Thursday) will affect users of the Shopify POS SDK as well? I have customers who have POS apps that are relatively critical to their daily operations. 

You won't be affected! Everything is backwards compatible, you'll just have the option to adopt the newer, better documented library whenever you like after Thursday.

Okay awesome, thanks for confirming Shayne! That was my initial understanding but after reading through this thread, it didn't sound like those expectations were met when the original rollout took place. Just figured I'd ask 🙂 Keeping my fingers crossed all goes smoothly. 

Cheers!

[MarcBaumbach]

Revised Launch Date : Thursday, November 6th, 2018

Minor suggestion: I imagine this should read Thursday, November 8th, 2018. I initially skipped reading the day of week and thought it might be shipping today. 🙂

The new bridge changes do sound exciting though, so we're looking forward to taking advantage of these starting Thursday!

[Danijel]

Poor shopify gurus are not equipped to handle product issues at all.

Developers need access to the developement team. 

[Seller_Panda]

I can't agree more with Danijel, I have several apps on shopify store for more then 3 years now, and I still don't know who i should contact with, Chat support gurus simply don't know anything about apps and all they can say is one of those: 

• I'll get back to you after contacting the actual development team (several days until any response, and usually its "we didn't found any issue on our test stores", but the issue was already fixed without us touching anything)
• Go look at our resources (which means search the forum, docs or wait for an email which might take 3 days or more)

This Bridge new feature shows perfectly what the issue is, some of my apps were not working for more then 3 days and I had nothing to do, i didn't even know what the issue is, I got an email about it only after the feature was rolled back already.

I would appreciate your comment on this one Shayne, who should developers talk with about bugs on shopify? i know we can send email to apps@shopify but it takes so much time that the issue already get fixed after they get back to us.

If we think Shopify has some kind of a bug and we can't figure out what it is, what is the fastest/best way to contact Shopify about it?

[Linh_Dam1]

Thanks Shopify for the change, and thanks @Shayne for speaking for me really!

We would like to have more info, @Shayne, on:

1. You say everything is backwards compatible but also say contact you if we need more time to adapt to the changes. So should we still contact you if we don't want to use the `app-bridge` SDK?
2. Could you give more installation instructions because the docs is quite vague? We don't use `yarn` (we don't intend to use it for a foreseable future), so how else can we install it? Is there a standalone file without using Yarn (similar to app.js)?
3. Is there any deprecation timeline for the legacy EASDK?
4. If possible, is there any screenshot, wireframe or any visible stuff to describe the changes? Because describing UI via plain texts is hard to understand for me.

[Andrew_Womersle]

@Shayne.. has the double loading issue been fixed in the new rollout?

Thanks

Andrew.

[Bjorn_Forsberg_]

Hey Shayne,

Thanks for enabling the beta on my store 🙂 I've been using this today, and wanted to give you a heads up on a couple of issues I've seen:

1) The "Print" functionaltity of buttons added to the top bar no longer works. Examples: The Shopify Order Printer app no longer can call print with the new App Bridge.

I also ran a test on one of my apps, adding the Print button code as outlined in the EASDK documentation here: https://help.shopify.com/en/api/embedded-apps/embedded-app-sdk/features#printing

<script type="text/javascript">
  ShopifyApp.print = function(){
    console.log('Print clicked!');
    window.print();
  }

  ShopifyApp.ready(function(){
    ShopifyApp.Bar.initialize({
      buttons: {
        primary: {
          label: 'Print',
          print: true
        }
      }
    });
  });
</script>

And that does not work either.. I don't get anything logged in the console, so ShopifyApp.print is never being called. You may have a general incompatability issue on that feature.

2) The browser url does not update after the initial loading of the app. I've only tested in Chrome so far, but it seems the navigation history is not being pushed to the browser url. It loads and displays the correct url on login, but any additional page you navigate to does not update the url. No console errors or anything else.. testing with stable apps.

Hope the feedback helps 🙂

Bjorn

[greg12]

Hi im reading documentaion, about action 'https://help.shopify.com/en/api/embedded-apps/app-bridge/actions', and i completly dont get the host part of ctions, what is host there? Could you please provide some working example? 

[Shayne]

Minor suggestion: I imagine this should read Thursday, November 8th, 2018. I initially skipped reading the day of week and thought it might be shipping today. 🙂

Whoops, updated.

Developers need access to the developement team. 

We're working on streamlining the support flow between partners and the teams that can help them best. Apps@shopify.com is still the best email to send your questions to, we've recently reallocated resources to more efficiently triage issues into the right hands.

1. You say everything is backwards compatible but also say contact you if we need more time to adapt to the changes. So should we still contact you if we don't want to use the `app-bridge` SDK?
2. Could you give more installation instructions because the docs is quite vague? We don't use `yarn` (we don't intend to use it for a foreseable future), so how else can we install it? Is there a standalone file without using Yarn (similar to app.js)?
3. Is there any deprecation timeline for the legacy EASDK?
4. If possible, is there any screenshot, wireframe or any visible stuff to describe the changes? Because describing UI via plain texts is hard to understand for me.

All of the JS is backwards compatible, but the locations of some buttons and things have moved (example, primary now being right justified). Some apps made really deliberate choices about the UI in their apps based on the left justified primary buttons. If you want to redesign to take advantage of App Bridge, that's when you can take advantage of the delayed launch for your app.

The legacy EASDK won't be deprecated for at least a year, we'll keep you in the loop and let you know as soon as we start moving on that.

I'll update the original post with some screenshots, and make sure that in the future screenshots are a part of any launch that includes updates to UI. Good suggestion. Thanks.

@Shayne.. has the double loading issue been fixed in the new rollout?

Yes!

Thanks for the reports of bugs Bjorn, we'll take a look ASAP and get back to you.