{"id":99,"date":"2018-05-07T17:56:05","date_gmt":"2018-05-07T17:56:05","guid":{"rendered":"http:\/\/www.bullcrane.com\/angular\/?p=99"},"modified":"2018-06-25T16:18:57","modified_gmt":"2018-06-25T16:18:57","slug":"flex-layout-performance-solution","status":"publish","type":"post","link":"http:\/\/www.bullcrane.com\/angular\/2018\/05\/07\/flex-layout-performance-solution\/","title":{"rendered":"Flex-layout performance solution"},"content":{"rendered":"

In my previous blog post<\/a>, I described a performance problem with the special responsive features of the Angular flex-layout module.\u00a0 Combined use of fxShow and fxHide was killing my app’s performance.\u00a0 Example:<\/p>\n

<button mat-button fxHide=\"true\" fxShow.gt-sm=\"true\"<\/pre>\n
As I studied the documentation more I learned that the above syntax is overkill.\u00a0 The following is easier and does the same thing:<\/p>\n
<button mat-button fxHide fxShow.gt-sm<\/pre>\n
This simplification makes no difference in performance, however.<\/p>\n
The .gt-sm<\/em> means “when greater than small.”\u00a0 A few HTML tags like this one don’t hurt, but I might have a few thousand, generated by an ngFor.<\/p>\n
Solution:\u00a0 go imperative – use flex-layout’s ObservableMedia<\/h6>\n
The “dot” modifiers like the .gt-sm<\/em> shown above are known as mediaQuery alias suffixes.\u00a0\u00a0<\/em> While they are one of the main attractions of the flex-layout module’s\u00a0responsive API, <\/em>I got rid of them all.\u00a0 Eventually I went ahead and removed the static API <\/em>also.<\/p>\n
<button mat-button fxHide<\/del> fxShow.gt-sm\r\n<\/del>                      ^     ^\r\n                      |     |\r\nremove static API ----+     +--- remove responsive API<\/pre>\n
I put in flex-layout’s way of checking mediaQuery changes, the isActive<\/em> method of the ObservableMedia<\/a> service.\u00a0 This is in my main app.component.ts.<\/em>\u00a0 Here are the relevant parts:<\/p>\n
import { ObservableMedia } from '@angular\/flex-layout';\r\n...\r\nconstructor (\r\n public media: ObservableMedia,\r\n...\r\nsizeNum: Object = {'PHONE':1,'TABLET':2,'HD':3}\r\nactiveSize(): number {\r\n if (this.media.isActive('xs')<\/span>) {return this.sizeNum['PHONE'];}\r\n if (this.media.isActive('sm')<\/span>) {return this.sizeNum['TABLET'];}\r\n else {return this.sizeNum['HD'];}\r\n }<\/pre>\n
Now I can use ngIf in my html:<\/p>\n
<button mat-button *ngIf=\"activeSize()>=sizeNum['HD']\"<\/pre>\n
In addition to implementing show\/hide logic, I also was using mediaQuery alias suffixes on ngClass.\u00a0 Now I am doing this instead:<\/p>\n
TypeScript<\/p>\n
classList(size:number): string[] {\r\n  if (size>=this.sizeNum['HD'])          {return ['small']}\r\n  else if (size>=this.sizeNum['TABLET']) {return ['tiny']}\r\n  else                                   {return ['nano']}\r\n  }<\/pre>\n
HTML<\/p>\n
<img [src]=\"songImgUrl()\"\r\n  class=\"rounded\"\r\n  [ngClass]=\"classList(activeSize())\"<\/pre>\n
Conclusion<\/h6>\n
The turning point was removing the responsive API directives.\u00a0 That restored the performance but I had some constructs like this:<\/p>\n
<button mat-button [fxShow]=\"activeSize()>=sizeNum['HD']\"<\/pre>\n
This is the same thing as Angular’s stock ngIf.\u00a0 <\/em>So I decided to switch everything to native Angular DOM directives and use only the ObservableMedia <\/em>from flex-layout.\u00a0 <\/em>I am satisfied with this solution because:<\/p>\n