Tag Archives: HTML5

Updated: Parallax Effects in Hybrid/Web Apps

A while back I wrote about adding parallax effects to your HTML/JS experiences to make them feel a bit richer and closer to a native experience.  I’ve just added this subtle (key word *subtle*) effect to a new project and made a few changes I wanted to share here.

If you are wondering what I am talking about with “parallax effects” – Parallax movement is where objects in the background move at a different rate than objects in the foreground, thus causing the perception of depth.  Read more about it if you’re interested.

First, here’s a quick video of this latest app in action.  It’s a hybrid MobileFirst app, but this technique could be used in any Cordova/PhoneGap/MobileFirst/mobile web app experience.  The key is to keep it subtle and not too much “in your face”, and yes, it is very subtle in this video.  You have to watch closely.

The techniques that I wrote about in the previous post still apply – I’ve just added a bit more to cover more use cases.

First let’s look at the CSS.

body {
    background-image: url('../images/cloud_advisor_bkgd.png');
    background-attachment: fixed;
    background-position: center; 
    background-size: auto 120%;
}

This sets the background image and default position.  The distinct change here is that I set the background size to “auto” width and 120% height.  In this case, you can have a huge image that shrinks down to just slightly larger than the window size, or a small image that scales up to a larger window size.  This way you don’t end up with seams in a repeated background or a background that is too big to highlight the parallax effect effectively.

Next let’s take a quick look at the JS involved.

var position = "center";
var lastPosition = "center";
var contentCSS = "";
var body = $("body");
var content = $(".content");
window.suspendAnimation = false;


var xMovement = 15;
var yMovement = 30;
var halfX = xMovement/2;
var halfY = yMovement/2;

window.ondeviceorientation = function(event) {
 var gamma = event.gamma/90;
 var beta = event.beta/180;
 
 var temp = 0;
 
 //fix for holding the device upside down
 if ( gamma >= 1 ) {
  gamma = 2- gamma;
 } else if ( gamma <= -1) {
  gamma = -2 - gamma;
 }
 
 // shift values/motion based upon device orientation
 switch (window.orientation) {
  case 90:
   temp = gamma;
   gamma = beta;
   beta = temp;
   break;
  case -90:
   temp = -gamma;
   gamma = beta;
   beta = temp;
   break;

 }

 // update positions to be used for CSS
 var yPosition = -yMovement - (beta * yMovement);
 var xPosition = -xMovement - (gamma * xMovement);
 var contentX = (-xMovement - xPosition)/2;
 var contentY = (-yMovement - yPosition)/2;

 // generate css styles
 position = xPosition.toFixed(1) + "px " + yPosition.toFixed(1) + "px";
 contentCSS = "translate3d( " + (contentX.toFixed(1)) + "px, " + (contentY.toFixed(1)) + "px, " + " 0px)";
}


function updateBackground() {
  
 if (!window.suspendAnimation) {
  if ( position.valueOf() != lastPosition.valueOf() ) {
   
   body.css( "background-position", position);
   content.css( "-webkit-transform", contentCSS);
   lastPosition = position;
  }
 } else {
  lastPosition = "translate3d(0px, 0px, 0px)";;
 }
 
 window.requestAnimationFrame(updateBackground);
}

window.requestAnimationFrame(updateBackground);

The html where this would be used would be something like this:

<body>
  <div class="content">put your foreground stuff here.</div>
</body>

There are some subtle but important changes here:

  1. In the requestAnimationFrame loop, it only applies changes *if* there are changes to apply.  This prevents needless calls to apply CSS even if the CSS styles hadn’t changed.  In this, I also truncate the numeric CSS string so that it isn’t reapplying CSS if the position should shift by 0.01 pixels. Side note: If you aren’t using requestAnimationFrame for HTML animations, you should learn about it.
  2. If you used my old code and were holding the device upside down, it wouldn’t work.  Not even a little bit.  This has that fixed (see comments inline above).
  3. This moves the background in CSS, which doesn’t cause browser reflow operations, and moves the foreground content (inside of a div) using translate3d, which also doesn’t cause browser reflow operations.  This helps keep animations smooth and the UX performing optimally.
  4. I also added a global variable to turn parallax on and off very quickly, if you need it.

