Click here to close now.

Welcome!

Java Authors: Yakov Fain, Pat Romanski, Liz McMillan, Elizabeth White, Carmen Gonzalez

Related Topics: Java, Wireless, iPhone

Java: Article

Living on the Edge of Mobile Development

Overview and experience with Sencha Touch, YUI Test and PhoneGap

Which mobile device should I target for my application? That's one of the first questions you need to answer as a mobile developer. You might select the device based on personal preference or what looks cool today. The problem is that mobile technology choices are diverse and evolving quickly. The tools and languages used to develop native applications vary wildly and you probably cannot afford to learn them all. Chances are you want to find a way to replicate your application across multiple devices while minimizing your investment.  How can that be done?

Hybrid Is More than a Green Decision
We are all familiar with the idea of hybrid cars and trucks. These vehicles typically combine petroleum and electric technologies to improve efficiency, reducing your carbon footprint.  You can take a hybrid approach for your mobile application by combining multiple technologies to improve your development efficiency, reducing your expenses.  The hybrid approach combines minimal device-specific native code with your application developed with HTML5, CSS3 and JavaScript.  Development of native code is painless through the use of several libraries and tools.  HTML5 provides the underlying capability for storage, drag and drop, timed media playback, and others.  CSS3 dramatically improves the presentation of web technologies enabling a native look-and-feel for mobile applications. JavaScript allows you to use your existing web skills to implement the application.  All of these technologies run within a compatible desktop browser allowing you to develop and test your application without deploying to a device.

The combination of familiar web technologies with minimal native code enables you to develop your application once and deploy to a variety of mobile devices.  Now you might be thinking 'Are these web standards finalized?' and the answer would be no.  However, the HTML rendering engines used in most mobile devices have been implementing the features as the standards are published.  Javascript libraries are wrapping these features and compensating for device differences and standards evolution so your application does not need to.  There are several libraries under development but I elected to use Sencha Touch.

Figure 1 - This diagram depicts the major differences between mulitple native and hybrid application development

Sencha Touch Is My Cup of Tea
The Sencha company logo is a green leaf, presumably because sencha is a Japanese whole leaf green tea.  I am an ardent coffee drinker but I really like this tea.  Sencha is perhaps best known for their Ext JS and Ext GWT libraries.  Sencha Touch is their latest library released late in 2010.  There are several similar libraries in various stages of development, but Sencha was one of the first to market and I am working on commercial products that depend on released libraries.  The first release includes support for Android and Apple iOS devices.  Reading the tea leaves promises future support for Blackberry 6 and Blackberry Torch.  The library is open source and supports a dual license approach making it appropriate for commercial use.  The library includes:

  • Robust data integration including access to AJAX, JSONP, or YQL and local storage
  • Large library of user interface elements many of which automatically bind to the data objects
  • Advanced native look-and-feel styling, animation and branding capabilities
  • Model, View, Controller (MVC) support to put it all together

Figure 2 - Example Sencha Touch application running on Apple iPhones

My First Sips of Sencha
I started using Sench Touch in the Summer of 2010 while it was in beta.  I had the typical beta experience of incomplete documentation, a few bugs and changing API.  Over the frequent updates, the documentation improved and examples were updated to align with the latest API.  Throughout the beta and after the production release, I worked on my application.  My application successfully used local storage, tree and carousal navigation, animated transitions, custom search features and selective user updates to content.  The plan is to deploy on Apple iOS devices first with the need for possibly many different branding themes.

I found it quite easy to define enities and storage objects with the data integration features.  The storage objects were extensible enough to add custom search features.  The user interface elements often took some experimentation and reverse engineering to fill in the gaps of light documentation.  I had to become familiar with the inspection and debugging features of Chrome and Safari to ultimately answer many questions.  There are still a few inconsistencies in how user interface element templates are used but overall, the library is quite complete.  One of the most powerful user interface features is the branding support.

The branding support in Sencha uses Syntactically Awesome Stylesheets (SASS). SASS is a scripting language that describes how to generate cascading stylesheets.  Need to change your corporate color across all user interface elements?  Change it in one place and regenerate your native look-and-feel stylesheet.  Sencha Touch ships with a full library of SASS scripts that you can easily extend to meet your branding needs.  This approach also encodes images into the stylesheet to reduce the number of files to deploy.  I was able to extend the SASS to specify branding color selections, omit unused user interface elements and specify the needed icons.

