Using Intel® XDK and cujoJS, a team of developers created an HTML5 app for a major website that offers a much more sophisticated user experience on each of the mobile platforms commonly in use today. The combination of XDK and cujoJS eliminated much of the custom coding that would normally be required to bring the desired features to each platform.
The end result is a more robust mobile app than those currently available. In addition to this app offering a much better user experience, added features include “up/down” voting and the easy sharing of videos compared to past video apps. This new app is the first official app for this company and will soon be published on app stores for Android and iOS mobile devices. In the future, the team plans to add more features as the user community provides feedback on the app.
From the outset, the effort, led by Intel’s HTML5 Hub Community leveraged the cross-platform capabilities of XDK and cujoJS to simplify the development of the app while bringing enhanced features to the different mobile platforms. The work was initiated by the Intel developer’s site HTML5 Hub, which partnered to create the app.
In the past, most undertakings of this type would require the development of a native application specifically for each target platform. While the visual and technical designs may apply across platforms, there would be a lot of duplicated engineering efforts since none of the code could be shared. Each platform would require that code be written in its own “native language” such as in Objective-C for iOS apps and in Java for Android apps. Using the XDK and cujoJS’s HTML/CSS/JavaScript allowed the team to have a single code base that could be built and deployed to every target device.
Working on the app, the team proceeded through the normal steps common to any development effort. A discovery phase laid out the goals of the project and specified what the team wanted to include in the app. Based on those goals the project was scoped out, determining what was feasible in the time that was available.
Early on, the team identified a few areas that it wanted to investigate including handling gesture interactions in the various devices’ web views and how to best leverage the site’s existing API. “We ended up building our own mini-framework for handling gestures to make sure we could provide a consistent user experience, and we prototyped several interactions with the site API to make sure we understood how to use it correctly, and how to get the data we needed for the application,” said the developers.
The use of XDK and cujoJS allowed the app to have very tailored views for each platform. In particular, cujoJS allowed the team to build each screen as a self-contained component, with its own HTML view, CSS styling, and JavaScript behavior pieces. These components could be pulled together using wire.js (cujoJS’s IOC container), allowing the team to define how the user moved from screen to screen.
“We used cola.js, cujoJS’s data management toolkit, to manage all the user data,” the team said. This included settings, user-added content, and all the data that had to be fetched from the site API. “We were able to define data adapters for all the bits of data we needed and even cache parts of it in local storage for efficiency,” the developers said. Underlying all of this work were several of the foundational features of cujoJS that were used extensively including CommonJS modules via curl.js, promises via when.js for managing asynchronous code, and rest.js for interacting with the site API.
“We’re big on OOCSS (object-oriented CSS) techniques in cujoJS, and we used them extensively to handle all of the UI transitions, like sliding and fading,” the developers said. “We didn’t use any JS effects libraries. We used media queries and CSS to handle the portrait/landscape layout differences.”
In terms of process, the team built a number of the screens quickly, using fake data. This ensured the app got the user interactions right. Next, the developers back-filled the screens with real data from the site API and then used the real content including videos. “We used the [Intel] XDK’s emulators for quick debugging cycles as we created most of the app,” said the developers. “Then, we switched to using the on-device debugging features to fix device specific quirks we found.”
To that last point, it was impossible to debug some of the app using just the Intel tools. Luckily, during the project, the remote debugging features of Safari/iOS and Android/Chrome became available. This helped a great deal.
Lessons learned
There were several additional advantages to using the XDK.
The device abstractions, such as XHR, that “just worked” enabled the team to write generic code that worked on every platform. The built-in device emulators, with integrated WebKit-based debugging tools, made for a very familiar development experience. This gave the team the quick “change code, then reload the browser” cycles they were accustomed to when developing desktop web apps.
Even though the team was using web techniques to build the app, there are still quite a few differences in how the devices’ web view components behave. Each has its own quirks and each has different performance characteristics. There are even differences from one version of a mobile operating system to another. So, while using HTML/CSS/JS and the XDK let the team use a single codebase for all platforms, which was a huge win, the developers were still a bit surprised by the device differences. “You still have to allow time for device testing and tweaking,” the developers said.
Specifically, even though they were using HTML/CSS/JS, it was still critical to test on real devices to make sure the user experience was consistent. The Intel XDK allowed the group to easily distribute builds periodically to the rest of the team, so they could see the progress, and test it on real devices. You can download the Intel XDK from http://xdk-software.intel.com.
Editor’s Note: The lessons learned from this project could easily be applied to other projects including yours. While we left the large-scale project unnamed, the project is real. At the time this article published, the project has not yet been fully unveiled!