Menu Developer Moovweb University

Develop Locally: Layers

Layers allow you to modularize and reuse code across devices within the same project. Layers are an important tool for adhering to the DRY (Don’t Repeat Yourself) principle in your Moovweb projects.


Layers

What Are Layers?

Layers provide a method of organizing blocks of code within a Developer Dashboard project and combine those blocks to define optimized end-user experiences that then get deployed to Modes in the Moovweb Control Center. The project code can belong to a specific end-user experience or can be shared across multiple experiences in the form of common code.

For example, consider a Control Center project that serves three different experiences using Modes: mobile, tablet, and desktop. Code for handling touch events would be shared by both tablet and mobile modes, but not by the desktop since desktops do not support touch events. However, code for unwrapping tables is not unique to a particular device and can be used by all the experiences.


Defining Layers for your Developer Project

Open your project’s moov_config.json file and add a new array called layers with the name of each layer. For example:

"layers": ["mobile", "tablet", "us", "uk"]

Here “mobile”, “tablet”, “us”, and “uk” are the names of the possible Layers in this project. In this case the developer has created a layer for each device (mobile or tablet) and geographic region (United States or United Kingdom). Layer names follow the same naming conventions as Sass and CSS identifiers, i.e., only alphanumerics, hyphens, underscores. Any non-ASCII characters are allowed.

Once the Layers are defined, you can use the fns.layer() method to return true when that Layer is active. For example:

fns.layer("mobile")

The above example will return true when the “mobile” Layer is active. You can use this method in an if statement to run specific code when on the “mobile” Layer.

if (fns.layer("mobile")) {
  // Run some mobile code here
}

You could also split the inner JavaScript for a given Layer on a separate js file and invoke this file from the fns.layer() method using the require() function. For example:

if (fns.layer("mobile")) {
 require("mobile_transformations.js");
}

Working with Multiple Layers

Layers provide you with the flexibility of defining blocks of codes that could be applied to an specific end-user experience, or multiple experiences when a Layer is active or when a combination of Layers is active.

When you have a block of code that can be applied when either one of the Layers “mobile” or “tablet” is active, then you can define the following in your Developer Dashboard project:

if (fns.layer("mobile") || fns.layer("tablet")) {
  require("common_modifications.js");
}

In case you have multiple Layers and you want to apply blocks of code selectively only when a number of specific Layers are active then you can do the following in your Developer Dashboard project:

if (fns.layer("tablet")) {
  if (fns.layer("uk")) {
    require("pounds_transformation.js");
  }
}

In the above case, only when the “tablet” and the “uk” experiences are active then the block of code will be applied.


Activating Layers in the Developer Dashboard

The Developer Dashboard allows you to run your Developer Dashboard project and also, to activate any of the defined Layers that you might have. You can think of activating layers as adding the ingredients to the “secret sauce” which is the end-user experience. You can test out either the complete end-user experience or individual parts of it during local development.

To run an end-user experience without any active layer hit the start button next to the Developer Dashboard project name:

Start Local Project

If you want to activate any of the layers on your project you can select them from the drop-down layers section:

Enable Layers and Update

  1. Click on the Active Layer drop-down
  2. Select the Layers that you want to enable
  3. Click the Update button to restart the server and activate the Layers automatically

Deploying Layers to Control Center Projects

When you are ready to take the end-user experience to the Moovweb cloud you will need to deploy it to a Control Center Mode that is part of a Control Center project. You can deploy end-user experiences in the same way that you activate Layers in the dashboard: individually or by groups of Layers.

Given that you will be deploying the complete user experience, you could be deploying more than one Layer to the Moovweb cloud. Execute the following command on your terminal:

moov deploy --layers=LAYER-NAME ACCOUNT-NAME/CC-PROJECT-NAME

For example to deploy the “Mobile” Layer to the default Mode, the command looks like:

moov deploy --layers=mobile myAccount/myProject

Alternatively you could deploy multiple Layers to the default Mode:

moov deploy --layers=mobile,us myAccount/myProject


Predefined Layers

Moovweb predefines a set of layer in the default project. These layers are used to control features during project development and deployment.

  • minify-js - When enabled, this layer minifies the JavaScript code before deploying to the cloud.
  • minify-css - When enabled, this layer minifies the CSS code before deploying to the cloud.
  • live-reload - When enalbed, this layer enables the automatic browser refresh feature during development. When a change is detected in your project, the web browser is automatically refreshed to show the latest edits.

More Information

To get detailed information about Modes check out our Modes documentation.

To obtain more information about deploying Layers to Control Center projects check the moov deploy command.