The result is a faster experience that is more efficient and less of a strain on CPU and battery.  Feel free to test this technique out on your own.

If you use the code above, you can modify the xMovement and yMovement variables to exaggerate the parallax effect.

MBaaS – IBM Mobile Cloud Services, Bluemix & MobileFirst

MBaaS, or Mobile Backend as a Service, seems to be a particularly hot topic these days. MBaaS generally refers to backend services for mobile applications that provides data storage, user management, push notifications, and other pertinent mobile APIs.  mbaas

This is more than just “Cloud Services” which more generally refer to a scalable virtual cluster of computing or storage resources.  Bluemix is IBM’s suite of cloud service offerings, and covers lots of use cases:

Bluemix is an open-standards, cloud-based platform for building, managing, and running apps of all types, such as web, mobile, big data, and smart devices. Capabilities include Java, mobile back-end development, and application monitoring, as well as features from ecosystem partners and open source—all provided as-a-service in the cloud.

You can view the full catalog of Bluemix service offerings here.

Rather, MBaaS back-ends include services for data management, user management, notifications, and possibly more depending on the provider – all geared towards powering applications on mobile devices.

Why is it a hot topic? MBaaS enables growth of mobile applications with seamless (and virtually endless) scalability, all without having to manage individual systems for the application server, database, identify management, push notifications, or platform-specific services.

I’ve been writing a lot about IBM MobileFirst lately for a seamless API to deliver mobile apps to multiple platforms; though it has been in the context of an on-premise installation.  However, did you know that many of the exact same MobileFirst features are available as MBaaS services on IBM Bluemix?

IBM’s Mobile Cloud Services includes device management, user authentication, offline and back-end data storage, push notifications, operational analytics, and provides APIs for native iOS, native Android, hybrid apps, web apps, and even node.js clients for custom backend services.

MobileCloudServices

Here’s a bit more detail on what is currently exposed in IBM’s Mobile Cloud Services:

  • Mobile Data – The mobile data service includes a NOSQL database (powered by IBM Cloudant), file storage capabilities, and appropriate management and analytics features to measure the number of calls, storage usage, time/activity, and OS distribution.
  • Push Notifications – The push notification service allows you to easily push data to the right people at the right time on either Apple APNS or Google GCM platforms – all with a single API. Notifications can be sent by either an app or backend system, and can be sent to a single device, or a group of devices based on their tags/subscriptions.  Of course, with appropriate analytics for monitoring activity, distribution, and engagement.
  • Mobile Application Security – The mobile application security service enables you to provision or block any devices and/or users using your application, provides user authentication, and provides analytics for app/device usage, OS distribution, and time/activity.

Before starting development with IB’s Mobile Cloud Services, be sure to check out the following resources:

… and don’t forget the platform-specific developer guides:

Ready to get started?

Many of these are the exact same features that you can host in your own on-premise IBM MobileFirst Platform Foundation server – the difference is that you don’t have to maintain the infrastructure.  You can scale as needed through the Bluemix cloud offering.

 

IBM MobileFirst & Remote Client Side Logging in Mobile Apps

One of the many popular feature of IBM MobileFirst SDK is the ability to capture client-side logs from mobile devices out in the wild in a central location (on the server).  That means you can capture information from devices *after* you have deployed your app into production.  If you are trying to track down or recreate bugs, this can be incredibly helpful. Let’s say that users on iOS 7.0, specifically on iPhone 4 models are having an issue.  You can capture device logs at this level of granularity (or at a much broader scope, if you choose).

