Skip to Content
Author's profile photo Jerry Wang

Compare Event handling mechanism: SAPUI5 and Angular

Recently I am studying Angular in my spare time. And I would like to write down here what I have learned about Angular, comparing its design with UI5. In this blog I will only focus on event handling topic.

I have already explained how I do self study on UI5 event handling stuff in this blog , and Andreas Kunz has given very thorough comments on the design idea behind the native event and semantic event, you should NOT miss those comment 🙂

UI5 event handling

Let’s quickly review what UI5 developers should do if they need to listen to an event. Still use button as example:

Just call function attachPress and pass in our event handling function as argument:

/wp-content/uploads/2016/06/clipboard1_970962.png

The button instance itself does not own the function attachPress:

/wp-content/uploads/2016/06/clipboard2_970963.png

Instead, it is provided by the node in the button instance’s prototype chain, EventProvider.

/wp-content/uploads/2016/06/clipboard3_970979.png

When attachPress is called:

/wp-content/uploads/2016/06/clipboard4_970980.png

When we click button in UI:

/wp-content/uploads/2016/06/clipboard5_970981.png

/wp-content/uploads/2016/06/clipboard6_970982.png

This is very clear. Now let’s move to Angular.

Angular event handling

You can find a sample Angular application from this url. It is written based on Angular 1.2.18.

/wp-content/uploads/2016/06/clipboard1_970962.png

/wp-content/uploads/2016/06/clipboard2_970963.png

When I first study this application, the attribute “ng-click=”sortField = ‘name'”” seems to me a complete magic: how could a fragment of code in html node attribute executed?

I am sure it is “ng-click” which achieves Angular’s specific way of event handling, so I tried to figure it out by debugging.

Angular framework has its own initialization and bootstrap phase, just the same idea as UI5. During its bootstrap, Angular will traverse the html DOM tree ( line 964, compile function ) and parse the html element node recursively. If an attribute with Angular namespace “ng” is detected within an element node, the detected attribute is called “directive” in Angular and some special logic will be applied on that node, in function “applyDirectivesToNode”.

/wp-content/uploads/2016/06/clipboard1_970962.png

 

Here below is how event registration is done by Angular for us:

/wp-content/uploads/2016/06/clipboard2_970963.png

Let’s confirm our assumption. I click hyperlink in UI: the native event “click” is passed to the wrapper function fn in line 15330.

/wp-content/uploads/2016/06/clipboard3_970979.png

The wrapper function contains the logic to execute “sortField = ‘name'” specified in html source code.

Its core is implemented via the assign function:

/wp-content/uploads/2016/06/clipboard4_970980.png

Finally, scope obj ( you can consider scope as “Model” in UI5 at this moment ) has attribute sortField which has been assigned with a new value “name”, this is how sortField = ‘name’” is executed.

/wp-content/uploads/2016/06/clipboard5_970981.png

/wp-content/uploads/2016/06/clipboard6_970982.png

Hope this blog can help you gain a very basic understanding about Angular event handling 🙂

Further Reading

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Haven't seem too many in-depth articles here. I really your analytical approach to this topic. Great work!

      Author's profile photo Former Member
      Former Member

      Has event handling changed in Angular 2.0? Since it was a major change so much that it is very difficult to migrate Angular 1.0 to Angular 2.0

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Dennis,

      I didn't dig into Angular 2.0 yet. As far as I know, there is some team in my site where Angular 1.2 is still used in the internal project.

      Best regards,

      Jerry

      Author's profile photo Julio Alberto Martinez Real
      Julio Alberto Martinez Real

      Wow amazing job.

      The problem is compare the performance, sapui5 is not even acceptable

      Author's profile photo Former Member
      Former Member

      How does the performance compare between Angular 1.0 and SAPUI5?

      Perhaps explain the performance comparison you have done.

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Julio,

      as commented by Andreas Kunz in this blog Use Chrome development Tool to compare Rendering performance between SAPUI5 and React, when we discuss about performance comparison between different UI framework, we must be careful, taking all aspects that an enterprise application should fulfill into consideration, for example accessibility, internationalization etc. I suggest perhaps you can read Andreas' comment in the blog mentioned, in my opinion it is very helpful 🙂

      Best regards,

      Jerry

      Author's profile photo Julio Alberto Martinez Real
      Julio Alberto Martinez Real

      I agree with Andreas becouse im programmer but at the end of the day customers and users don´t care about difficult level to get accessibility, internationalization, etc  in your app. They care about performance first and then design.

      do you work with fiori applications in a mobile device? if yes do you think that the performance is acceptable?

      Author's profile photo Former Member
      Former Member

      Thanks for the link but that is between React and SAPUI5 not Angular 1.0 I suspect that the outcome of that will be more close.

      Had a quick read in the blog you send and it seemed to compare pure React with SAPUI5 which is a bit of an apples and pears comparison as React is not MVC so it will have better performance but there are also other issues to consider like maintainability SAPUI5 framework more or less forces all your developers to work in similar way. Using React you will probably also decide on a framework like Flux or Redux which in turn will create some overhead.

      Just remembered you writing to read Andreas comments and indeed they are very good as he mentions there is more to consider than just performance.

      Regs,

      Dennis

      Author's profile photo Madhulatha Pelluri
      Madhulatha Pelluri

      Great Information, Please provide me some Videos sessions or teach us/ share us with Angular JS knowledge.

      Thanks

      Madhulatha

      (email address removed by moderator)