Merge pull request #1629 from rmisio/cache-dom-views

Cache dom views

Author: jjeffryes

js/router.js

@@ -14,21 +14,20 @@ var ipcRenderer = require('ipc-renderer'),
 
 module.exports = Backbone.Router.extend({
   initialize: function(options){
-    var self = this;
-      
-    var routes;
+    var self = this,
+        routes,
+        originalHistoryBack,
+        originalHistoryForward;
 
     this.options = options || {};
 
     routes = [
       ["", "index"],
       ["home", "home"],
       ["home/:state(/:searchText)", "home"],
-      ["myPage", "userPage"],
       ["userPage", "userPage"],
       ["userPage/:userID(/:state)(/:itemHash)(/:skipNSFWmodal)", "userPage"],
       [/^@([^\/]+)(.*)$/, "userPageViaHandle"],
-      ["userPageViaHandle", "userPageViaHandle"],
       ["transactions", "transactions"],
       ["transactions/:state(/:orderID)(/:tabState)", "transactions"],
       ["settings", "settings"],
@@ -52,21 +51,50 @@ module.exports = Backbone.Router.extend({
       });
     });
 
-    var originalHistoryBack = history.back;
+    originalHistoryBack = history.back;
     history.back = function() {
       self.historyAction = 'back';
-      return originalHistoryBack(arguments);
+      return originalHistoryBack.apply(this, arguments);
     };
 
-    var originalHistoryForward = history.forward;
+    originalHistoryForward = history.forward;
     history.forward = function() {
       self.historyAction = 'forward';
-      return originalHistoryForward(arguments);
+      return originalHistoryForward.apply(this, arguments);
     };
 
     this.historySize = -1;
     this.historyPosition = -1;
     this.historyAction = 'default';
+
+    this.$obContainer = $('#obContainer');
+    this.viewCache = {};
+
+    window.setInterval(() => {
+      var cached;
+
+      for (var key in this.viewCache) {
+        if (this.viewCache.hasOwnProperty(key)) {
+          cached = this.viewCache[key];
+
+          if (Date.now() - cached.cachedAt >= cached.view.cacheExpires) {
+            delete this.viewCache[key];
+          }
+        }
+      }      
+    }, this.cleanCacheInterval);
+  },
+
+  // how often to clean out expired cached views
+  cleanCacheInterval: 1 * 60 * 1000,
+
+  refresh: function() {
+    if (this.view) {
+      // clear any cache for the view, so a fresh view is created
+      delete this.viewCache[this.view.constructor.getCacheIndex(Backbone.history.getFragment())];
+    }
+    
+    Backbone.history.loadUrl();
   },
 
   translateRoute: function(route) {
@@ -159,43 +187,108 @@ module.exports = Backbone.Router.extend({
     window.obEventBus.trigger('cleanNav');
   },
 
-  newView: function(view, bodyID, addressBarText, bodyClass){
-    var loadingConfig;
+  cacheView: function(view, fragment) {
+    var index;
+
+    fragment = fragment || Backbone.history.getFragment();
+    index = view.constructor.getCacheIndex(fragment);
+    
+    this.viewCache[index] = {
+      cachedAt: Date.now(),
+      view: this.view
+    }
+  },
+
+  newView: function(View, options) {
+    var now = Date.now(),
+        cached = this.viewCache[View.getCacheIndex(Backbone.history.getFragment())],
+        requestedRoute = Backbone.history.getFragment(),
+        loadingConfig;
+
+    options = __.extend({
+      // viewArgs can be an array of args to pass into the view or a single
+      // arg (most likely an options object)
+      viewArgs: [{}],
+      addressBarText: '',
+      bodyID: '',
+      bodyClass: ''
+    }, options || {});
+
+    options.viewArgs = options.viewArgs.length ? options.viewArgs : [options.viewArgs];
 
     this.cleanup();
-    //clear address bar. This will be replaced on the user page
-    addressBarText = addressBarText || "";
-    window.obEventBus.trigger("setAddressBar", addressBarText);
+    window.obEventBus.trigger('setAddressBar', options.addressBarText);
 
-    if ($('body').attr('id') != bodyID){
-      $('body').attr("id", bodyID || "");
-    }
-    if (bodyClass){
-      $('body').attr('class', bodyClass);
-    }
-    $('#obContainer').removeClass("customizeUserPage"); //remove customization styling if present
+    $('body').attr('id', options.bodyID);
+    $('body').attr('class', options.bodyClass);
+    $('#obContainer').removeClass('customizeUserPage'); //remove customization styling if present
 
     this.pageConnectModal && this.pageConnectModal.remove();
     this.pageConnectModal = null;
 
-    if (
-      (loadingConfig = __.result(view, 'loadingConfig')) &&
-      loadingConfig.promise &&
-      typeof loadingConfig.promise.then === 'function') {
-      this.launchPageConnectModal(loadingConfig);
+    // let's update the cache of our existing view (if it's cached && not expired) so
+    // cachedAt is updated and the user has up until the view's 'cacheExpires' amount of
+    // time to come back to it in it's current state.
+    for (var key in this.viewCache) {
+      if (this.viewCache.hasOwnProperty(key)) {
+        let cached = this.viewCache[key];
+
+        if (
+            cached.view === this.view &&
+            (Date.now() - cached.cachedAt < cached.view.cacheExpires)
+          ) {
+          cached.cachedAt = Date.now();
+        }
+      }
+    }
+
+    // remove / detach any existing view
+    if (this.view) {
+      if (this.view.cacheExpires) {
+        this.trigger('cache-will-detach', { view: this.view });
+        this.view.$el.detach();
+        this.trigger('cache-detached', { view: this.view });
+      } else {
+        this.view.close ? this.view.close() : this.view.remove()          
+      }
     }
-    
-    this.view && (this.view.close ? this.view.close() : this.view.remove());
-    this.view = view;
 
-    $('#obContainer')[0].scrollTop = 0;
+    if (cached && (now - cached.cachedAt < cached.view.cacheExpires)) {
+      // we have an un-expired cached view, let's reattach it
+      this.view = cached.view;
+
+      $('#content').html(this.view.$el);
+      this.view.delegateEvents();
+      this.$obContainer[0].scrollTop = 0;
+
+      this.trigger('cache-reattached', {
+        view: this.view,
+        route: requestedRoute
+      });
+    } else {
+      this.view = new (Function.prototype.bind.apply(View, [null].concat(options.viewArgs)));
+      $('#content').html(this.view.$el);
+      this.$obContainer[0].scrollTop = 0;
+
+      if (
+        (loadingConfig = __.result(this.view, 'loadingConfig')) &&
+        loadingConfig.promise &&
+        typeof loadingConfig.promise.then === 'function') {
+        this.launchPageConnectModal(loadingConfig).done(() => {
+          this.view.cacheExpires && this.cacheView(this.view);
+        });
+      } else {
+        this.view.cacheExpires && this.cacheView(this.view);
+      }      
+    }
   },
 
   launchPageConnectModal: function(config) {
     var defaults = {
-      connectText: 'Connecting...',
-      failedText: 'Unable to Connect.'
-    };
+        connectText: 'Connecting...',
+        failedText: 'Unable to Connect.'
+      },
+      deferred = $.Deferred();
 
     if (!(
         config &&
@@ -218,6 +311,7 @@ module.exports = Backbone.Router.extend({
 
     this.pageConnectModal.on('back', () => {
       history.back();
+      deferred.reject();
     });
 
     this.pageConnectModal.on('retry', () => {
@@ -230,42 +324,49 @@ module.exports = Backbone.Router.extend({
 
     this.pageConnectModal.on('cancel', () => {
       typeof config.promise.cancel === 'function' && config.promise.cancel();
+      deferred.reject();
       history.back();
     });
 
     config.promise.done(() => {
       this.pageConnectModal && this.pageConnectModal.remove();
       this.pageConnectModal = null;
+      deferred.resolve();
     }).fail(() => {
-      this.pageConnectModal.setState({
+      this.pageConnectModal && this.pageConnectModal.setState({
         statusText: config.failedText,
         mode: 'failed-connect',
         tooltip: config.failedTooltip
       });
+      deferred.reject();
     });
+
+    return deferred.promise();
   },
 
   index: function(){
-    if (localStorage.getItem("route")){
+    if(localStorage.getItem("route")){
       this.navigate('#' + localStorage.getItem("route"), {trigger: true});
-    } else if (this.userProfile.get('profile').beenSet == true){
-      this.home();
     } else {
-      this.userPage();
+      this.navigate('#home', {trigger: true});
     }
   },
 
   home: function(state, searchText){
-    this.newView(new homeView({
-      userModel: this.userModel,
-      userProfile: this.userProfile,
-      socketView: this.socketView,
-      state: state,
-      searchItemsText: searchText
-    }), '', {'addressText': searchText ? "#" + searchText : ""});
+    this.newView(homeView, {
+      viewArgs: {
+        userModel: this.userModel,
+        userProfile: this.userProfile,
+        socketView: this.socketView,
+        state: state,
+        searchItemsText: searchText
+      }
+    });
 
     // hide the discover onboarding callout
-    $('.js-OnboardingIntroDiscoverHolder').addClass('hide');
+    this.$discoverHolder = this.$discoverHolder || $('.js-OnboardingIntroDiscoverHolder');
+    this.$discoverHolder.addClass('hide');
+
     app.appBar.setTitle(window.polyglot.t('Discover'));
   },
 
@@ -282,7 +383,16 @@ module.exports = Backbone.Router.extend({
 
     if (handle) options.handle = handle;
 
-    this.newView(new userPageView(options), "userPage", '', 'onPage');
+    if (!userID) {
+      this.navigate(`userPage/${this.userModel.get('guid')}`, { replace: true });
+    }
+
+    this.newView(userPageView, {
+      viewArgs: options,
+      bodyID: 'userPage',
+      bodyClass: 'onPage'
+    });
+
     app.appBar.setTitle(handle ? handle : options.userId || this.userModel.get('guid'));
   },
 
@@ -302,6 +412,7 @@ module.exports = Backbone.Router.extend({
       // we want this to happen after the launchPageConnectModal processes
       // the resolution of the promise, hence the timeout.
       setTimeout(() => {
+        this.navigate(`userPage/${guid}${subPath ? '/' + subPath : ''}`, { replace: true });
         this.userPage(guid, state, itemHash, skipNSFWmodal, '@' + handle);
       }, 0);
     });
@@ -317,25 +428,33 @@ module.exports = Backbone.Router.extend({
   },
 
   transactions: function(state, orderID, tabState){
-    this.newView(new transactionsView({
-      userModel: this.userModel,
-      userProfile: this.userProfile,
-      socketView: this.socketView,
-      state: state,
-      orderID: orderID,
-      tabState: tabState //opens a tab in the order modal
-    }), "userPage");
+    this.newView(transactionsView, {
+      viewArgs: {
+        userModel: this.userModel,
+        userProfile: this.userProfile,
+        socketView: this.socketView,
+        state: state,
+        orderID: orderID,
+        tabState: tabState //opens a tab in the order modal
+      },
+      bodyID: 'transactionsPage'
+    });
+
     app.appBar.setTitle(window.polyglot.t('Transactions'));
   },
 
   settings: function(state){
     $('.js-loadingModal').addClass('show');
-    this.newView(new settingsView({
-      userModel: this.userModel,
-      userProfile: this.userProfile,
-      state: state,
-      socketView: this.socketView
-    }), "userPage");
+
+    this.newView(settingsView, {
+      viewArgs: {
+        userModel: this.userModel,
+        userProfile: this.userProfile,
+        state: state,
+        socketView: this.socketView
+      }
+    });
+
     app.appBar.setTitle(window.polyglot.t('Settings'));
   }
 });

js/start.js

@@ -331,7 +331,7 @@ $(window).bind('keydown', function(e) {
       Backbone.history.loadUrl();
       break;
     case window.config.keyShortcuts.restart:
-      location.reload();
+      app.router.refresh();
       break;
     }
 
@@ -403,7 +403,7 @@ var loadProfile = function(landingRoute, onboarded) {
             setCurrentBitCoin(cCode, user, function() {
               newSocketView = new socketView();
 
-              newPageNavView = new pageNavView({
+              app.pageNav = newPageNavView = new pageNavView({
                 model: user,
                 socketView: newSocketView,
                 userProfile: userProfile,