Layers

Moovweb 5 introduced 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 Tritium 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. Tritium 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, Tritium code for unwrapping tables is not unique to a particular device and can be used by all the experiences.

Setting Up Layers in New Developer Dashboard Projects

To create a new Developer Dashboard project that uses Layers, you need to add the Layers mixer into your project.

On the Moovweb Developer Dashboard click the button “Generate New Project” to start the new project creation wizard. Then set up your project information, select your desired Project Configuration in step number 2, and then click the advanced customizations option.

Dashboard - Project Configuration

In the custom configurations under Mixers, select the Layers mixer.

Dashboard - Custom Configuration

Setting Up Layers in Existing Developer Dashboard Projects

To start working with Layers in existing Developer Dashboard Projects, open your Mixer.lock file and add the following line at the end of the file:

layers (1.0.18)

After modifying Mixer.lock, the Layers mixer will be downloaded from the Moovweb cloud the next time you execute the Developer Dashboard project.

Defining Layers for your Developer Dashboard Project

Now that you have your project set up, you can define Layers for your project. Open your project’s 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 layer() function to run code only when that Layer is active. For example:

layer("mobile") {
 # do mobile stuff here
}

In the above example, the Tritium code in the braces will be applied when the “mobile” Layer is active . Note that you could split the Tritium code for a given Layer on a separate Tritium file and invoke this file from the layer() function using the @import notation. For example:

layer("mobile") {
 @import "mobile_transformations.ts"
}

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:

layer("mobile") {
   @import "common_transformation.ts"
}

layer("tablet") {
   @import "common_transformation.ts"
}

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:

layer("tablet") {
  layer("uk") {
    @import "pounds_transformation.ts"
  }
}

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

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.

Check out the complete Layers mixer documentation and sample code at tritium.io