Skip to Content

Is jQuery based UI Framework Obsolete?

March 31, 2017 | 1,364 Views |
 angularelementiviewjqueryMVVMobsoletereact
Follow
On 2017-03-28 I visited a local customer who have been using our CRM on-Premise since 2010. The reason for this visit is that they have finished some reorganization and there are some new business process to implement after it. As the current 10 CRM Fiori application could not 100% fit with their business scenario, they are considering the possibility to build some custom application using Fiori, and would like to refer to suggestions from SAP.
Below is the proof I present to our customers why Fiori is recommended ( I translate into English ):
(1). Fiori consists of a large number of UI controls aimed at Enterprise application developed by top JavaScript developers in SAP. Those UI controls pass strict testing by SAP regarding functionality, usability, accessibility and performance. By developing on top of those controls, Fiori application developers can really concentrate on the implementation of their business logic. The final built application have a consistent look and feel.
(2). Fiori is a responsive UI framework, which achieves that develop once, and can run on any supported terminals listed in SAP help. No additional pack and installation is necessary which is inevitable for other open source UI framework.
(3). Fiori won Red Dot Award out of 4680 competitors from 61 countries in Design Concept Competition in 2015, which proves that the UX idea of Fiori has completely been confirmed by UX professionals.
(4). Fiori provides robust role based access control and authorization where the concept of PFCG role is reused. Customer do not need to apply any third party authorization solutions.
(5). Fiori has its dedicated software component and thus the upgrade is decoupled from CRM backend. While the backend version can keep stable, Fiori can be free to keep to latest version to benefit from continuous function enhancement and performance improvement shipped by SAP, no worry about any risks that this UI upgrade can have negative impact on backend.
(6). The maintenance and continuous development ( new function iteration ) can never be ignored in Enterprise application development. There are also lots of tool-sets provided by Fiori to help customer with automation test and regression test, mock server to separate frontend / backend development. All of those help customer improve their development efficiency.

Different voice from customer

The interesting point here is, I do hear another kind of invoice from some developers in customer company. They have different proposals:

backend

still traditional ABAP development. Expose function module as web service via SOAMANAGER.

frontend: Vue

Vue is another UI framework based on MVVM which has more than 48000 stars in Github.

Their argument

(1). Fiori is too heavy especially when used in Mobile. Although Fiori has lots of built-in UI controls with product standard implemented by SAP, however the very controls customer frequently uses are only a small subset of them, and when building custom application especially in China, some product standard like accessibility are not so important. On the other hand Vue has lots of third party open source UI component library like element,

All those open source component library have lots of active contributors and can do the same good job as Fiori, at the same time they are very light weight.
(2). Use Weex ( A framework for building Mobile cross-platform UI, more than 13000 stars in GitHub ), frontend developers can now program with simple syntax to build JavaScript application which has almost the same performance and UX as native application.Its slogan is “Write once, run everywhere”.

UI5 – an “obsolete” framework?

I have free talk with their developers offline and they told me they have already finished some internal project using Vue + Weex and have the feeling that they really benefit from the improved development efficiency and better performance than Fiori. They have the opinion that the way to directly manipulate DOM in JavaScript code like jQuery and UI5 on top of jQuery, is obsolete now. The idea of MVVM in Vue and Angular is the future.

My personal opinion

As a developer myself, on the one hand I consider it is good to hear from customers that some of them have different technical proposal to fulfill their business requirement. On the other hand, during my presentation, I emphasize the fact that we are now building Enterprise application, not tiny application for personal users. Just take Fiori controls for example again. Although it looks quite trivial when taking each control out alone from end user point of view, such as a button, a text field, a label, however behind it the control developers in SAP do spend quite a lot of effort to ensure those control can work perfect on every supported device and every supported version of every supported browser. I am not sure whether this is still the case for mentioned open source component library in Vue ecosystem. Choosing Fiori means you can receive stable and continuous support from SAP, which might not be always available in open source community. I don’t know much about Vue, I am not sure whether it is really mature enough to build Enterprise application.

Choose technology in Enterprise project implementation carefully

