Hands-on With Ionic 2 after SAP UI5

After developing transactional and analytical apps for the SAP enterprise world, getting hands on experience on Ionic 2 was a welcome change. Here, instead of drawing a comparison table Ionic 2 vs. UI5, I would like to bring out a few points about Ionic 2 (Angular 2.0+) which SAP should consider in improving the SAPUI5 framework. Moreover, UI5 is being developed as an enterprise app framework with a very well designed Fiori concept, whereas Ionic targets consumer apps. So a direct feature by feature comparison would not give us a good insight on where UI5 can take positives from Ionic. 

After developing transactional and analytical apps for the SAP enterprise world, getting hands on experience on Ionic 2 was a welcome change. Here, instead of drawing a comparison table Ionic 2 vs. UI5, I would like to bring out a few points about Ionic 2 (Angular 2.0+) which SAP should consider in improving the SAPUI5 framework. Moreover, UI5 is being developed as an enterprise app framework with a very well designed Fiori concept, whereas Ionic targets consumer apps. So a direct feature by feature comparison would not give us a good insight on where UI5 can take positives from Ionic.

UI5 lays strong emphasis on data binding with the MVC (Model, View & Controller) architecture. Being built upon the jQuery library, it uses jQuery based DOM events to achieve data binding whereas Ionic is based on Angular which allows it to use native APIs directly. There are no interceptor methods it has to call and so Angular gets notified to update the DOM unlike the SAPUI5. Also, Angular architects building blocks like components, and each of these components has its own change detector. Moreover, in Angular, we can run change detection only for the parts of the application that changed their state. This makes the core architecture of the framework much more efficient. With Fiori 2.0 concepts like Analytical page Layout, SAP should look into the performance of these layouts and evaluate if they can truly achieve the dynamic character it aims at without incorporating the modern techniques like Web Component.

These components have really brightened the future of Web application development and ionic uses them very effectively to create its elements. While in UI5 we use combination of div, span etc. tags to create a complex element. The sap.m.List, ListItems, Carousel, etc. can be effectively implemented using web components.

Here is how List looks in UI5 vs. Ionic. 

And since Lists are one of the most important controls in UI5 in SAP world, we should take a look into the virtual scroll in order to further increase its performance. If we implement List with pagination in UI5, it renders the list 0-20 items at first. As we scroll the items rendered are 0-40, 0-80 and so on. This means if we have 100 items in our list then over 100 elements are added to the DOM. A Larger Dom will definitely impact the performance of the app. In Ionic 2, the items are added as 0-20, 20-40, 40-60, 60-80 etc. This means at any point only 20 elements are in the DOM and this increases the performance of large dataset list considerably.

Finally, Typescript; we all know how JavaScript has a tendency to get verbose, tangled (“spaghetti code”), and repetitive in large amounts. SAPUI5 has done a great job in implementing Object Oriented programming and other standard conventions and guidelines in the framework using JavaScript. It would be a lot simpler to implement these with Typescript. Typescript improves readability and enforces Strong correct types. Hence Typescript is going to spit out any compilation error, unlike the JavaScript counterpart which is an interpreted language. The Rich IDE support with autocomplete and code navigation features. All these will increases development speed.

Looking at the other side of the story, Ionic 2 is still new and immature but has immense potential to be a go-to framework for all kinds of applications. Yes, even for the business applications. The features which work for SAPUI5 framework to integrate seamlessly with the business line are Pre-built layouts, oData integration, Smart (Metadata-based) templates, charting library, theming, design guidelines etc. All these put together in single framework helps in delivering coherent and simple applications. For example, we can view Employee detail using the inbuilt and well-designed Object Page Layout and therefore we do not have to worry about the look and feel of each element. As of Ionic, it mostly contains basic components which are suitable to quickly build basic to intermediate level of applications. If Ionic provides few of these in-built layouts (even as a framework for consumer applications) it would help build simple and consistent business applications. Also, a metadata driven UI is important to build enterprise applications. It simply helps the IT team to develop and release their apps rapidly.

See how Fiori Guidelines can be applied to Non - SAPUI5 application: https://youtu.be/ycFrQvrc_3Q

To conclude, Ionic targets consumer apps, so it is important for them to deliver the performance and feel of using a Native iOS or Android or any other platform application. This performance and feel of a native app should also be brought to the enterprise world. Going forward if UI5 has to deliver high quality transactional, Analytical, especially the Real-time analytical dashboards, it needs to rethink about its core blocks. The Fiori designs are well thought out concepts and the range of predefined layouts offered in a single framework is tremendous. No other platform delivers this. Therefore, instead of building another SDK for the native platform if SAP gives a push to the performance of their UI5 framework it would do wonders for their Fiori platform.