02/26/2015
SAPUI5 – SAP’s Go-forward UI
by Todd Newton
SAPUI5 was introduced a few years back, but it has been gaining popularity as more customers upgrade and adopt Enhancement Packs/Renewal Packs. With all the buzz about it, it seems fair to ask: What is SAPUI5? To put it simply, SAPUI5 is SAP’s collective suite of multiple open source frameworks, fitted together into a single development toolkit. There are so many open source technical libraries for UI building that unless you are a career UI developer, it can sometimes be overwhelming to figure out which UI libraries and frameworks can play together and how to most effectively “meld them” when developing a user interface.
SAP handpicked a collection of popular open source frameworks (including Bootstrap, jQuery, Handlebars, DataJs, Mobiscroll) to build the foundation of their HTML5 toolkit, before adding some extra functionality and polish, to collectively present SAPUI5. SAP touts that its SAPUI5 offering is “Enterprise-Ready”, providing the building blocks for the common business community to build modern applications with SAP and translation support.
In an effort to support both complex desktop interfaces and lightweight mobile apps, SAPUI5 functionality is separated into individual control libraries. For instance, using just the SAP.M library greatly improves loading time for mobile devices. The UI elements packaged into these libraries range from simple objects like buttons to more completed components such as the slick, interactive graphs.
SAPUI5 also supports the widely adopted Model-View-Controller (MVC) architecture. MVC is useful as applications grow in complexity. Separating the application’s presentation from its logic helps avoid a large mess and greatly eases a developer’s ability to navigate the app.
SAPUI5 also provides NetWeaver Gateway connection mechanisms for existing on-premise integrations, which provide a smooth serving up of data from on-premise systems to polished HTML5 content that is already mobile-optimized. SAP also created an open source, licensed version of SAPUI5 called OpenUI5. OpenUI5 widens the developer footprint of SAP’s hottest UI, generating a larger, diversified developer community around an excellent product.
In summary, SAPUI5 = a collection of technical UI building blocks assembled and working together in a consistent manner.
So, why use SAPUI5? Well, you could have your developers assemble all of these frameworks themselves, and they might come up with something good. However, it would be at the cost of investing in something unique, and not having a community behind you to support the maturity of the larger framework. Also, with SAPUI5 you get a pre-integration with SAP offerings that would have to be built and maintained.
Now that you understand the benefits of UI5, you’re probably wondering how SAP Fiori comes into the picture. Fiori (meaning ‘flower’ in Italian) is not focused on the technical building blocks, as is UI5, but on how to use the building blocks to build a consistent user experience on laptop/desktop, tablet and mobile devices. It’s a design philosophy that SAP leverages to provide an ‘app’ level experience for users.
In a nutshell, SAP Fiori = the outline of how to assemble SAPUI5 building blocks to yield a consistent user experience across applications and platforms. Fiori focuses on consistency of experience in screen layout, navigation, design approach, and even interaction/icon consistency.
The cornerstone of Fiori is the idea that the UI should move away from a transaction-based experience to a business activity-aligned experience. In the past, as with much of SAP’s legacy ERP solutions, business activities were often executed as a sequence of strung together transaction-based screens that accomplished something specifically at a systems level. This required the user to have SAP expertise at a transactional and navigational level. Instead, Fiori moves the user away from the transaction-based experience and ensures that they have a consistent, intuitive application-based experience, regardless of the application being leveraged.
Fiori is a focus on design that aligns with accomplishing specific business goals, with a consistent UI context for a series of interactions. Think of a “wizard” in an application, often meant to be a safeguard to keep the user on the right path of activities. Now think about a whole application interface designed with that philosophy. It’s an oversimplification, but the underlying goal is the same; Fiori itself encourages this type of design.
But wait! It says “SAP” in SAPUI5. You might be thinking, ‘Why would I want vendor lock-in in this age of open source?’ Not a problem! SAP’s UI5 design is built around common open source libraries, and in keeping with that spirit, SAP has offered Open UI5 back to the open source community. It is basically a subset of the SAP UI5 offering, with only some of the higher-end graphical components removed, and that difference makes up about 5% of the total offering. The only other distinction is that SAPUI5 is licensed from SAP, and licensees obtain additional support in signing that license. At the time of this writing, SAPUI5 seems to be freely offered to all existing SAP customers.
So, don’t fear vendor lock-in! Your development with SAPUI5 ensures a consistent experience and look-and-feel with the rest of SAP and its partners’ forward-looking solutions. It provides a great user experience framework, and with OpenUI5, you still have the independence of keeping your UI efforts without SAP.
One of the additional key benefits for existing SAP-aligned organizations is that SAP has assembled a development toolset that interacts with their on-premise SAP systems (via Gateway). This provides options to connect to cloud services, too. This toolset is called SAP Web IDE. A developer can interactively and quickly develop solutions that leverage both SAP on-premise data and SaaS solution data (both SAP solutions, such as SuccessFactors, and non-SAP solutions, such as SalesForce). The development toolset supports a seamless deployment to SAP’s HANA Cloud Solution or to an on-premise NetWeaver Gateway solution.
SAPUI5 is a forward-thinking suite leveraging open source foundations for UI development. It has an open source, licensed version, OpenUI5, which includes a subset of 95% of the code of SAPUI5. SAP has assembled a collective set of tools for developing SAPUI5-based applications for both on-premise SAP solutions and for the HANA cloud-based platform. The UI libraries themselves may be leveraged in non-SAP environments. SAP Fiori offers a design blueprint for leveraging SAPUI5/OpenUI5 to develop a consistent experience, and the SAP Fiori guidelines will be leveraged across SAP’s Cloud solutions as well.
