perf(settings): use translate directive

This commit modifies the tree and settings page to use the `translate` directive instead of the translate filter. This result in an average decrease of `$watchers` by 50%. The original page average was 648 `$watchers` with the tree fully expanded, but falls to 351 `$watchers` by using the translate directive. This commit determines the validity of #1074 and closes #1074.
IMA-WorldHealth · Dec 16, 2016 · c0ac714 · c0ac714
1 parent e8c1594
commit c0ac714
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 33 deletions.
diff --git a/client/src/index.html b/client/src/index.html
@@ -68,7 +68,7 @@ <h4><a class="title-content" ui-sref="index.details">{{ AppCtrl.project.name }}<
             <li>
               <a class="session" ng-click="AppCtrl.settings()">
                 <span class="fa fa-cog"></span>
-                <span class="link-label">{{ "SETTINGS.TITLE" | translate }}</span>
+                <span class="link-label" translate>SETTINGS.TITLE</span>
               </a>
             </li>
             <li>

diff --git a/client/src/js/components/bhLoadingButton.js b/client/src/js/components/bhLoadingButton.js
@@ -8,8 +8,8 @@ angular.module('bhima.components')
   transclude: true,
   template :
     '<button type="submit" class="btn" ng-class="$ctrl.buttonClass" ng-disabled="$ctrl.loadingState || $ctrl.disabled" data-method="submit">' +
-      '<span ng-show="$ctrl.loadingState"><span class="fa fa-circle-o-notch fa-spin"></span> {{ "FORM.INFO.LOADING" | translate }}</span>' +
-      '<span ng-hide="$ctrl.loadingState" ng-transclude>{{ "FORM.BUTTONS.SUBMIT" | translate }}</span>' +
+      '<span ng-show="$ctrl.loadingState" translate><span class="fa fa-circle-o-notch fa-spin"></span>FORM.INFO.LOADING</span>' +
+      '<span ng-hide="$ctrl.loadingState" ng-transclude translate>FORM.BUTTONS.SUBMIT</span>' +
     '</button>',
   controller : LoadingButtonController
 });

diff --git a/client/src/partials/settings/settings.html b/client/src/partials/settings/settings.html
@@ -1,8 +1,8 @@
 <div class="flex-header">
   <div class="bhima-title">
     <ol class="headercrumb">
-      <li class="static">{{ "HOME.BHIMA" | translate }}</li>
-      <li class="title">{{ "SETTINGS.TITLE" | translate }}</li>
+      <li class="static" translate>HOME.BHIMA</li>
+      <li class="title" translate>SETTINGS.TITLE</li>
     </ol>
   </div>
 </div>
@@ -12,68 +12,69 @@
     <div class="row">
       <div class="col-md-5" style="margin-bottom : 10px;">
         <div class="form-group">
-          <label for="select-language">{{ "FORM.LABELS.LANGUAGE" | translate }}</label>
+          <label for="select-language" translate>FORM.LABELS.LANGUAGE</label>
           <select
             id="select-language"
             ng-model="SettingsCtrl.settings.language"
             ng-change="SettingsCtrl.languageService.set(SettingsCtrl.settings.language)"
             ng-options="key as lang.name for (key, lang) in SettingsCtrl.languages"
             class="form-control">
-            <option value="" disabled="disabled" selected>{{ "FORM.SELECT.LANGUAGE" | translate }}</option>
+            <option value="" disabled="disabled" translate>FORM.SELECT.LANGUAGE</option>
           </select>
         </div>
 
         <div class="form-group">
-          <label for="select-default">{{ "FORM.LABELS.HOME_PAGE" | translate }}</label>
+          <label for="select-default" translate>FORM.LABELS.HOME_PAGE</label>
           <select id="select-default" class="form-control">
-            <option selected>{{ "FORM.SELECT.LAST_PAGE" | translate }}</option>
+            <option selected translate>FORM.SELECT.LAST_PAGE</option>
           </select>
         </div>
 
         <button
           class="btn btn-default"
           ng-click="SettingsCtrl.back()"
           data-back-button>
-          <i class="fa fa-arrow-left"></i> {{ "FORM.BUTTONS.BACK" | translate }}
+          <i class="fa fa-arrow-left"></i>
+          <span translate>FORM.BUTTONS.BACK</span>
         </button>
 
         <button
           class="btn btn-default"
           ng-click="SettingsCtrl.logout()"
           data-logout-button>
-          <i class="fa fa-sign-out"></i> {{ "FORM.BUTTONS.LOGOUT" | translate }}
+          <i class="fa fa-sign-out"></i>
+          <span translate>FORM.BUTTONS.LOGOUT</span>
         </button>
 
         <a ng-href="mailto:{{SettingsCtrl.bugLink}}" class="btn btn-default" data-bug-report-button>
           <span class="text-danger">
-            <i class="fa fa-bug"></i> {{ "SETTINGS.BUG_LINK" | translate }}
+            <i class="fa fa-bug"></i> <span translate>SETTINGS.BUG_LINK</span>
           </span>
         </a>
       </div>
