Shopify App Bridge

Shayne
Shopify Staff
203 9 47

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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Replies 77 (77)
Shayne
Shopify Staff
203 9 47

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.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

conrad-decker
Shopify Expert
59 0 13

@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!

Marc_Baumbach
Shopify Partner
21 0 6

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
Shopify Partner
19 0 18

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

Developers need access to the developement team. 

Seller_Panda
Shopify Partner
45 0 9

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
Shopify Partner
1 0 0

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
Tourist
6 0 2

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

Thanks

Andrew.

Bjorn_Forsberg_
Shopify Partner
279 4 56

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

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
greg12
Excursionist
35 1 7

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
Shopify Staff
203 9 47

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.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog