This tutorial explore the ways in which you can optimize an environment.

What is environment optimization?

IBM MobileFirst Platform Foundation increases development efficiency and productivity by providing an environment optimization framework. The core logic and design guidelines of the app are implemented by using web technologies (HTML, CSS, and JavaScript) and are shared by all environments. You can then add environment-specific optimizations when needed.

If you use a source control management system (such as Rational Team Concert™, Git, or Subversion), refer to the topic about integrating with source control systems, in the user documentation.

Currently supported environments

Smartphones

iOS 6 and later

Android 2.3.3, 4.x and later

BlackBerry OS 6 and later

Windows Phone 8 and later

Tablets

iOS 6 and later

Android 2.3.3, 4.x and later

Windows 8 and later

Web

Modern browsers that support HTML 4, CSS 2.1, and JavaScript 1.5 at a minimum

Browsers that support HTML 5 and CSS 3

Browsers

Modern browsers that support HTML 4, CSS 2.1, and JavaScript 1.5 at a minimum

Browsers that support HTML 5 and CSS 3

How does optimization work?

The MobileFirst application structure is divided into environment folders (iPhone, Android, BlackBerry, and so on).

Each environment folder contains the web resources (CSS, JS, images, and so on) that are relevant for that specific environment.

A newly created application contains the base environment in the common folder. The web resources that are in the common folder serve as the basis for the optimized environments that might be added later on.

The common folder must hold only resources that are shared by all environments.

Adding an environment

Using the CLI

one of the following ways:

In a terminal window, navigate to the application folder and use the command: mfp add environment. An interactive menu will be displayed.

Using the Studio

Click the MobileFirst icon from the Eclipse menu bar and select MobileFirst Environment.

HTML optimization

The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The new environment HTML code overrides the common HTML file.Note: By default, a new environment does not include a new HTML file because the common HTML file is shared by all environments.

JavaScript optimization

The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The JavaScript file from an environment folder has a wlEnvInit() function that invokes the wlCommonInit() JavaScript function from the common folder.

Technically, the JavaScript from an environment folder is appended to the file from the common folder.
Using the same variable names as in the common folder redefines their meaning.

CSS optimization

The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The CSS file from an environment folder is appended to the CSS file from the common folder.

Using the same property names as the ones in the common folder overrides their settings.Note: The CSS from the environment folder might contain some default CSS rules that match the environment needs.

Images optimization

The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: Image files in the images folder of the environment folder that have the same file name as the image files in the common folder override the image files in the common folder.