+
       <!-- system information panel -->
       <div class="col-md-6 col-md-offset-1">
         <div class="panel panel-default">
-          <div class="panel-heading">
-             {{ "SYSTEM.INFORMATION" | translate }}
-          </div>
+          <div class="panel-heading" translate> SYSTEM.INFORMATION </div>
           <div class="panel-body">
             <dl class="dl-horizontal">
-              <dt>{{ "SYSTEM.PLATFORM" | translate }}</dt>
+              <dt translate>SYSTEM.PLATFORM</dt>
               <dd>{{ SettingsCtrl.system.platform }}</dd>
 
-              <dt>{{ "SYSTEM.CPUS" | translate }}</dt>
+              <dt translate>SYSTEM.CPUS</dt>
               <dd>{{ SettingsCtrl.system.numCPUs }}</dd>
 
-              <dt>{{ "SYSTEM.MACHINE_UPTIME" | translate }}</dt>
+              <dt translate>SYSTEM.MACHINE_UPTIME</dt>
               <dd>{{ SettingsCtrl.system.machineUptime | amDurationFormat }}</dd>
 
-              <dt>{{ "SYSTEM.PROCESS_UPTIME" | translate }}</dt>
+              <dt translate>SYSTEM.PROCESS_UPTIME</dt>
               <dd>{{ SettingsCtrl.system.processUptime | amDurationFormat }}</dd>
 
-              <dt>{{ "SYSTEM.MEMORY_USAGE" | translate }}</dt>
+              <dt translate>SYSTEM.MEMORY_USAGE</dt>
               <dd>{{ SettingsCtrl.system.memoryUsage | number }}%</dd>
 
-              <dt>{{ "SYSTEM.VERSION" | translate }}</dt>
+              <dt translate>SYSTEM.VERSION</dt>
               <dd>{{ SettingsCtrl.system.version }}</dd>
             </dl>
           </div>

diff --git a/client/src/partials/settings/settings.js b/client/src/partials/settings/settings.js
@@ -17,7 +17,7 @@ SettingsController.$inject = [
 function SettingsController(Languages, Session, Constants, $translate, Notify, $window, System) {
   var vm = this;
 
-  vm.back = function () { $window.history.back(); };
+  vm.back = function back() { $window.history.back(); };
 
   // load settings from services
   vm.settings = { language : Languages.key };
@@ -28,10 +28,10 @@ function SettingsController(Languages, Session, Constants, $translate, Notify, $
 
   /** bind the language service for use in the view */
   Languages.read()
-  .then(function (languages) {
-    vm.languages = languages;
-  })
-  .catch(Notify.handleError);
+    .then(function (languages) {
+      vm.languages = languages;
+    })
+    .catch(Notify.handleError);
 
   // formatting or bug report
   var emailAddress = Constants.settings.CONTACT_EMAIL;

diff --git a/client/src/partials/templates/navigation.tmpl.html b/client/src/partials/templates/navigation.tmpl.html
@@ -1,7 +1,7 @@
 <!--
 Limitations of current templating structure:
-* Assumption is made children of the root node are folders
-* Only two levels of depth is supported for children
+ * Assumption is made children of the root node are folders
+ * Only two levels of depth is supported for children
 -->
 <div class="flex-tree">
   <ul>
@@ -16,7 +16,7 @@
           'fa-folder-open' : unit.open && unit.children.length > 0,
           'fa-folder' : !unit.open && unit.children.length > 0}">
         </span>
-        <span class="tree-title">{{ unit.key | translate }}</span>
+        <span class="tree-title" translate>{{unit.key}}</span>
       </a>
 
       <ul ng-if="$ctrl.isOpen(unit)">
@@ -33,22 +33,22 @@
               'fa-folder-open' : child.open && child.children.length > 0,
               'fa-folder' : !child.open && child.children.length > 0}">
             </span>
-            <span class="tree-title">{{ child.key | translate }}</span>
+            <span class="tree-title" translate>{{child.key}}</span>
           </a>
 
           <!-- otherwise, it is just a plan link -->
           <a ng-click="$ctrl.navigate(child)" ng-if="$ctrl.isChildNode(child)" data-unit-key="{{ ::child.key }}">
             <span class="fa fa-file-o"></span>
-            <span class="tree-title">{{ child.key | translate }}</a></span>
+            <span class="tree-title" translate>{{child.key}}</span>
           </a>
 
           <ul ng-if="$ctrl.isOpen(child)">
 
             <!-- third level: subchild -->
             <li ng-repeat="subchild in child.children track by subchild.id" ng-class="{ 'selected' : subchild.selected }" class="subtree">
-              <a ng-click="$ctrl.navigate(subchild)" ng-class="{ 'selected' : subchild.selected }" data-unit-key="{{ subchild.key }}">
+              <a ng-click="$ctrl.navigate(subchild)" ng-class="{ 'selected' : subchild.selected }" data-unit-key="{{ ::subchild.key }}">
                 <span class="fa fa-file-o"></span>
-                <span class="tree-title">{{ subchild.key | translate }}</a></span>
+                <span class="tree-title" translate>{{subchild.key}}</span>
               </a>
             </li>
           </ul>