The logging classes in the MobileFirst Platform Foundation are similar in concept to Log4J.  You have logging classes that you can use to write out trace, debug, info, log, warn, fatal, or error messages.  You can also optionally specify a package name, which is used to identify which code module the debug statements are coming from.  With the package name, you’ll be able to see if the log message is coming from a user authentication manager, a data receiver, a user interface view, or any other class based upon how you setup your loggers.  Once the log file reaches the specified buffer size, it will automatically be sent to the server.

On the server you can setup log profiles that determine the level of granularity of messages that are captured on the server.  Let’s say you have 100,000 devices consuming your app.  You can configure the profiles to collect error or fatal messages for every app instance.  However, you probably don’t want to capture complete device logs for every app instance; You can setup the log profiles to only capture complete logs for a specific set of devices.

As an example, take a look at the screenshot below to see how you can setup log collection profiles:

Configuring Log Profiles on the MobileFirst Server
Configuring Log Profiles on the MobileFirst Server

When writing your code, you just need to create a logger instance, then write to the log.

If you’re curious when you might want a trace statement, vs. a log statement, vs. a debug statement, etc… Here is the usage level guidance from the docs:

  • Use TRACE for method entry and exit points.
  • Use DEBUG for method result output.
  • Use LOG for class instantiation.
  • Use INFO for initialization reporting.
  • Use WARN to log deprecated usage warnings.
  • Use ERROR for unexpected exceptions or unexpected network protocol errors.
  • Use FATAL for unrecoverable crashes or hangs.

For hybrid apps, you use the WL.Logger class in JavaScript:

var logger = WL.Logger.create({pkg: 'mynamespace.mymodule'});

logger.trace('trace', 'another mesage');
logger.debug('debug', [1,2,3], {hello: 'world'});
logger.log('log', 'another message');
logger.info('info', 1, 2, 3);
logger.warn('warn', undefined);
logger.error('error', new Error('oh no'));
logger.fatal('fatal', 'another message');

For native iOS apps, you will use the OCLogger class:

OCLogger *logger = [OCLogger getInstanceWithPackage:@"UserManager"];

[logger trace:@"this is a trace message"];
[logger debug:@"this is a debug message"];
[logger log:@"this is a log message"];
[logger info:@"this is an info message"];
[logger warn:@"this is a warning message"];
[logger error:@"this is an error message"];
[logger fatal:@"this is a fatal message"];

For native Android apps, you will use the com.worklight.common.Logger class:

private final static Logger logger = Logger.getLogger(MyClass.class.getName());

logger.trace('trace mesage');
logger.debug('debug message');
logger.log('log message');
logger.info('info message');
logger.warn('warn message');
logger.error('error - OH NOES!');
logger.fatal('fatal - Oops, you broke it');

Then on the server, you can go into the analytics dashboard and access complete logs for a device, or search through all client-side logs with the ability to filter on application name, app versions, log levels, package name, environment, device models, and OS versions within an optional date range, and with the ability to search for keywords in the log message.

Log Search Results within the MobileFirst Analytics Dashboard
Log Search Results within the MobileFirst Analytics Dashboard

For a complete reference and additional detail, be sure to check out the latest docs on client side logging with the MobileFirst platform.

So, What is IBM MobileFirst?

I’m still “the new guy” on the MobileFirst team here at IBM, and right away I’ve been asked by peers outside of IBM: “So, what exactly is MobileFirst/Worklight?  Is it just for hybrid apps?”

In this post I’ll try to shed some light on IBM MobileFirst, and for starters, it is a lot more than just hybrid apps.

MobileFirst-Logo

IBM MobileFirst Platform is a suite of products that enable you to efficiently build and deliver mobile applications for your enterprise, and is composed of three parts:

IBM MobileFirst Platform Foundation

IBM MobileFirst Platform Foundation (formerly known as Worklight Foundation) is a platform for building mobile applications for the enterprise.  It is a suite of tools and services available either on-premise or in the cloud, which enable you to rapidly build, administer, and monitor secure applications.

