Skip to Content
Technical Articles
Author's profile photo Peter Muessig

SAPUI5 – Patch-Level Independent Bootstrap

Patch-Level Independent Bootstrap

We listen to your feedback! A while back we got the feedback to make the bootstrap URL more stable and in dedicated feedback rounds, we evaluated that this should apply especially to the bootstrap URLs of long-term maintenance versions. With the introduction of the removal of outdated versions, this feature becomes even more relevant! As we also want to get rid of outdated patches of long-term maintenance versions, having an “evergreen” bootstrap URL would help to keep your migration efforts as minimal as possible.

With the availability of the latest SAPUI5 cloud runtime version we are going to introduce the patch-level independent bootstrap a.k.a. evergreen version. The patch-level independent bootstrap works starting from 1.71. The benefit of the patch-level independent bootstrap is to point to a major.minor release and automatically profit from patches which happens under the hood. Your application can be kept stable and the underlying SAPUI5 runtime will be kept up to date.

How it works

To use the patch-level independent bootstrap for your standalone SAPUI5 application, first select a long-term maintenance version from the version overview. Then, in your bootstrap script tag you refer the major.minor version instead of major.minor.patch. This feature requires to control the bootstrap script tag and therefore doesn’t work in the context of the SAP Fiori launchpad or SAP Cloud Portal service (both have individual mechanism to manage the UI5 version). The following code snippet illustrates the usage of the patch-level independent bootstrap:

<script id="sap-ui-bootstrap"
    type="text/javascript"
    src="https://ui5.sap.com/1.96/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-async="true"
    data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-libs="sap.m"></script>

There is one basic requirement: the bootstrap script requires to be asynchronous and therefore enable asynchronous loading for your application (by adding the attribute to your bootstrap script). This also comes with the advantage that you are going to benefit from future performance bootstrapping improvements. Keep in mind: without the bootstrap must be async, otherwise it is going to fail with an error in the console. The async flag must be set explicit to be able to switch easily between specific versions and the evergreen versions by just adopting the version segment of the bootstrap source.

Remark: When using the full asynchronous bootstrap you must use the data-sap-ui-onInit callback as described in the documentation “Standard Variant for Bootstrapping“. The sap.ui.getCore() is not available directly after using the patch-level independent bootstrap URL. The snippet above is using the sap/ui/core/ComponentSupport to bootstrap the Component, see Declarative API for Initial Components.

Technical Flow

When using the patch-level independent bootstrap you will notice an additional request to the sap-ui-core.js file. One for the evergreen version and one for the specific version which is finally booting SAPUI5. This is mandatory because the evergreen request is somehow a cache buster request. The server responds a little script which configures SAPUI5 to load the resources from the latest patch of the corresponding version, i.e., when booting SAPUI5 1.96 as of today 1.96.8.

The evergreen request only works for dedicated bootstrap files, such as:

  • resources/sap-ui-core.js
  • resources/sap-ui-core-nojQuery.js
  • resources/sap-ui-integration.js

All other scripts will not be handled as evergreen request and the server will return a 404 response for them.

Bonus: Usage of Patch-Level Independent URLs for Documentation

Besides using the major.minor versions in the URL for the patch-level independent bootstrap we added some more bonus material. You can also use patch-level independent URLs for the documentation, i.e., https://ui5.sap.com/1.96/. This will redirect you to the latest version of the documentation https://ui5.sap.com/1.96.8/.

Related Questions

Q: The debug mode doesn’t work anymore. What can I do?

