Cornerstone 2.0: Performance improvements

.travis.yml

@@ -1,13 +1,13 @@
 language: node_js
 node_js:
-- 4
+  - 6
 sudo: required
 dist: trusty
 install:
-- bundle install
-- npm install -g grunt-cli
-- npm install -g bigcommerce/stencil-cli
-- npm install
+  - bundle install
+  - npm install -g grunt-cli
+  - npm install -g bigcommerce/stencil-cli
+  - npm install
 script:
-- grunt check
-- stencil bundle
+  - grunt check
+  - stencil bundle

README.md

@@ -159,8 +159,8 @@ Icons are delivered via a single SVG sprite, which is embedded on the page in
 `templates/layout/base.html`. It is generated via a grunt task `grunt svgstore`.
 
 The task takes individual SVG files for each icon in `assets/icons` and bundles
-them together, to be inlined on the top of the theme, inside a handlebars partial.
-Each icon can then be called in a similar way to an inline image via:
+them together, to be inlined on the top of the theme, via an ajax call managed
+by svg-injector. Each icon can then be called in a similar way to an inline image via:
 
 ```
 <svg><use xlink:href="#icon-svgFileName" /></svg>

assets/js/app.js

@@ -63,32 +63,16 @@ window.stencilBootstrap = function stencilBootstrap(pageType, contextJSON = null
     return {
         load() {
             $(async () => {
-                let globalClass;
-                let pageClass;
-                let PageClass;
-
-                // Finds the appropriate class from the pageType.
-                const pageClassImporter = pageClasses[pageType];
-                if (typeof pageClassImporter === 'function') {
-                    PageClass = (await pageClassImporter()).default;
-                }
-
+                // Load globals
                 if (loadGlobal) {
-                    globalClass = new Global();
-                    globalClass.context = context;
+                    Global.load(context);
                 }
 
-                if (PageClass) {
-                    pageClass = new PageClass(context);
-                    pageClass.context = context;
-                }
-
-                if (globalClass) {
-                    globalClass.load();
-                }
-
-                if (pageClass) {
-                    pageClass.load();
+                // Find the appropriate page loader based on pageType
+                const pageClassImporter = pageClasses[pageType];
+                if (typeof pageClassImporter === 'function') {
+                    const PageClass = (await pageClassImporter()).default;
+                    PageClass.load(context);
                 }
             });
         },

assets/js/theme/account.js

@@ -8,14 +8,14 @@ import { classifyForm, Validators, insertStateHiddenField } from './common/form-
 import swal from 'sweetalert2';
 
 export default class Account extends PageManager {
-    constructor() {
-        super();
+    constructor(context) {
+        super(context);
 
         this.$state = $('[data-field-type="State"]');
         this.$body = $('body');
     }
 
-    loaded(next) {
+    onReady() {
         const $editAccountForm = classifyForm('form[data-edit-account-form]');
         const $addressForm = classifyForm('form[data-address-form]');
         const $inboxForm = classifyForm('form[data-inbox-form]');
@@ -27,7 +27,7 @@ export default class Account extends PageManager {
         this.passwordRequirements = this.context.passwordRequirements;
 
         // Instantiates wish list JS
-        this.wishlist = new Wishlist();
+        Wishlist.load();
 
         if ($editAccountForm.length) {
             this.registerEditAccountValidation($editAccountForm);
@@ -67,8 +67,6 @@ export default class Account extends PageManager {
         }
 
         this.bindDeleteAddress();
-
-        next();
     }
 
     /**

assets/js/theme/auth.js

@@ -7,8 +7,8 @@ import forms from './common/models/forms';
 import { classifyForm, Validators } from './common/form-utils';
 
 export default class Auth extends PageManager {
-    constructor() {
-        super();
+    constructor(context) {
+        super(context);
         this.formCreateSelector = 'form[data-create-account-form]';
     }
 
@@ -167,9 +167,8 @@ export default class Auth extends PageManager {
 
     /**
      * Request is made in this function to the remote endpoint and pulls back the states for country.
-     * @param next
      */
-    loaded(next) {
+    onReady() {
         const $createAccountForm = classifyForm(this.formCreateSelector);
         const $loginForm = classifyForm('.login-form');
         const $forgotPasswordForm = classifyForm('.forgot-password-form');
@@ -193,7 +192,5 @@ export default class Auth extends PageManager {
         if ($createAccountForm.length) {
             this.registerCreateAccountValidator($createAccountForm);
         }
-
-        next();
     }
 }

assets/js/theme/brand.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import FacetedSearch from './common/faceted-search';
 
 export default class Brand extends CatalogPage {
-    loaded() {
+    onReady() {
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();
         } else {

assets/js/theme/cart.js

@@ -8,16 +8,14 @@ import { defaultModal } from './global/modal';
 import swal from 'sweetalert2';
 
 export default class Cart extends PageManager {
-    loaded(next) {
+    onReady() {
         this.$cartContent = $('[data-cart-content]');
         this.$cartMessages = $('[data-cart-status]');
         this.$cartTotals = $('[data-cart-totals]');
         this.$overlay = $('[data-cart] .loadingOverlay')
             .hide(); // TODO: temporary until roper pulls in his cart components
 
         this.bindEvents();
-
-        next();
     }
 
     cartUpdate($target) {

assets/js/theme/category.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import FacetedSearch from './common/faceted-search';
 
 export default class Category extends CatalogPage {
-    loaded() {
+    onReady() {
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();
         } else {

assets/js/theme/common/carousel.js

@@ -7,4 +7,16 @@ export default function () {
     if ($carousel.length) {
         $carousel.slick();
     }
+
+    // Alternative image styling for IE, which doesn't support objectfit
+    if (typeof document.documentElement.style.objectFit === 'undefined') {
+        $('.heroCarousel-slide').each(() => {
+            const $container = $(this);
+            const imgUrl = $container.find('img').data('lazy');
+
+            if (imgUrl) {
+                $container.css('backgroundImage', `url(${imgUrl})`).addClass('compat-object-fit');
+            }
+        });
+    }
 }

assets/js/theme/common/product-details.js

@@ -17,7 +17,8 @@ export default class ProductDetails {
         this.imageGallery.init();
         this.listenQuantityChange();
         this.initRadioAttributes();
-        this.wishlist = new Wishlist().load();
+
+        Wishlist.load();
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);

assets/js/theme/compare.js

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import swal from 'sweetalert2';
 
 export default class Compare extends PageManager {
-    loaded() {
+    onReady() {
         const message = this.context.compareRemoveMessage;
 
         $('body').on('click', '[data-comparison-remove]', event => {

assets/js/theme/contact-us.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import forms from './common/models/forms';
 
 export default class ContactUs extends PageManager {
-    loaded() {
+    onReady() {
         this.registerContactFormValidation();
     }
 

assets/js/theme/gift-certificate.js

@@ -8,8 +8,7 @@ import { defaultModal } from './global/modal';
 
 export default class GiftCertificate extends PageManager {
     constructor(context) {
-        super();
-        this.context = context;
+        super(context);
 
         const $certBalanceForm = $('#gift-certificate-balance');
 

assets/js/theme/global.js

@@ -1,6 +1,5 @@
 import $ from 'jquery';
 import './common/select-option-plugin';
-import 'html5-history-api';
 import PageManager from './page-manager';
 import quickSearch from './global/quick-search';
 import currencySelector from './global/currency-selector';
@@ -15,21 +14,16 @@ import maintenanceMode from './global/maintenanceMode';
 import carousel from './common/carousel';
 import 'lazysizes';
 import loadingProgressBar from './global/loading-progress-bar';
-import FastClick from 'fastclick';
 import sweetAlert from './global/sweet-alert';
-
-function fastClick(element) {
-    return new FastClick(element);
-}
+import svgInjector from './global/svg-injector';
 
 export default class Global extends PageManager {
-    /**
-     * You can wrap the execution in this method with an asynchronous function map using the async library
-     * if your global modules need async callback handling.
-     * @param next
-     */
-    loaded(next) {
-        fastClick(document.body);
+    onReady() {
+        // Only load visible elements until the onload event fires,
+        // after which preload nearby elements.
+        window.lazySizesConfig = window.lazySizesConfig || {};
+        window.lazySizesConfig.loadMode = 1;
+
         quickSearch();
         currencySelector();
         foundation($(document));
@@ -43,6 +37,6 @@ export default class Global extends PageManager {
         maintenanceMode(this.context.maintenanceMode);
         loadingProgressBar();
         sweetAlert();
-        next();
+        svgInjector();
     }
 }

assets/js/theme/global/svg-injector.js

@@ -0,0 +1,5 @@
+import svgInjector from 'svg-injector';
+
+export default function () {
+    svgInjector(document.querySelectorAll('svg[data-src]'));
+}

assets/js/theme/page-manager.js

@@ -1,35 +1,22 @@
-import async from 'async';
+import $ from 'jquery';
 
 export default class PageManager {
     constructor(context) {
         this.context = context;
     }
 
-    before(next) {
-        next();
-    }
-
-    loaded(next) {
-        next();
+    type() {
+        return this.constructor.name;
     }
 
-    after(next) {
-        next();
+    onReady() {
     }
 
-    type() {
-        return this.constructor.name;
-    }
+    static load(context) {
+        const page = new this(context);
 
-    load() {
-        async.series([
-            this.before.bind(this), // Executed first after constructor()
-            this.loaded.bind(this), // Main module logic
-            this.after.bind(this), // Clean up method that can be overridden for cleanup.
-        ], (err) => {
-            if (err) {
-                throw new Error(err);
-            }
+        $(document).ready(() => {
+            page.onReady.bind(page)();
         });
     }
 }

assets/js/theme/product.js

@@ -16,18 +16,14 @@ export default class Product extends PageManager {
         this.$reviewLink = $('[data-reveal-id="modal-review-form"]');
     }
 
-    before(next) {
+    onReady() {
         // Listen for foundation modal close events to sanitize URL after review.
         $(document).on('close.fndtn.reveal', () => {
             if (this.url.indexOf('#write_review') !== -1 && typeof window.history.replaceState === 'function') {
                 window.history.replaceState(null, document.title, window.location.pathname);
             }
         });
 
-        next();
-    }
-
-    loaded(next) {
         let validator;
 
         // Init collapsible
@@ -53,13 +49,7 @@ export default class Product extends PageManager {
             return false;
         });
 
-        next();
-    }
-
-    after(next) {
         this.productReviewHandler();
-
-        next();
     }
 
     productReviewHandler() {

assets/js/theme/search.js

@@ -57,7 +57,7 @@ export default class Search extends CatalogPage {
         urlUtils.goToUrl(url);
     }
 
-    loaded() {
+    onReady() {
         const $searchForm = $('[data-advanced-search-form]');
         const $categoryTreeContainer = $searchForm.find('[data-search-category-tree]');
         const url = Url.parse(window.location.href, true);

assets/js/theme/wishlist.js

@@ -7,8 +7,8 @@ import { api } from '@bigcommerce/stencil-utils';
 import { defaultModal } from './global/modal';
 
 export default class WishList extends PageManager {
-    constructor() {
-        super();
+    constructor(context) {
+        super(context);
 
         this.options = {
             template: 'account/add-wishlist',
@@ -83,7 +83,7 @@ export default class WishList extends PageManager {
         });
     }
 
-    load() {
+    onReady() {
         const $addWishListForm = $('.wishlist-form');
 
         if ($addWishListForm.length) {
@@ -93,9 +93,4 @@ export default class WishList extends PageManager {
         this.wishlistDeleteConfirm();
         this.wishListHandler();
     }
-
-    loaded(next) {
-        this.load();
-        next();
-    }
 }