“Build me an app that looks just like Fiori”: developing mobile apps with SAPUI5

If you’re thinking about developing mobile apps for your business, you should be considering SAP’s HTML5 UI development toolkit. John Patterson provides an introduction to SAPUI5, and explains what it delivers – and what it doesn’t.

 

 

SAPUI5 is a hot topic right now due to the popularity of the SAP Fiori mobile application suite. SAP Fiori is a collection of apps built on frequently used SAP functionality. It provides users with “an easy to use, consumer grade experience”, and SAPUI5 is the HTML5 library that makes it possible.

A lot of customers are so impressed with the simple, consistent look and feel that they are asking their developers to “build me an application that looks just like Fiori”. But building mobile applications is not as simple as choosing a framework because it is aesthetically pleasing – there are many factors you need to consider.

 

What is SAPUI5?

SAP’s UI development toolkit for HTML5, also known as SAPUI5, enables developers to easily create write once, deploy (nearly) anywhere applications, without having to worry about cross-browser compatibility, touch device support or adherence to web standards.

The key features of the toolkit are:

  • A large set of configurable and customisable Rich UI controls including interactive charts and data visualisations, which work across all devices,
  • Tools, templates and techniques for creating your own UI controls,
  • Easy to use theming and branding tools,
  • Available on all SAP platforms, ABAP, Java and HANA based,
  • A programming model that gives a scalable, reusable structure to applications,
  • International language and RTL support,
  • Built on top of some of the popular open source JavaScript libraries including JQuery and JQuery Mobile, and
  • A low barrier for entry, targeting developers with HTML, CSS3 and JavaScript skills.

 

The differentiators

There are lots of alternatives in the HTML5 mobile space; they range from ‘roll your own’ solutions combining open source libraries like jQuery, jQuery Mobile and Bootstrap, to mature commercial frameworks like Sencha Touch and Kendo UI. Some of the features that make SAPUI5 stand out from the others are:

  • Simplified integration: SAPUI5 is optimised for OData service (Netweaver Gateway) consumption, seamlessly binding the data to the UI controls. Within a few lines of JavaScript, you can connect to a backend and start consuming and manipulating data online.
  • Interoperability: SAPUI5 is now on all platforms, each providing a set of backend UI Services for a consistent, portal-like way to manage end-to-end how users access and interact with SAPUI5 applications, including roles, personalisation and configuration. The Theme Editori offers a consistent way to style and brand not only SAP UI5, but also your WebDynpro application and NetWeaver Business Client.
  • Scalability: SAPUI5 is a pivotal part of SAP’s ‘new’ solutions UX strategy. It is being used by SAP themselves on countless developments around the world. Developers can develop locally using their favourite tools and then deploy to the server where familiar version control and transport mechanisms manage the dependencies and system synchronisations.
  • Extensibility: SAPUI5 is very modular, making it easy to enhance or extend by writing your own code or adapting third party libraries. SAP also provides Extension Points in their delivered applications, giving customers added flexibility to meet their requirements.    

What are the limitations?

If you have read any articles on native vs HTML5 mobile development, you are probably aware already what the limitations are.

  • Very limited support for offline storage. Simple scenarios can be catered for using the available local storage APIs, limited to 5MB. Alternatives are available using third party plugins and techniques. To get any kind of data synchronisation to an SAP backend would require a significant amount of effort.
  • Minimal support for devices’ OS capabilities like GPS, audio and video.
  • Minimal support for application security.

It has to be said that some of these shortcomings are not within the scope of the product and could be addressed by SAPUI5 when combined with a hybrid container like Apache Cordova (previously PhoneGap) and a mobile platform like SAP’s SMP 3.0. On the horizon, OData Version 4 promises to provide better offline data sync capabilities and as HTML5 matures, it is likely these features and others will be incorporated into the product.
 

Takeaways

There are many factors you need to consider when developing mobile applications for an enterprise – including multi-platform support, security, performance, usability, backend integration and offline capability, to name just a few. No one product will meet all your requirements. SAPUI5 is a good choice for rapidly creating online mobile applications that have a consistent consumer-like experience and work across all devices.

Where SAPUI5 excels is in providing simplified integration, allowing your back-end and front-end developers to easily communicate requirements and respond to them quickly. It has been designed to be extensible, making it easy to grow and cater for your future requirements. Back-end services are provided to manage both the development lifecycle and how users access applications, providing a consistent approach with existing developments and functionality. Lastly, it is supported by SAP as part of the NetWeaver licence, and when it finally becomes open source, it will be used by and supported by a much bigger community of developers. All the more reason to “build me an application that looks just like Fiori”.  

John Patterson has over 15 years’ experience in web enabling and integrating SAP, he is a SAP Mentor and SCN Topic Leader 2013 in the SAPUI5 area, blogging frequently on his experiences with SAPUI5 and SAP Netweaver Gateway. He works for Second Phase Solutions as a SAP technologist and developer. Second Phase specialises in helping customers build a better user experience – visit www.secondphase.com.au.

 

Share this post

submit to reddit
scroll to top