A brief introduction to the development history of UI5, a development framework for enterprise-level front-end applications

In today's mobile applications have been seamlessly integrated into our daily life, our work and life are dealing with 2C (ie To Customer) applications almost all the time. For example, mobile payment, online shopping, living bill payment, weather and traffic route inquiry, etc.

The front-end development framework for 2C applications, the most famous and well-known to developers, is the troika of Angular, React and Vue. In fact, there is another development framework called UI5, which may be known by far fewer developers, but UI5 is actually proven to be a fairly successful development framework in the field of enterprise-level front-end application development.

What is an enterprise-level front-end application? A definition accepted by the front-end industry is:

An enterprise-level front-end application is a front-end application that can create a large ecosystem (Large Ecosystem), consisting of a certain number of smaller applications and controls/development libraries. Enterprise front-end applications usually contain at least hundreds of subpages and dialogs. All these front-end resources are carried out simultaneously by development teams of dozens or hundreds of developers. Enterprise-level front-end applications need to be designed and implemented with explicit support, interfaces, configurability, scalability, and a means to gradually deal with technical debt during project execution.

Compared with front-end development frameworks such as Angular, SAP UI5 has the following advantages in the field of front-end application development for enterprise users:

• long-term compatibility & maintenance
• Rich out-of-the-box controls for enterprise-level front-end applications
• Internationalization support
• Application robustness and security support
• Accessibility
• SAP UI5 out of the box and many development and support tools provided by the surrounding community

SAP UI5 is also the application development framework hand-picked by the SAP Fiori design concept and design system.

SAP UI5 Origin - Phoenix Project (Phoenix)

The earliest origins of SAP UI5 date back to November 2008. Several employees from various SAP development teams, squeezed into a small conference room that can only accommodate four people, were given a secret mission: to create a new UI development technology. The project was code-named Phoneix at the time.

The phoenix icon corresponding to this code name has been used to this day and has become the Logo of SAP UI5, as shown in the upper left corner of the following figure:

This new UI development technology must be flexible, extensible, modern, and independent of back-end implementation technology.

Let's recall, what technology stacks were active in the front-end development stage in the SAP ecosystem in 2008?

At that time, Jerry had just joined SAP Chengdu Research Institute for more than a year and was engaged in the development of SAP Business ByDesign. In 2008, SAP BYD has not yet entered the LeanStack (reduced technology stack) era of Feature Pack 2.0. It is still based on the ABAP and Java dual stack (Dual Stack) architecture, and the UI development adopts the method of Visual Composer + Java Webdynpro.

At the same time, SAP CRM On-Premises is still in the continuous development stage of new functions. The underlying WebClient UI framework based on SAP Business Server Page (BSP) technology, in order to comply with the current migration of enterprise-level applications from Client/Server to Browser/Server architecture A historical trend was used to develop new SAP CRM applications to replace transaction codes that were originally running in the SAP GUI.

The twin brother of WebClient UI, ABAP Webdynpro, supplemented by FPM (Floor Plan Manager), is not inferior to WebClient UI in the field of SAP SRM UI development. It occupies a place in the big family of UI development of SAP products.

The SAP Commerce Cloud where Jerry is currently working, its predecessor was called Hybris in distant 2008, and the UI uses the older JSP technology.

Analyzing these front-end technologies, they all have one thing in common: strong coupling with the back-end system. Applications developed by SAP BSP, WebClient UI, and ABAP Webdynpro can only run in the ABAP system. Java Webdynpro and JSP pages also cannot run independently of the JVM. The strong coupling with the back-end system brings a major challenge to enterprise users is the upgradeability of UI technology. For example, to upgrade the versions of WebClient UI and ABAP Webdynpro to support more features, you have to upgrade the Software Component corresponding to ABAP Netweaver.

The programming paradigm of SAP WebClient UI / Webdynpro, using the development framework it provides, erects a barrier between the application developer and the handling of API / CSS styles natively supported by the browser. This barrier is a double-edged sword: on the one hand, it enables application developers to focus on the business logic development of the application, without having to worry about security, internationalization, and performance that are critical in enterprise-level front-end application development How to implement product standards such as Accessibility and Accessibility; on the other hand, it also brings some challenges to the implementation of some requirements that do need to extend the UI framework to take advantage of the latest features provided by modern browsers.

For example, when Jerry was still working in the digital innovation space team of SAP Chengdu Research Institute, he once did a prototype development and introduced a third-party library based on the WebGL (Web Graphics Library) standard, Three.js, into the SAP CRM WebClient UI to render a Rotating 3D football effect. It did take some effort to get this effect to render correctly in the WebClient UI application.

The wise and visionary architects of the SAP architect team have long realized that the SAP UI technology used at that time in 2008 has a series of limitations mentioned above. SAP UI5 was born with the mission of solving these problems.

