Web-oriented Hybrid Frameworks
There are several kinds of hybrid frameworks for mobile development, with some pretty stark differences.
- Language-oriented hybrid platforms like Xamarin and Titanium focus on letting developers work in a familiar language (such as C# or JavaScript). They otherwise strive to wrap and expose native APIs as faithfully as they are able to and produce a native result, or close to it. At runtime, the native apps may host an execution layer (such as Mono for .NET or V8 for JavaScript) or not, depending on the product and target platform. This category of hybrid is generally considered closer to true native.
- In contrast, web-based hybrid frameworks allow web developers to work in familiar HTML5, CSS, and JavaScript. PhoneGap is the first and most famous of these, but there are modern contenders--such as Icenium. Your application's web code runs in a hosted browser at runtime--which raises some trade-offs between easy development, a faithful user experience for your target platforms, and performance. Before using a web-oriented hybrid approach, you should consider whether that approach is suitable for your application objectives; some prototyping and evaluation is recommended.
Icenium from Telerik: Cross-platform mobile development. Simplified.
Icenium's tag line is, "Cross-platform mobile development. Simplified." Developers in the Microsoft space are likely familiar with the parent company, Telerik, longtime makers of popular web and desktop controls (such as Kendo UI), developer frameworks (such as Sitefinity CMS), and testing tools.
Icenium shares the same open source Apache Cordova heritage as PhoneGap, but tackles one of the key deficiencies of PhoneGap: tooling. It adds a sophisticated IDE and cloud-based services. With it, you can repurpose your web skills to build iOS, Android, and Windows Phone applications that run in native containers.
Unlike the other approaches we've considered in this series, you don't need a Mac for your iOS development with Icenium--a very notable distinction. That's because the compilation happens in Icenium's cloud. That's the ICE in Icenium: "Integrated Cloud Development". As a result of this we-compile-it-for-you approach, you do not have to download and install multiple SDKs for your target platforms.
Of course, a web-based approach alone will not let you get at all of a mobile device's capabilities. With Icenium you can use the JavaScript libraries exposed by Cordova to get at the Accelerometer, Camera, Compass, Contacts, File system, Geolocation, Media, Networking, Notifications, and Storage.
The Computer You'll Develop On: A PC, or use a Browser-based IDE
Icenium provides a full IDE for Windows PCs named Graphite. Notably, there is also a browser-based IDE also available, named Mist. Using Mist you can use a Mac or pretty much any kind of modern desktop computer. However, if you're a serious Icenium developer, I suggest planning to do your development on a PC where you can use the more robust Graphite IDE.
Developer Tools: Graphite, Mist, and Ion
As we already mentioned, you have a choice of IDEs.
The Icenium Graphite IDE for Windows PCs is a rich desktop application that includes code navigation, refactoring, and ability to update devices with application updates in real-time.
Icenium Graphite IDE for Windows
The Icenium Mist IDE, in contrast, can be used anywhere where you have access to a browser--certainly a handy option to have available. Thought not as full-featured as Graphite, Mist does provide quite a bit of functionality, including code completion, auto-indentation, and syntax highlighting.
Icenium Mist IDE, shown running on a Mac
Debugging Experience
Your Icenium apps can launch in a simulator, or on actual devices connected to your computer.
The simulator is Icenium's own simulator, not to be confused with the official emulators found in the mobile SDKs from Apple, Google, and Microsoft.
Icenium Simulator
To run on an actual device, in the case of iPhone or iPad, you'll need to export your Apple developer certificate into Icenium. It took me some time to figure out how to do this correctly--but you only have to do it once, and then you're set. Alternatively, if you'd like to avoid the hassle of provisioning your mobile apps in the developer centers before you test them on real devices, you can take advantage of Icenium Ion. Ion gives you a pre-installed test client on your mobile devices that all of your Icenium apps can run through.
In Icenium you're doing web development, so that means working in the famous trio of HTML, CSS, and JavaScript. You'll typically want to leverage a mobile UI framework such as Kendo Mobile UI (a license for this is included with your Icenium license), or jQuery Mobile.
To illustrate what Icenium programming is like, let's consider the HTML, CSS, and JavaScript from one of the Icenium samples, the Compass application. The appearance of the app is shown below.
Compass Sample
Let's begin with the project structure, shown below. It should look much like most web applications, with areas for HTML markup, CSS styles, media, and JavaScript.
Compass sample in Graphite Project Navigator
You'll often use a Single Page Application (SPA) model in your Icenium apps. Below is the HTML page from the Compass sample application. As in a web application, its purpose is to define the layout and structure of page view(s).
<!DOCTYPE html>
<html>
<head>
<title>Compass Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/main.js"></script>
</head>
<body>
<header class="header">
<h1>Compass</h1>
</header>
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Compass</button>
<button class="button dh" id="refreshButton">Current Orientation</button>
</div>
<div class="result-area ch70">
<div class="results">
<div class="mapCompassFrame">
<div id="compass" class="mapCompass"></div>
</div>
<div id="result" class="desc"></div>
</div>
<div class="separator"></div>
</div>
</div>
<footer class="footer">
<div>Cordova API Samples</div>
</footer>
</body>
</html>
Here's a portion of the CSS for the same app. As with any mobile development, you need to consider the variety of device sizes and orientations. Your CSS should support a responsive/adaptive approach to layout.
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
height:100%;
}
body
{
font-family: sans-serif, Arial, Segoe UI;
font-size: 16px;
margin: 0;
padding: 0;
height:100%;
padding: 60px 0px 24px 0px;
overflow:hidden;
}
/*width, height*/
.clear {clear:both;}
.ch10 {height:10%;}
.ch20 {height:20%;}...
.cw80 {width:80%;}
.cw90 {width:90%;}
.cw100 {width:100%;}
/*header*/
.header
{
position:absolute;
top: 0px;
left:0px;
width:100%;
height: 60px;
border:none;
background: #dedfe1;
background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
box-shadow: 0px 1px 0px 0px #fff;
-webkit-box-shadow: 0px 1px 0px 0px #fff;
-moz-box-shadow: 0px 1px 0px 0px #fff;
border-bottom: 1px solid #9ca1a5;
color: #639ecd;
}
...
#compass
{
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.mapCompassFrame
{
width: 154px;
height: 154px;
background-image: url("img/compassFrame.png");
margin: 0 auto;
}
.mapCompass
{
width: 154px;
height: 154px;
background-image: url("img/compass.png");
}
/*specific*/
.content > .result-area > .results > .desc {
font-size:16px;
color:#639ecd;
word-wrap:break-word;
}
Lastly, here's a bit of the JavaScript for the same app, where the compass is interacted with (Android). You may find yourself developing some individual JavaScript modules for each target platform, since their APIs vary.
// file: lib/common/plugin/CompassHeading.js
define("cordova/plugin/CompassHeading", function(require, exports, module) {
var CompassHeading = function(magneticHeading, trueHeading, headingAccuracy, timestamp) {
this.magneticHeading = magneticHeading;
this.trueHeading = trueHeading;
this.headingAccuracy = headingAccuracy;
this.timestamp = timestamp || new Date().getTime();
};
module.exports = CompassHeading;
});
Base Pricing and Icenium Everlive: Back-end Services
Icenium is rather affordably priced, at $19/month for a developer edition license. There are also professional ($59/mo) and ultimate ($119/mo) licenses, and a free trial is available. You can lower those monthly costs if you pay annually ($16/$39/$79).
Telerik also offers, at additional cost, Icenium Everlive services which are currently in preview. You can use Everlive for cloud-based data storage, hosting of server-side code, and user management. These capabilities are exposed as RESTful services.
Everlive services are managed through a web-based management portal. Plans for Everlive plans can run from free to $299/month depending on the level of services you consume. See plans.
Online Resources
The Icenium web site has a decent developer center--the information is good and attractively laid out, but you may wish there was more of it in some areas. There is a good collection of sample projects you can download. Begin with Getting Started with Icenium.
Here are some key online resources to check out:
Blog
Documentation
FAQ
Whitepapers
Forums
Videos and Demos
Sample Apps
Showcase
Tutorials
Unfortunately, there are not many tutorials available for Icenium--however, you can get started with it easily, and much of your experience as a web developer will guide you. After going through the starter tutorial cited below, you'll largely be dependent on some online videos, studying sample apps, reviewing the documentation, reading the blog, and interacting on the forums. If you happen to be using the Kendo Mobile UI framework, be sure to also visit its developer center for documentation, tutorials, and demos. Similarly, if you're using jQuery Mobile, visit its developer center for learning resources.
1a. Create and Run an App in Minutes with Icenium Graphite
1b. Create and Run an App in Minutes with Icenium Mist
This tutorial walks you though creating, building, and deploying a basic app--there are editions for using Graphite IDE or the browser-based Mist IDE. You use the Kendo UI Mobile template, and end up with a simple that has four views: home, login, location, and weather.
Your First App, running on iPad Simulator
Summary: Icenium Hybrid Mobile Development in HTML
Icenium has a lot going for it: you can use familiar web technologies, it has decent tooling, and compilation is done on your behalf in the cloud. A Mac is not required, even for iOS development. While it isn't free, it is very affordable--especially compared to some of the other commercial hybrid offerings. If a web-oriented hybrid approach makes sense for your mobile apps, Icenium is worthy of consideration.
Next: Getting Started with Mobility, Part 9: Mobile Web with Responsive Web Design
No comments:
Post a Comment