In my opinion only students staying in colleague or those fresh graduates tend to make comparison against different programming languages or framework and finally they would like to come to a conclusion that “XXX is best. YYY is obsolete”. In fact I assume that when they say “XXX is best”, they actually would like to express “XXX is my favorite”. In our work we are not doing homework in university where we have freedom to choose our favorite language or framework. Instead, we are building Enterprise application which might be used by tens of thousands users simultaneously. The implementation of such application can last for several years. It is vital that in this area, it is not the “best” technology which must be chosen, but the one which is most fit with customer company’s development resource, fit with development project schedule and implementation, and is most sustainable when taking maintenance and continuous development into consideration. In my opinion I think jQuery based UI frameworks like UI5 have the mentioned advantages in this blog and are not obsolete compared with other listed popular frameworks.
I am eager to hear comments from your side regarding this framework comparison topic.
To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    hi Jerry,

    I find your posts interesting, and I was reading a few of them when I came to this one. I’d like to point out that is not just ‘students’ or fresh graduates who makes comparisons.. in fact, anyone trying to stay on the edge do tend to work with different technologies or frameworks and always compare them, pros and cons – even if you don’t make a list of points, we tend to compare in our heads when using them.

     

    Now, I understand you work for SAP and you probably have this feeling of ‘protecting’ SAP and its software, however there is no plausible scenario that UI5 would beat any of the open source competition.. absolutely no scenario, and people need to be extremely naive (or biased) to even try to justify that.

     

    You’ve just compared UI5 with Vue, and somehow you will tell me or you want to preach that doing a jQuery.innerHTML and modifying the whole DOM tree, MULTIPLE AND MULTIPLE TIMES is better than current approaches using VDOM and diff algorithms to only modify the nodes & attributes needed? – The FocusHandler in UI5 takes roughly 5ms to run in my i7-4770k – it takes 5ms to find out and apply focus because UI5 destroys the node. Every single rendering pass in UI5, even when you schedule DOM manipulations to happen to a low threshold per animationFrame (it’s not even animation frame but rather a setTimeout on 0ms) triggers a warning in my Chrome because it exceeds 16ms, which means UI5 cannot hold a steady 60fps, which should be piece of cake for any real optimized framework.

     

    Considering ‘Enterprise Grade’, or an Enterprise Application, you are also being naive.. Somehow you will tell me that UI5 has better “track record” than Angular, React or even Vue? – About the so called controls, you can find really well maintained libraries which implements not “Fiori” but Material Design – I won’t even come into the merit of Fiori vs MD, but chances are, any “Enterprise User” has had some MD experience thru Google Search… this is the “guideline” we’re talking about, just the most used website of the planet uses it.. show “something” outside SAP that uses Fiori please.

     

    Or let’s consider ‘Enterprise Grade’ as a not a tiny application.. because let’s face it, some websites built in Angular & React would be considered “tiny”, like this list here.. https://github.com/facebook/react/wiki/sites-using-react and I will let you find out about Angular yourself.. I mean, whatever you build with UI5, no matter how good you are, won’t come close to serving some websites as big as the ones I’ve listed.. you simply ‘cannot’ expect that a framework that downloads a few mb’s of javascript which the majority you are not even using (due the nature of how libraries are treated in UI5) to be acceptable in a ‘high-traffic’ website.

     

    What happens in reality is, companies running SAP believe that SAP can offer ‘the best’ to them, so most decision maker people do not go into the process to find out pros and cons, they want what’s easier for them to manage, and if everything fails, everything goes wrong they will tell the stakeholders: “I’m sorry, I went with SAP which is a major vendor, I’ve been paying top dollars for developers, it’s not my fault” – even internally, SAP cannot cope with UI5 demand, reason why S/4 1610 now has over 6 thousand “Fiori” Applications that run over WebGUI – or I’d go even beyond, the absolutely majority of “facing” websites that holds the SAP logo are not built with UI5, apart from the SDK (which I’m aware of, so please link something if actually exists!).

     

    About updates, the “contestants” receive quicker updates than UI5.. Angular has nearly the same age as UI5 and it has been thru major changes, to keep competitive and implement up-to-date practices. And as “with Fiori you can receive continues updates from SAP”, this is hardly the case.. with Fiori, you need a FES installed, which in some cases it’s not what happened because on the “decision making document” SAP was still directing some customers to install the FES/GW as embedded.. Considering you have a FES standalone, you’d need a Basis Patch, and every major version of UI5 seems to come with a bump in ABAP Kernel – so this is not practical at all, and because it’s an Basis Patch, every customer would enter in their “patching agenda”, where you need a set date, you need resources to retest everything, etc.. – Consider now Angular, React or Vue.. you download the new version, update dependencies in the applications, re-deploy. DONE, zero Basis, you’d still need to test but good practices would tells you’d have the automated tests.. you run those, this is all that’s been modified.. you can’t do that when you patch basis components, even if they have nothing in common it may introduce bugs in the stack.

     

    I mean, I can write, write, write.. UI5 “could” be good, UI5 wasn’t bad when it came out, UI5 did not evolve and it has to – however, my personal opinion is that SAP would built a new framework that adopts better methods and current market practices and call it something else.

     

    I won’t even go into React Native and NativeScript.. it’s not fair to UI5 as 10 developers working for SAP would never be able to compete with thousands and thousands of developers around the globe working together to evolve the platform.

     

    Keen to hear a reply, either here or by private message!

    🙂

     

    Cheers,
    Dan.

    (0) 
    1. Jerry Wang Post author

      Hello Daniel,

      First of all really appreciate your kind comment! I am pleased to hear all kinds of feedback here especially those disagreement – this is the reason why I wrote this blog 🙂
      Please kindly find my comment to your reply below. I only reply regarding some of your comment due to my high workload, I will continue with the left one as soon as I find some free time.
      I find your posts interesting, and I was reading a few of them when I came to this one. I’d like to point out that is not just ‘students’ or fresh graduates who makes comparisons.. in fact, anyone trying to stay on the edge do tend to work with different technologies or frameworks and always compare them, pros and cons – even if you don’t make a list of points, we tend to compare in our heads when using them.
      Jerry: I totally agree. For me, I am an SAP employee working with ABAP in my daily life, however I still spend lots of effort in my spare time to explore other language like Java and Scala. I have once been developing using UI5 for two years, and during that time, I managed to find some free time to learn a little bit Angular and React, just to avoid the awkward fact that “everything will look like nail in the eyes of a man who is used to a hammer.”.
      Nevertheless my point is not to emphasize that it is naive to simply make comparisons on different programming language / frameworks and simply draw a conclusion that XXX is best WITHOUT ANY CONTEXT / USE SCENARIO. For me myself if you read some of my other blogs you will find when I learn a new feature of a programming language, I tend to compare whether it is available in some other languages which I have already been familiar with. And IMHO, I don’t think it makes any sense to say XXX language is “the best” without taking the field it will be used into consideration.
      Now, I understand you work for SAP and you probably have this feeling of ‘protecting’ SAP and its software, however there is no plausible scenario that UI5 would beat any of the open source competition.. absolutely no scenario, and people need to be extremely naive (or biased) to even try to justify that.
      You’ve just compared UI5 with Vue, and somehow you will tell me or you want to preach that doing a jQuery.innerHTML and modifying the whole DOM tree, MULTIPLE AND MULTIPLE TIMES is better than current approaches using VDOM and diff algorithms to only modify the nodes & attributes needed? – The FocusHandler in UI5 takes roughly 5ms to run in my i7-4770k – it takes 5ms to find out and apply focus because UI5 destroys the node. Every single rendering pass in UI5, even when you schedule DOM manipulations to happen to a low threshold per animationFrame (it’s not even animation frame but rather a setTimeout on 0ms) triggers a warning in my Chrome because it exceeds 16ms, which means UI5 cannot hold a steady 60fps, which should be piece of cake for any real optimized framework.
      Jerry: Well I have a little bit different opinion against the performance example you used here.
      During my two years dealing with CRM Fiori incidents from our customers, I have resolved 100+ customer incidents and working as dev angel to support a German customer ERGO to give live with CRM Fiori. According to these limited experience gained so far, when talking about the Fiori application performance issue, most of them are caused by:
      1. the in-efficient implementation in the backend service, for example the data retrieve could have been done in a mass-enabled way, however the current implementation just performs the read within a LOOP.
      2. the non-optimized data request sent from UI5 frontend. For example current implementation is, when the application is launched, let’s say a list of opportunities is displayed in MASTER-LIST ( read only mode ), where three data request is sent stimultaneouslly.  In fact one of these three requests are completely not necessary when the opportunity is in read only mode. Thus this request could be delayed until customer really clicks edit button.
      3. Another example could be some request are currently sent via seperate roundtrip, however the sequence of these requests does not matter, so improvement could be done to wrap them into a single BATCH request ( just like the parallel process idea in functional programming ).
      What I try to express is according to my experience when helping our customer with real performance issue resolving, in my opinion most of the time the performance bottleneck of an Enterprise application resides with the backend service, not the rendering logic in the frontend. Just suppose the possible scenario that you can optimize your backend service to make it run 3 seconds faster, whereas UI5 frontend rendering has for example 500ms’ overhead, then I doubt customer will really care about this 500ms?
      Of course I agree with you that the rendering overhead should never be neglected in application aimed for personal users.
      Considering ‘Enterprise Grade’, or an Enterprise Application, you are also being naive.. Somehow you will tell me that UI5 has better “track record” than Angular, React or even Vue? – About the so called controls, you can find really well maintained libraries which implements not “Fiori” but Material Design – I won’t even come into the merit of Fiori vs MD, but chances are, any “Enterprise User” has had some MD experience thru Google Search… this is the “guideline” we’re talking about, just the most used website of the planet uses it.. show “something” outside SAP that uses Fiori please.
      Jerry:  Regarding the issue you mentioned “show something outside SAP that uses Fiori please.”, I don’t think it simply holds true for Fiori, right?
      For example, there is not any other websites which are developed using ABAP Webdynpro or CRM Webclient UI except SAP’s own application.
      When talking about language, the same there: not any other software in this planet could be found which are developed by ABAP except SAP. Could you simply make conclusion based on this fact that ABAP is bad or not so successful compared with other ones like Java?
      Or let’s consider ‘Enterprise Grade’ as a not a tiny application.. because let’s face it, some websites built in Angular & React would be considered “tiny”, like this list here.. https://github.com/facebook/react/wiki/sites-using-react and I will let you find out about Angular yourself.. I mean, whatever you build with UI5, no matter how good you are, won’t come close to serving some websites as big as the ones I’ve listed.. you simply ‘cannot’ expect that a framework that downloads a few mb’s of javascript which the majority you are not even using (due the nature of how libraries are treated in UI5) to be acceptable in a ‘high-traffic’ website.
      Jerry: thank you very much for your list for React. I will definitely go through this list once I could manage to survive from my current project in a business travel… Meanwhile what I am especially interested with is the fact if there are any ERP applications which are really built on top of Angular/React/Vue etc. I will figure it out.
      Best regards,
      Jerry
      (0) 

Leave a Reply