What is the best way to develop an application to support multiple platforms (Apple, Android, Microsoft)?
It is built on two different stacks: HTML5 and XAML.
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.
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.
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.
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.
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.
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.
And they are used in the application views:
Here’s Shippers.js as an example.
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.
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.
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.
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.“