Sencha provides best practice advice for project organization and the use of the MVC support.  Part of the project organization is for unit testing. It is your choice how to test your JavaScript, but the best practice within our organization for other technologies is to use one of the xUnit libraries and include regression testing as part of continuous integration.  I did an informal survey within our development group and found that Javascript is an exception.  Since the bulk of a hybrid application is JavaScript, I found it necessary to evaluate and select a suitable unit testing approach.

Figure 3 - You can also write applications for the Apple iPad

This is Only a Test
A robust JavaScript unit testing library should include support for:

  • Continuous integration
  • Multiple browser testing
  • Event testing
  • Mock objects
  • Organization of tests (e.g. suites)
  • Code coverage reports

I looked at two dozen different options and selected the YUI Test Standalone Library.  This is a project to separate the Test module from the popular Yahoo! UI framework.  It is currently released as a beta and appears to be slated for a first quarter 2011 release.  Running unit tests requires the use of a desktop browser.  Javascript is used to set up the test environment including the suites and tests.  I found the suites and tests to be very similar to JUnit tests.  Several examples are included and enabled me to create a regression suite with a nice summary report like this:

Figure 4 - A unit testing console for displaying progress and results

Manually reviewing unit test results should not be included in a continuous integration development environment. The YUI Test Standalone library includes integration with Selenium Remote Control (RC) to automate the regression test.  Selenium RC is a test server that controls browser sessions for testing your JavaScript. The YUI Test Selenium driver enables a build script to:

  1. Start the Selenium RC server
  2. Specify the regression test HTML files
  3. Specify the browsers to run the regression
  4. Run the tests
  5. Collect and report the success or failure of the tests
  6. Optionally create coverage reports
  7. Shutdown the Selenium RC server

All of these tasks are done via the Java-based driver included in YUI Test Standalone and can be included as part of a build such as Ant. The coverage report is conditional on a earlier instrumentation step (not shown).  The YUI Test Standalone library includes a Java-based instrumentation utility that creates instrumented Javascript proxies of the files targeted for coverage measurement.  The coverage report step above depends on the instrumented proxies to creat LCOV-based coverage reports. These coverage reports include a very nice report of line and function coverage including a line by line color coding of the coverage of the source.

Going Native
Up to this point, all development and testing has been done on a desktop running Chrome or Safari.  This has enabled a fast turn around in development and the possible use of browser-based web interface testing automation by a quality assurance group.  This is not to say that all testing can be done on the desktop.  Ultimately, device testing is needed and should be done early and often.  How can we get our HTML, CSS and Javascript to run natively on a mobile device?  The hybrid approach we introduced above would have us write a small program in the target technology that wraps and invokes the application.  Luckily, there are libraries and tools that make this painless.  PhoneGap is the option selected for this project.

PhoneGap fills the technology gap between JavaScript and the native mobile device. It provides JavaScript APIs to underlying native function such as:

  • Accelerometer
  • Camera
  • Compass
  • Contacts
  • Geolocation
  • Media
  • Storage
  • Others

PhoneGap also provides console integration with desktop debuggers, support for six platforms and integrated development environment (IDE) project templates. You must have your target platform SDK installed to use PhoneGap. Since my project is targeting Apple iOS, that means a Mac running the Xcode IDE and the iOS SDK. After downloading and installing the IDE, SDK and PhoneGap, a new project template was available. I created a new PhoneGap project and the template created all the native programs, build targets and default properties and images for me. I copied the application build results into the Xcode project, pressed Build and Run and the application was running in the phone simulator.  It was that simple. No Objective-C to learn or write with less than a day from install to running.

Gaps with PhoneGap
Despite the trivial effort to get the application running on the simulator, there were three minor gaps to address:

  • The default target is iPhones.  This means the application would start up and run on an iPad with the dimensions of a phone (with the 2x option).  Sencha Touch reported the platform as a phone even when running on the actual iPad device.  Ideally, the default would be what Apple calls a Universal App that runs on all devices and adjusts itself when running.  After some research, I found that the solution was few mouse clicks away within Xcode.
  • Orientation changes did not work.  A Sencha Touch application can change the way it looks based on the orientation of the device.  PhoneGap always reported the device orientation as portrait (0 degrees) even though Sencha Touch correctly reported the current orientation.  The solution was a minor hack to monitor for the window resize event and inform Sencha Touch to do the right thing.
  • Certain text was rendered as a link.  Clicking on the link offered to add or update a contact.  What was that all about?  It turns out the default web view component in the iOS SDK attempts to find phone number and e-mail addresses and automatically makes them links to the appropriate app like contacts.  Pretty cool if you want that behavior but does 001-999.9 look like a phone number?  The solution was to add one line of Objective-C code in the PhoneGap generated code to turn this behavior off.