SAP UI5 is officially known to the outside world and is the announcement about Fiori released by SAP in Orlando SAPPHIRENOW in May 2013. With the advent of the first batch of 25 new Fiori applications developed based on SAP UI5, SAP UI5 has taken over the development banner of the SAP front-end field.

UI5, which is in its infancy, is fully coded and implemented by a mature Scrum development team. The team then grew and split into a Core team and another team responsible for creating the "sap.m" controls. At first, the controls under the sap.m namespace were only used for mobile devices, m stands for mobile, and was later redefined as the UI5 cross-device main control library: main control libraries across devices.

Embrace Open Source - The Birth of OpenUI5

During the Phoenix project, the founders of SAP UI5 were loyal open source project enthusiasts. From the very beginning of the project, it was considered open source for easier collaboration with the front-end community, earlier access to user feedback and bug reports, and a more efficient rollout of UI5 to the SAP development ecosystem.

On December 11, 2013, SAP announced that UI5 will be open sourced in the form of OpenUI5 under the Apache 2.0 open source license, which is the code repository that everyone sees on Github today:

In October 2014, this repository produced the first line of code commits. By March 2022, the number of code commits had grown to 78,657.

OpenUI5 includes the core implementation of the SAP UI5 framework and most of the control library. These core implementations and control library development are basically all done by the SAP UI5 team. There are a small number of SAP UI5 control libraries, which are implemented by other product development teams other than SAP UI5. Some of these control libraries are only used in some very special scenarios, some contain special intellectual property rights, and there is no plan to open source licenses. provided below, and therefore not included in OpenUI5.

Rapid development and maturity of SAP UI5

With SAP's flagship product S/4HANA choosing SAP UI5 as its front-end development technology solution, and through the feedback from a large number of SAP Fiori application development, delivery and customer use, SAP UI5 has entered a period of rapid development, and a new trend has emerged. A large number of development tools, access modules and infrastructure layers around SAP UI5, such as Fiori Launchpad, SAP WebIDE, Chrome Developer Tools extension UI5 Inspector, end-to-end testing framework UIVeri5, and UI5 project build and launch command-line tools UI5 Tooling, etc. . These new tools themselves also mark the maturity of SAP UI5 and its community.

Today in the open source projects led by SAP on Github, up to 10% of the code repositories are related to SAP UI5.

SAP UI5 not only has an increase in the number of functions and control libraries, but its core is also constantly evolving, which is reflected in a finer-grained and stricter modular design of the core, a more appropriate dependency declaration method, and a better modern browsing. Aspects such as the programming method of the asynchronous request execution capability of the server. These evolutions take place in the UI5 core and will not affect the normal operation of existing SAP UI5 applications.

Another source driving the evolution of SAP UI5 is the continuous development of Fiori design principles. From the birth of Fiori 1.0 to the latest version 3.0, Fiori has always been striving to provide users with more Coherent, Simple and Delightful applications. The Fiori design guidelines themselves are evolving, and as a technical framework for implementing the guidelines, SAP UI5 is constantly adjusting itself to achieve the goal of perfectly implementing the Fiori design guidelines.

Compared with the delivery method that can only be delivered through offline compressed packages at first, OpenUI5 now supports many distribution and interaction channels for application developers to choose from: from the boot file sap-ui deployed on CDN (Content Delivery Network, Content Delivery Network) -core.js, to the openui5 package on the npm registry.

In the list of 9 Web Components Libraries selected by the front-end development ecosystem, UI5 Web Components always occupies a place.

UI5 Web Components is a set of independent UI elements developed based on the Web Components standard. These elements completely encapsulate styles and behaviors in custom HTML tags, so they can be used independently of the SAP UI5 framework. Some enterprise users may not need all the features provided by the SAP UI5 framework, or already have front-end applications running on top of Angular, React or Vue frameworks, but these users still want to use UI5 controls in their applications. In this case, UI5 Web Components is an excellent complement.

For a detailed introduction to UI5 Web Components, please refer to my articles: Fiori Fundamentals and SAP UI5 Web Components .

The future of SAP UI5

If you continue to pay attention to the blogs with the SAP UI5 Tag tag on the SAP official community, you will find that the following two directions are the most discussed topics in the SAP UI5 ecosystem:

• Continue to advance the development of UI5 Web Components
• Continue to improve SAP UI5's support for TypeScript

For more details on TypeScript support in SAP UI5, please refer to my article: One of the future trends of SAP UI5: Embrace TypeScript .

Evolution Never Ends.

If you are interested in the future development direction of SAP UI5, you can log in to the official SAP product roadmap website and enter the SAP UI5 keyword to check the new features that SAP UI5 will support in the future.

Summarize

Compared with ordinary 2C front-end applications, enterprise-level front-end applications have stricter requirements in terms of security, robustness, performance, internationalization and accessibility. Based on the author's actual work experience, this paper lists some limitations of the traditional enterprise-level front-end application development technology that is strongly coupled with the back-end system, thereby eliciting the original design intention of SAP UI5 and the pain points in the field.