The MobileFirst Platform Foundation consists of:

  1. MobileFirst Server – the middleware tier that provides a gateway between back-end systems and services and the mobile client applications.  The server enables application authentication, data endpoints/services, data optimization and transformation, push notification management (streamlined API for all platforms), consolidated logging, and app/services analytics. For development purposes, the MobileFirst server is available as either part of the MobileFirst Studio (discussed below), or as command line tools.

  2. MobileFirst API - both client and server-side APIs for developing and managing your enterprise mobile applications.
    • The server-side API enables you to expose data adapters to your mobile applications – these adapters could be consuming data from SQL databases, REST or SOAP Services, or JMS data sources. The Server side API also provides a built-in security framework, unified push notifications (across multiple platforms), and data translation/transformation services. You can leverage the server-side API in JavaScript, or dig deeper and use the Java implementation.
    • The client-side API is available for native iOS (Objective-C), native Android (Java), J2ME, C# native Windows Phone (C#), and JavaScript for cross-platform hybrid OR mobile-web applications. For the native implementations, this includes user authentication, encrypted storage, push notifications, logging, geo-notifications, data access, and more.  For hybrid applications, it includes everything from the native API, plus cross-platform native UI components and platform specific application skinning.  With the hybrid development approach, you can even push updates to your applications that are live, out on devices, without having to push an update through an app store.  Does the hybrid approach leverage Apache Cordova?  YES.

  3. MobileFirst Studio - an optional all-inclusive development environment for developing enterprise apps on the MobileFirst platform.  This is based on the Eclipse platform, and includes an integrated server, development environment, facilities to create and test all data adapters/services, a browser-based hybrid app simulator, and the ability to generate platform-specific applications for deployment.  However, using the studio is not required! Try to convince a native iOS (Xcode) developer that they have to use Eclipse, and tell me how that goes for you… :)  If you don’t want to use the all-inclusive studio, no problem.  You can use the command line tools (CLI).  The CLI provides a command line interface for managing the MobileFirst server, creating data adapters, creating the encrypted JSON store, and more.

  4. MobileFirst Console – the console provides a dashboard and management portal for everything happening within your MobileFirst applications.  You can view which APIs and adapters have been deployed, set app notifications, manage or disable your apps, report on connected devices and platforms, monitor push notifications, view analytics information for all services and adapters exposed through the MobileFirst server, and manage remote collection of client app logs.  All together, an extremely powerful set of features for monitoring and managing your applications.

  5. MobileFirst Application Center - a tool to make sharing mobile apps easier within an organization.  Basically, it’s an app store for your enterprise.

MobileFirst Platform Application Scanning

MobileFirst Platform Application Scanning is set of tools that can scan your JavaScript, HTML, Objective-C, or Java code for security vulnerabilities and coding best practices.  Think of it as a security layer in your software development lifecycle.


MobileFirst Quality Assurance

MobileFirst Quality Assurance is a set of tools and features to help provide quality assurance to your mobile applications.  It includes automated crash analytics, user feedback and sentiment analysis, in-app bug reporting, over-the-air build distribution to testers, test/bug prioritization, and more.


So, is MobileFirst/Worklight just for hybrid (HTML/JS) apps? You tell me… if you need clarification more information, please re-read this post and follow all the links.  ;)

 

DevNexus 2014 PhoneGap Presentations

I’ve just wrapped up my presentations for this year’s DevNexus event in Atlanta – it has been a great event, filled with tons of information on web, mobile, and back-end development. I had 3 sessions on PhoneGap – One intro, one advanced, and one a mobile frameworks panel.

Below are my presentations.  I didn’t record them this time, since they were being recorded by the conference organizers, so expect to see a video once they’re released.

Just press the space bar, or use the arrow keys to view the presentation in your browser.

Getting Started with PhoneGap and Cross Platform Mobile Development

View Presentation …

intro_2_pg

(Lesson learned, never make changes to you presentation/environment after midnight when you have the first session of the day – it will always bite you)

Designing & Architecting for PhoneGap & the Mobile Web

View presentation …

architecture_pg

Enjoy, and feel free to reach out with any questions!