Cells-app-gulp-tasks NPM

Gulp Task of the Cells Apps

What is

These are the common tasks to helps developers to build and serve cells application.

Usage

It can be run outside of an app with the following parameters:

$ gulp --gulpfile {{gulpfile}} --cwd {{cells-app}}

Where:

gulpfile is the path to the gulpfile in the root of this repo.
cells-app is the root path of a cells application.

Installation

$ npm install -g gulp

$ git clone ssh://git@globaldevtools.bbva.com:7999/ctool/cells-app-gulp-tasks.git

$ cd cells-app-gulp-tasks && npm install

Example

$ cd GloMo.gb

$ gulp --gulpfile ../cells-app-gulp-tasks/gulpfile.js --cwd ./ dist

New split vulcanization process

To improve the performance for the initial load of the applications reducing the initial registration of components we've included a new vulcanization process which generate some bundles for the initial load and another one for the rest of the app.

Generated HTMLs

To maximize the number of parallel requests that HTTP/1 allows five HTMLs have been created which include the initial load and the rest of the app.

initial-components.html includes three imports to load the initial components of the app.
- initial-template.html imports the templates used in the initial app load, besides it also has others imports not included by any component (i.e. cells-polymer-bridge or application themes).
- initial-main-components.html includes every UI/CC component required by the page/s of the initial load.
- initial-datamanagers.html imports every DM component declared in the initial load page/s.
app-components.html imports every component declared in the rest of the application's pages.

Templates

In order to create the HTMLs some templates (tpl) will be required. These ones will be autogenerated if the task doesn't find them inside the project.

initial-components-imports.tpl will generate the initial-template.html. It's important to include here the imports required by the app but not included by any component, i.e. application themes, cells-polymer-bridge...
initial-components.tpl will generate inital-components.html file.
initial-partial-components.tpl will generate the imports and dependencies for initial-main-components.html and initial-datamanagers.html, besides there are two temporary files generated too (initial-main-components-deps.html and initial-datamanagers-deps.html).
app-components.html will generate app-components.html file.

Changes to be included in the apps

app.js

Instead of including the import for components.html now we'll have to include initial-components.html.

function loadElements() {
    var initialBundle = document.createElement('link');
    initialBundle.rel = 'import';
    initialBundle.href = 'components/initial-components.html';
    initialBundle.onload = finishLazyLoading;
    document.head.appendChild(initialBundle);
  }

Inside of onRender callback from CellsPolymerBridge we need to fire an event to load the rest of the components after the first page is rendered.

function loadAppImports() {
    document.removeEventListener('componentsInTemplateLoaded', loadAppImports);
    var nextBundle = document.createElement('link');
    nextBundle.rel = 'import';
    nextBundle.href = 'components/app-components.html';
    nextBundle.setAttribute('async', '');
    document.body.appendChild(nextBundle);
}

document.addEventListener('componentsInTemplateLoaded', loadAppImports);

/* ... */

new window.CellsPolymerBridge({
      mainNode: 'app__content',
      binding: 'always',
      cache: window.AppConfig.cache,
      componentsPath: window.AppConfig.componentsPath,
      generateRequestUrl: function generateRequestUrl(page) {
        return 'composerMocks/' + page + '.json';
      },
      routes: routes,
      onRender: function onrender(template) {
        if (!template.parentNode) {
          document.getElementById('app__content').appendChild(template);
          var eventComponentsLoaded = document.createEvent('Event');
          eventComponentsLoaded.initEvent('componentsInTemplateLoaded', true, true);
          document.body.dispatchEvent(eventComponentsLoaded);
        }
      }
    });

Initial pages configuration

The initial bundle has to be defined in the app configuration inside app/config//*.json and include in it/them an array indicating the pages which will be your initial load. If none is declared the new process won't be applied to the app and the building/vulcanization will be the legacy one.**

"initialBundle": ["login.json"]

Sometimes you'll need to include in the first bundle more than one page i.e. if you want to be able to access a second page really quickly. For this you can declare as many pages as you want to load initially.