TL/DR: Instead of using “sap-ui-debug=true” use “sap-ui-debug=sap/“. This will ensure that all modules from the sap/* namespace will be loaded as debug resources. If you also want to load the debug resources from you namespace, you can include it as well: “sap-ui-debug=sap/,xyz/app/“.

Background: The first request to the bootstrap script of UI5is a cache buster request – as explained in the technical flow above. The real bootstrap with the concrete version will be loaded afterwards. As the required script tag is created dynamically, the bootstrap file is then loaded asynchronously. The debug mode normally interrupts the load of the bootstrap script and includes the debug bootstrap script. This only works, when the bootstrap script is loaded as part of the documents head section. With using namespaces, only the modules which are required after the bootstrap and map to the defined namespace will be loaded as debug sources. This is btw also a good practice to only load the necessary debug resources from debugging performance perspective.

Wrap-up

Now, you are able to consume long-term maintenance SAPUI5 versions from the cloud by just specifying the major.minor version. This is one step ahead to reduce your maintenance for your applications and it also allow us to have more freedom deleting outdated versions from the cloud. Additionally, the asynchronous loading allows us to improve the performance of the bootstrap behind the scenes.

Thanks to all people involved in developing this idea and special thanks to the SAP Mentors providing us feedback and guiding us towards the final solution.

 

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      Woww … Amazing feature 👏 .

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Thanks, Abhi

      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      I think eventually this is the go-to process to initialize UI5 library as I see when we deploy using

      https://sapui5.hana.ondemand.com/1.71.41/resources/sap-ui-core.js

      I see all of the sudden the prod apps are not working due to SAP removing certain patches.

      Also, I noticed by using 1.71.41 with the above source....Locally it runs with 1.71.37 and when deployed it is running with 1.71.27

      But by using https://ui5.sap.com/1.71/resources/sap-ui-core.js it is running with 1.71.47 locally and also across all the Dev, Quality and Production environments.

      Cool feature 🙂

      Author's profile photo Oliver Graeff
      Oliver Graeff

      Hi,

      thanks for your feedback!

      Just adding a bit of information to help regarding you comment 'I see all of the sudden the prod apps are not working due to SAP removing certain patches':

      Regards, Oliver

      Author's profile photo Thomas Jung
      Thomas Jung

      Very nice feature. I was able to get it working for version 1.96 as described, but couldn't for 1.100.  That version always returns a 404.  Even the trick with the Documentation URL didn't work for 1.100 either. Is that expected for that version or something missing?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Thomas,

      yes, this behavior is intended. Only long-term maintenance versions are supported, e.g. 1.71, 1.84 and 1.96.

      Best regards,

      Peter

      Author's profile photo Thomas Jung
      Thomas Jung

      Ah my bad.  I looked at the link to this page Available SAPUI5 versions on SAP Business Technology Platform (ondemand.com) and only focused on the first two columns. I saw the green maintenance in Column 2 and thought that indicated this support. But only those that explicitly say Long Term Maintenance in Column 3.  Thanks!

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Never mind. Welcome! We need to improve the version overview page… I’ll take this point. 🙂

      Author's profile photo Cristiano Marques
      Cristiano Marques

      Great feature! Congratulations!

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Thank you, Cristiano

      Author's profile photo Florian Henninger
      Florian Henninger

      Very cool feature.. maybe I didn't get the whole picture. What will happen if there is the drop for the longterm version. For example I put version1.84 (2011) there.

      Do I get a list of all apps within my system which will have a need to be reviewed?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Florian,

      once we drop the support of a longterm-maintenance version, the patch-level independent bootstrap will continue to work for this version but there will be no patch for this version anymore.

      Unfortunately, we don't know about the usage of a version in your applications. Thus we can't create a list of all apps which needs to be reviewed. But indeed, this is an interesting idea we could think about. A bit unclear to me is how we can detect this.

      Best regards,

      Peter

      Author's profile photo Florian Henninger
      Florian Henninger

      Thanks for the answer, we could do a little brainstorming when it come to it.. I think there is a way to find those applications (within a system).

      Author's profile photo Pietro Modi
      Pietro Modi

      Does the patch level independent bootstrap work with CacheBuster?

      If yes, how can we use the CacheBuster with this new feature?

      Thanks,

      Pietro

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Pietro,

      The patch-level independent bootstrap uses a cachebuster-like mechanism under the hood as I tried to sketch in the Technical Flow. So, you don't need to explicitly use a cachebuster URL for your bootstrap.

      Using https://ui5.sap.com/1.84/resources/sap-ui-core.js will currently bootstrap UI5 from https://ui5.sap.com/1.84.24/resources/sap-ui-core.js - you can see this in the network trace. The behavior is similar to the cachebusting, e.g. https://ui5.sap.com/resources/sap-ui-cachebuster/sap-ui-core.js will boot from here right now: https://ui5.sap.com/resources/~202204130750~/sap-ui-core.js. In both cases we have a unique segment in the final URL which allows to cache the UI5 resources for a longer period of time in the browser cache.

      HTH and best regards,

      Peter

      Author's profile photo Matthew Reddy
      Matthew Reddy

      Hi Peter - do you know if there is a plan to add this to the Launchpad/Portal services on Cloud Foundry (at the fiori shell level, not the app level)? Breaking UI5 updates always cause me massive headaches with my clients

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Matthew,

      AFAIK, the version of UI5 can be controlled on CF LaunchPad via a custom entry in the manifest.json of your UI5 application:

      {
        [...]
        "sap.ui5": {
          [...]
        }
        "sap.platform.cf": {
          "ui5VersionNumber": "1.89.x"
        },
        [...]
      }
      

      https://help.sap.com/viewer/ad4b9f0b14b0458cad9bd27bf435637d/Cloud/en-US/3a0e6d6b791c4c2189f6a0a424188362.html

      John Long mentioned this in his answer for another question in another blog post - here you can also find more details:

      https://blogs.sap.com/2022/01/14/designing-ui5-apps-for-sap-launchpad-service-part-1/#comment-608527

      HTH and best regards,

      Peter

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Peter,

      I think you've missed Matthews specific question part "at the fiori shell level, not the app level". Unfortunately the BTP Launchpad Service is using always the latest UI5 release which caused quite some issues during the last year. Related to that Matthew filed this influencing request:

      Fixed UI5 version for Central Launchpad shell in Cloud Foundry

      Best Regards
      Gregor

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Peter,

      is there a way to start the Fiori Launchpad Sandbox also via the Evergreen URL? Right now I have to use:

      <script 
       src="https://ui5.sap.com/1.96.12/test-resources/sap/ushell/bootstrap/sandbox.js">
      </script>
      

      when I run without the UI5 tooling (which I do in most cases when developing CAP Applications) using:

      https://ui5.sap.com/1.96/test-resources/sap/ushell/bootstrap/sandbox.js

      as the URL for the FLP Sandbox doesn't work. Do you have any tip for this issue?

      Best Regards
      Gregor

       

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Gregor,

      sorry for my late reply. Was too far away from my keyboard for a while... 🙂

      I assume you are using a flpSandbox.html which first loads the sandbox.js and then bootstraps UI5. The sandbox.js must be executed before the sap-ui-core.js is being loaded and this would require a proper cascading of the requests. Therefore we decided to reserve the patch-level independent bootstrap for the standard UI5 bootstrap only.

      I will need to think about a solution for this. Sorry, for now I have no better answer... 🙁

      Best regards,

      Peter