For up-to-date product documentation, see the IBM MobileFirst Foundation Developer Center.

Removed components

The Cordova project created by MobileFirst 7.1 Studio included many resources that supported propriety functionality. However in V8.0.0 only pure Cordova is supported and the MobileFirst API no longer supports these features.

Skins

MobileFirst application skins provided a way of optimizing the UI for adapting to different devices and formats and is no longer supported in V8.0.0.

To replace this type of functionality it is recommended to adopt responsive web design methods provided by Cordova and HTML 5.

Shells

Shells allowed the development of a set of functionalities to be used by and shared among applications. In this way developers who were more experienced with the native environment could provide a set of core functions. These shells were bundled into inner applications and used by developers who are involved with business logic or UI development.

If the previous hybrid app used shells and inner applications, it is recommended to adopt Cordova design patterns and implement the shell components as Cordova plug-ins, that can be shared across applications. Developers may find ways to reuse parts of shell code and migrate them to Cordova plug-ins.

For example, if a customer has a set of web resources (JavaScript, css files, graphics, html) that are common across all their apps they can create a Cordova plug-in that copies these resources into the app's www folder.

Let's say these resources are within the src/www/acme/ folder:

src/www/acme/js/acme.js

src/www/acme/css/acme.css

src/www/acme/img/acme-logo.png

src/www/acme/html/banner.html

src/www/acme/html/footer.html

plugin.xml

The plugin.xml file contains the <asset> tag, containing the source and target for copying the resources:

<?xml version="1.0" encoding="UTF-8"?> 
<plugin 
     xmlns="http://apache.org/cordova/ns/plugins/1.0"     
     xmlns:rim="http://www.blackberry.com/ns/widgets" 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     id="cordova-plugin-acme" 
     version="1.0.1"> 
<name>ACME Company Shell Component</name> 
<description>ACME Company Shell Component</description> 
<license>MIT</license> 
<keywords>cordova,acme,shell,components</keywords> 
<issue>https://www.acme.com/support</issue> 
<asset src="src/www/acme" target="www/acme"/> 
</plugin> 

After the plugin.xml is added to the Cordova config.xml file, the resources listed in the asset src are copied to the asset target during compilation.

Then in their index.html file or anywhere inside their app they can reuse these resources.

<link rel="stylesheet" type="text/css" href="acme/css/acme.css">
<script type="text/javascript" src="acme/js/acme.js"></script>
<div id="banner"></div>
<div id="app"></div>
<div id="footer"></div>
<script type="text/javascript"> 
    $("#banner").load("acme/html/banner.html"); 
    $("#footer").load("acme/html/footer.html"); 
</script> 

Sets page

The settings page was a UI available in the MobileFirst hybrid app that allowed the developer to change the server URL at runtime for testing purposes. The developer can now use existing MobileFirst Client API to change the server URL at runtime. For more information, see WL.App.setServerUrl.

Minification

MobileFirst Studio 7.1 provided an OOTB method of reducing the size of your JavaScript code by removing all unnecessary characters before compilation. This removed functionality can be replaced by adding Cordova hooks to our project.

Many hooks are available for minifying your Javascript and css files and can be placed in the config.xml at the before_prepare event.

Here are some recommended hooks:

• https://www.npmjs.com/package/uglify-js
• https://www.npmjs.com/package/clean-css

These hooks can be defined in either a plug-in file or in the app's config.xml file, using the <hook> elements.

In this example, using the before_prepare hook event, a script is run for minifying before cordova prepare copies the files to each platform's www/ folder:

<hook type="before_prepare" src="scripts/uglify.js" />

Parent topic: Migrating existing Cordova and hybrid applications