Replace function calls in template expressions to increase performance

[IndianaDschones]

Bug Description

Threema Web makes massive use of function calls from template expressions like ng-src="{{ ctrl.getAvatarUri() }}". Even if it works and in this example the user avatar is shown, AngularJS worries about each function. Why? The framework needs to check several times (each digest cycle) if a new value is available. This means, that every time something changes (or may have), the function gets called. That can be veeeeeery often.

Steps to Reproduce (for bugs)

1. Add a log statement to this.getAvatarUri in avatar.ts
2. Launch the devserver and type a message, move the mouse or similar stuff
3. Watch the console and the massive amount of your log message

This is just one template expression function. All the functions combined may be a reason why Threema Web is not as fast and snappy as it could be.

Potential Solution

For some functions the easy solution may be to just get the value once e.g. by initializing a variable once. But this is not a solution for avatars. The downside is, that a changed avatar would not be updated in Threema Web. So the whole process of replacing these calls may be (very) time consuming. The avatar for example may need some kind of observer pattern or push instad of this pull strategy.

More information on this topic can be found here:

• https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496
• https://bytes.babbel.com/en/articles/2017-03-17-angular-performance.html
• https://www.qualtrics.com/eng/tuning-angularjs-performance/

Your Environment

Not important for this issue.

[dbrgn]

Yep, this is definitely one of the reasons why the UI tends to be laggy sometimes (especially on older devices). We've done some optimization work in the past (e.g. #567), but there's surely still more potential for optimization.

However, AngularJS 1 architecture itself (especially its "check everything" digest loop) is also a big reason why optimizing is hard. In the long run we need to replace the entire codebase. We are already working on that (but I cannot give you any more details on that so far, unfortunately).

[IndianaDschones]

Since you may be in an early stage: it would definitively be nice to choose/build a solution which enables the user to run Threema Web as an application (maybe Threema Desktop?). Just like Microsoft Teams, Discord and so on which can be run in a browser or as a desktop application. Imho it is more pleasant to use a dedicated application rather than opening a browser. One advantage would be to put the app in autostart.

[dbrgn]

That may be one of our goals 😉

[lgrahl]

Yeah, and maybe I already hate Electron, too.