Upgrade from Adaptive.js v2.0 to v2.1

Taking advantage of Adaptive.js 2.1 features

Adaptive.js v2.1 introduces a new feature: the Preloader. To take advantage of this in your existing Adaptive.js 2.0.x project, follow the steps below.

This guide covers the process of upgrading a project generated with v2.0.x of the Adaptive.js Generator to Adaptive.js v2.1. If you have a project on Adaptive.js v1.x, first Upgrade to Adaptive.js v2.0 and then follow this guide. If you wish to create a new project using the latest version of Adaptive.js, visit the Getting Started Guide.

Update Page Filenames

v2.1 of the Adaptive.js Generator has changed the naming scheme for the four files that make up a "page" of your project. Each folder inside app/pages is a "page" of your project.

Overview of Renamed Page Files in Adaptive.js v2.1

[block:parameters] { "data": { "h-0": "File Type", "h-0": "Adaptive.js v2.0", "h-1": "Adaptive.js v2.1", "0-0": "View file", "0-1": "view.js", "0-2": "<PAGE_NAME>-view.js", "1-0": "Dust template", "1-1": "template.dust", "1-2": "<PAGE_NAME>.dust", "2-0": "UI script", "2-1": "ui.js", "2-2": "<PAGE_NAME>-ui.js", "3-0": "SCSS file", "3-1": "_style.scss", "3-2": "_<PAGE_NAME>.scss" }, "cols": 3, "rows": 4 } [/block]

1. Rename files

The above naming scheme will be used moving forward when using the Page Adaptive.js sub-generator, however as part of the update to v2.1 you will need to manually rename these files for each page of your project.

For example, here are the filename changes you should make to a v2.0 project containing a page called "Home" (i.e. the files inside the app/pages/home folder):

Rename all files within each folder inside app/pages in this way.

2. Update dependencies

After you've renamed all of your page files, you'll have to update the dependencies on those files throughout the project to reflect those new names.

View file

The array inside the define block at the top of the view file defines your view's dust template, e.g. for a "home" view file (app/pages/home/home-view.js):

function($, baseView, template) {

In this example the dust template is listed as dust!pages/home/template, and is changed to dust!pages/home/home. Carry out this change across all of your page view files.

Dust Template

Each dust template defines the UI script(s) that should be invoked when the page is run in the browser. This is found at the bottom of the template file, e.g. for a "home" dust template (app/pages/home/home.dust):

(function(require) {
  require(["global/ui", "pages/home/ui"], function(globalUI, homeUI) {

In this example, pages/home/ui is changed to pages/home/home-ui.

SCSS Partials

Your page's SCSS styles are typically imported into the _pages.scss SCSS partial. You must rename all of the statements in this file.

1. In an editor app, from your project directory, open the app/global/styles/_pages.scss file.

2. Update all page imports inside this file to use the new naming scheme, e.g.:

// Old filename
@import "pages/home/style";

// New filename
@import "pages/home/home";

1. Update Adaptive.js

Updating to the 2.1 version of Adaptive.js uses the npm package manager:

1. In an editor app, from your project directory, open the package.json file.

2. Update the value of "adaptivejs" to "~2.1.0"

3. Open a new Terminal (mac) or Command Prompt (Windows).

4. To change to your project directory, enter the following command on the command line:

cd path/to/new/project/directory

5. To update Adaptive.js to the newer version, enter the following command on the command line:

npm update adaptivejs

2. Update Adaptive.js Generator

1. To update your Adaptive.js Generator, enter the following command on the command line:

npm update -g generator-adaptivejs

3. Run the preloader-init Sub-Generator

See What is the Preloader? for information on this feature. The files added by the preloader-init sub-generator are used by the Preloader feature to define the CSS styling and HTML structure of the page skeleton that will be displayed during page load.

1. To run the preloader-init sub-generator, enter the following command on the command line:

yo adaptivejs:preloader-init

2. Follow the steps that are described by the generator after it finishes.

Edit in GitHub