Live Long and Provision
In order to get your application running on an actual device you must go through a complex process Apple calls provisioning.  There is a nice step by step procedure to get you through it all available on the Apple developer site.  Now that I have my Sencha Touch application running on an iPad I see that performance work is needed.  Now that automated build and test process is going to pay off.  It is clear to me that a robust development cycle with this technology is possible and practical.

There are bound to be changes in the available libraries and supported devices in the coming months.  Sencha Touch and PhoneGap is a powerful and easy to use combination that is ready now.

Disclaimers

  • Opinions expressed in this article are those solely of the author and do not reflect those of my employer.
  • iPhone image Courtesy of Apple
  • Sencha Touch application images used with permission
  • The Android logo is reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

References

More Stories By Mike Jacobs

Mike Jacobs is technology architect and Technology Fellow focused on using technology to improve health care.

@ThingsExpo Stories
One of the biggest impacts of the Internet of Things is and will continue to be on data; specifically data volume, management and usage. Companies are scrambling to adapt to this new and unpredictable data reality with legacy infrastructure that cannot handle the speed and volume of data. In his session at @ThingsExpo, Don DeLoach, CEO and president of Infobright, will discuss how companies need to rethink their data infrastructure to participate in the IoT, including: Data storage: Understanding the kinds of data: structured, unstructured, big/small? Analytics: What kinds and how responsiv...
Cloudian, Inc., the leading provider of hybrid cloud storage solutions, today announced availability of Cloudian HyperStore 5.1 software. HyperStore 5.1 is an enhanced Amazon S3-compliant, plug-and-play hybrid cloud software solution that now features full Apache Hadoop integration. Enterprises can now transform big data into smart data by running Hadoop analytics on HyperStore software and appliances. This in-place analytics, with no need to offload data to other systems for Hadoop analyses, enables customers to derive meaningful business intelligence from their data quickly, efficiently and ...
Since 2008 and for the first time in history, more than half of humans live in urban areas, urging cities to become “smart.” Today, cities can leverage the wide availability of smartphones combined with new technologies such as Beacons or NFC to connect their urban furniture and environment to create citizen-first services that improve transportation, way-finding and information delivery. In her session at @ThingsExpo, Laetitia Gazel-Anthoine, CEO of Connecthings, will focus on successful use cases.
Sensor-enabled things are becoming more commonplace, precursors to a larger and more complex framework that most consider the ultimate promise of the IoT: things connecting, interacting, sharing, storing, and over time perhaps learning and predicting based on habits, behaviors, location, preferences, purchases and more. In his session at @ThingsExpo, Tom Wesselman, Director of Communications Ecosystem Architecture at Plantronics, will examine the still nascent IoT as it is coalescing, including what it is today, what it might ultimately be, the role of wearable tech, and technology gaps stil...
The true value of the Internet of Things (IoT) lies not just in the data, but through the services that protect the data, perform the analysis and present findings in a usable way. With many IoT elements rooted in traditional IT components, Big Data and IoT isn’t just a play for enterprise. In fact, the IoT presents SMBs with the prospect of launching entirely new activities and exploring innovative areas. CompTIA research identifies several areas where IoT is expected to have the greatest impact.
Wearable devices have come of age. The primary applications of wearables so far have been "the Quantified Self" or the tracking of one's fitness and health status. We propose the evolution of wearables into social and emotional communication devices. Our BE(tm) sensor uses light to visualize the skin conductance response. Our sensors are very inexpensive and can be massively distributed to audiences or groups of any size, in order to gauge reactions to performances, video, or any kind of presentation. In her session at @ThingsExpo, Jocelyn Scheirer, CEO & Founder of Bionolux, will discuss ho...
Roberto Medrano, Executive Vice President at SOA Software, had reached 30,000 page views on his home page - http://RobertoMedrano.SYS-CON.com/ - on the SYS-CON family of online magazines, which includes Cloud Computing Journal, Internet of Things Journal, Big Data Journal, and SOA World Magazine. He is a recognized executive in the information technology fields of SOA, internet security, governance, and compliance. He has extensive experience with both start-ups and large companies, having been involved at the beginning of four IT industries: EDA, Open Systems, Computer Security and now SOA.
When it comes to the Internet of Things, hooking up will get you only so far. If you want customers to commit, you need to go beyond simply connecting products. You need to use the devices themselves to transform how you engage with every customer and how you manage the entire product lifecycle. In his session at @ThingsExpo, Sean Lorenz, Technical Product Manager for Xively at LogMeIn, will show how “product relationship management” can help you leverage your connected devices and the data they generate about customer usage and product performance to deliver extremely compelling and reliabl...
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...
From telemedicine to smart cars, digital homes and industrial monitoring, the explosive growth of IoT has created exciting new business opportunities for real time calls and messaging. In his session at @ThingsExpo, Ivelin Ivanov, CEO and Co-Founder of Telestax, shared some of the new revenue sources that IoT created for Restcomm – the open source telephony platform from Telestax. Ivelin Ivanov is a technology entrepreneur who founded Mobicents, an Open Source VoIP Platform, to help create, deploy, and manage applications integrating voice, video and data. He is the co-founder of TeleStax, a...
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focused on understanding how industrial data can create intelligence for industrial operations. Imagine ...
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - is now accepting submissions to demo smart cars on the Expo Floor. Smart car sponsorship benefits include general brand exposure and increasing engagement with the developer ecosystem.
Operational Hadoop and the Lambda Architecture for Streaming Data Apache Hadoop is emerging as a distributed platform for handling large and fast incoming streams of data. Predictive maintenance, supply chain optimization, and Internet-of-Things analysis are examples where Hadoop provides the scalable storage, processing, and analytics platform to gain meaningful insights from granular data that is typically only valuable from a large-scale, aggregate view. One architecture useful for capturing and analyzing streaming data is the Lambda Architecture, representing a model of how to analyze rea...
SYS-CON Events announced today that Vitria Technology, Inc. will exhibit at SYS-CON’s @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Vitria will showcase the company’s new IoT Analytics Platform through live demonstrations at booth #330. Vitria’s IoT Analytics Platform, fully integrated and powered by an operational intelligence engine, enables customers to rapidly build and operationalize advanced analytics to deliver timely business outcomes for use cases across the industrial, enterprise, and consumer segments.
When it comes to the Internet of Things, hooking up will get you only so far. If you want customers to commit, you need to go beyond simply connecting products. You need to use the devices themselves to transform how you engage with every customer and how you manage the entire product lifecycle. In his session at @ThingsExpo, Sean Lorenz, Technical Product Manager for Xively at LogMeIn, will show how “product relationship management” can help you leverage your connected devices and the data they generate about customer usage and product performance to deliver extremely compelling and reliabl...
SYS-CON Events announced today that SoftLayer, an IBM company, has been named “Gold Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place June 9-11, 2015 at the Javits Center in New York City, NY, and the 17th International Cloud Expo®, which will take place November 3–5, 2015 at the Santa Clara Convention Center in Santa Clara, CA. SoftLayer operates a global cloud infrastructure platform built for Internet scale. With a global footprint of data centers and network points of presence, SoftLayer provides infrastructure as a service to leading-edge customers ranging from ...
The explosion of connected devices / sensors is creating an ever-expanding set of new and valuable data. In parallel the emerging capability of Big Data technologies to store, access, analyze, and react to this data is producing changes in business models under the umbrella of the Internet of Things (IoT). In particular within the Insurance industry, IoT appears positioned to enable deep changes by altering relationships between insurers, distributors, and the insured. In his session at @ThingsExpo, Michael Sick, a Senior Manager and Big Data Architect within Ernst and Young's Financial Servi...
SYS-CON Events announced today that Open Data Centers (ODC), a carrier-neutral colocation provider, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Open Data Centers is a carrier-neutral data center operator in New Jersey and New York City offering alternative connectivity options for carriers, service providers and enterprise customers.
The IoT market is projected to be $1.9 trillion tidal wave that’s bigger than the combined market for smartphones, tablets and PCs. While IoT is widely discussed, what not being talked about are the monetization opportunities that are created from ubiquitous connectivity and the ensuing avalanche of data. While we cannot foresee every service that the IoT will enable, we should future-proof operations by preparing to monetize them with extremely agile systems.
There’s Big Data, then there’s really Big Data from the Internet of Things. IoT is evolving to include many data possibilities like new types of event, log and network data. The volumes are enormous, generating tens of billions of logs per day, which raise data challenges. Early IoT deployments are relying heavily on both the cloud and managed service providers to navigate these challenges. Learn about IoT, Big Data and deployments processing massive data volumes from wearables, utilities and other machines.