Building Cross-Platform Apps with HTML5 and DXTREME

What is the best way to develop an application to support multiple platforms (Apple, Android, Microsoft)?

Like so many devs out there, I was recently faced with that exact question. It turns out that there are two options for doing so 1) Build HTML5 web apps and a bunch of shell apps, one for each of the platform or 2) build native apps for each of the platforms. Since I don’t have expertise in all of the platforms or the time and money to get ramped up on all of them, I decided to look into the first option. I was also fortunate enough to hear about a new cross-platform development framework that DevExpress was working on called DXTREME. DXTREME is designed to help you build apps for Android, Apple, and Windows 8 using technologies that web devs know inside and out like HTML, JavaScript, CSS and a XAML (for Win8 only). It includes a set of libraries, controls and other assets that abstract away the complexities of building applications for all of these different platforms. It integrates directly with Visual Studio and comes with a project template that you can use to build apps.

It is built on two different stacks: HTML5 and XAML.

The HTML5 stack is for building Android, Apple, and Windows 8 applications using HTML, JavaScript and CSS. It allows you to create apps that share appearance and multi-touch functionality across platforms, but are also compatible with the Apple App Store, the Google Play Store and the Windows Store.

The XAML stack is for building native Windows 8 applications for developers who are already familiar with WPF or Silverlight.

I’m going to bring you through my experience of running through DXTREME to create a basic application. Hopefully it will give you an idea of what ramp up time would look like for someone who is using DXTREME for the first time.

Starting a Multi-Channel Application Project

For this first exercise I selected the Multi-channel Application template, which is what you'll want to use to create cross-platform mobile apps using HTML, JavaScript and CSS.

It turns out that you're basically building a single-page web application (SPA) using the Model View ViewModel (MVVM) pattern. The ViewModel uses Knockout, and the whole thing is tied together with Apache Cordova, which allows you to publish to the Apple App Store or Google Play.

After selecting the Multi-channel application template, a solution is generated with 4 projects, one for Desktop, one for Mobile, one for Win8 and one Shared:

It compiles out of the box.

========== Build: 4 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

With the Desktop app selected I hit F5 to see what happens. It opened this sample app.

 

Back in Visual Studio, I select the Mobile project and hit F5 to open it in the simulator.

It loads the iPhone app simulator that is part of DXTREME. It looks like a decent way to test out the app screen size, but it is just an HTML simulator and shouldn’t be used as the final test experience – you’ll need actual simulators or devices for that.

DevExpress takes care of that as well with their Courier mobile app which is available for iOS in the Apple App Store and for Android in the Google Play Store. Courier allows you to test your mobile web app by scanning a QR Code (which they provide). It will load the web app that is running on your local machine on your iPhone or Android device.

Back in Visual Studio I select the Win8 app and as expected it opens the Windows 8 application

What's in the Project?

Let’s get back into Visual Studio and dig around the projects a bit. In the Desktop project you see a project reference to the Shared project. No other DLLs are required. That is good.

There’s also some device-specific CSS

And some JavaScript.

I poke around and find a file called app.js in the root of the project. Cracking that open I find this code snippet, which uses the DXTREME framework to new up an HtmlApplication object.

$(function() {
     Application2.app = new DevExpress.framework.html.HtmlApplication({
       ns: Application2,
       viewPortNode: document.getElementById("viewPort"),
       defaultLayout: Application2.config.defaultLayout,
       navigation: Application2.config.navigation
     });
     Application2.app.router.register(":view/:id", { view: "About", id: undefined });
});

The other projects are more of the same. Common logic is shared between applications, but you can dig into the individual files to tweak or enhance platform or device-specific features.

One cool thing I notice is that they implemented a custom editor for their views. It allows you to preview the views from within Visual Studio. That is nice.

Learning DXTREME from the Docs

You can find the HTML docs here: http://help.devexpress.com/HTML/#!Overview and the Windows 8 docs here: http://help.devexpress.com/#XAML/CustomDocument12019

The HTML5 docs look good. There is a simple walk-through that looks a lot like the knockout one and it does a decent job of explaining what goes into building a DXTREME app.

DXTREME also includes several sample apps to get you started and provide examples of how the templates and DevExpress controls work together. Here’s the app that launches when you launch DXTREME. It has pointers to demos and sample apps.

Let’s take a look at the CRM HTML JS app and see what it tells us about building a DXTREME app. The CRM app includes 5 projects

Everything looks self-explanatory. Most of this looks like the Multi-Channel project template, except this one doesn’t have a Win8 project (there is a separate demo for that) and it includes a Service project.

Let’s dig into the solution. The ViewModels are in the Shared project.

And look like this...a basic Knockout ViewModel.

[ShipperViewModel.js]

(function() {
     DXCRM.ShipperViewModel = function(data) {
       this.ShipperID = ko.observable();
       this.CompanyName = ko.observable();
       this.Phone = ko.observable();
       if(data)
       this.fromJS(data);
     };
})();

And they are used in the application views:

Here's Shippers.js as an example.

[Shippers.js]

DXCRM.Shippers = function(params) {
     return {
       dataSource: new DevExpress.data.SimpleDataSource({
       store: DXCRM.db.Shippers,
       map: function(item) {
         return new DXCRM.ShipperViewModel(item);
       }
     })};
};

Those same ViewModels are being used in the WinJS project. That is great. I can see that there is code reuse going on between the HTML based projects.  

The demo applications are generated automatically via the DXTREME Project Wizard using the Microsoft NorthWind sample database. Obviously you can use your own data, but this is a nice way to get data into the application as you experiment.

I then focused on the separate XAML solution for the Win8 app. It looks like a standard Win8 app that uses DXTREME controls.

Deployment

So now that you have the app developed you need to package it up and get it ready to ship to Microsoft, Apple and Google.

So, let’s say I built the CRM app and I want to deploy it. There are two solutions, one for Win8 and one for everything else. Let’s try the deploying the latter.

I go to the first project in the solution, the “Desktop” project. Right clicking on that gives me a “Build Native Package” option:

Which launches this dialog:

Like most .NET devs, let’s say I’ve never shipped an Android or iOS application. I would have no idea what to do with this screen. I then wander over to the DXTREME help docs because I remember seeing something about deployment in that earlier. I find the “Native Packages” section here: http://help.devexpress.com/HTML/#!Overview/Application/Native%20Packages

It turns out that I need to register for the Apple and Google developer programs and I can get my certificate files from them. DXTREME provides a link to the Apple and Google program and a link to XCA to generate the certificate.

There's some platform-specific knowledge you're going to need before deploying on multiple platforms. Because Apple, Google and Microsoft have their own stores, registration requirements, certificates and so on, you'll have to spend some time learning about that. DXTREME simplifies much of the cross-platform coding experience, but there's not a one-click solution for deployment.

Final Thoughts

After spending a couple of hours with DXTREME it looks like a good step in the right direction towards cross-platform application development. It’s great that I can utilize the technologies that I already know and having the DXTREME controls adaptively render based on platform is great. I spent a little time looking into what it would take to ramp up on iOS and Android development and as a .NET developer I would definitely rather take the time to ramp up on DXTREME. I look forward to digging into DXTREME a little more and to seeing where they go with it in future releases.

Jon

Disclosure of Material Connection: I received an honorarium and a DXTREME subscription for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”