DevExtreme HTML - Technical FAQ

ASP.NET Team Blog
24 September 2012

Multi-Channel Experiences
Target multiple devices with DevExtreme

DevExtreme is a new DevExpress product that allows you to create multi-channel solutions. You can use DevExtreme to create mobile hybrid web apps that look-and-feel native for multiple channels. In other words, you can write a web app using our new HTML 5 framework and create a mobile experience that will work across multiple channels like the iPhone, iPad, Android, Windows 8 devices, and desktop web browsers too.

And we're excited by it's possibilities. Watch this slick DevExtreme Announcement video from our marketing team that talks about DevExtreme, shows a sample, and the special offer for DevExpress customers.

Once released, DevExtreme will include a complete set of tools for you. In this post, I'll focus on DevExtreme HTML and address some common technical questions and great features.


What is DevExtreme HTML?

DevExtreme tools delivers innovative solutions for developers who want to create stunning, multi-screen apps across platforms and devices, from Windows 8 to the iPad and iPhone.

DevExtreme HTML is an HTML 5-based framework that contains a set of JavaScript widgets that provide powerful features like data-binding, animations, mobile touch support, and more! Easily create a single page applications (SPA), desktop web applications, or mobile hybrid web apps with DevExtreme.

Delight your users by creating apps that feel as though they were designed expressly for the device. With DevExtreme, multi-channel means building applications that span devices and optimize the best parts of each platform. And with HTML5/JS visualization built in your dynamic charts and graphs will be both powerful and beautiful.

Code your application logic once in HTML 5 and JavaScript, then run on multiple platforms (iOS, Android, Desktop Web Browser, etc.).

For example, let's say you need to create a simple mobile app that shows a list of items. With the DevExtreme HTML, you would simply need to use our List widget and, once deployed, this solution would adapt to using a native look for iPad, iPhone, Android device or Windows 8 device.

And you can still customize the look-and-feel further to your needs and requirements.


Preview now; Release on December 3rd

On September 17th we released a private DevExtreme Preview for our existing DevExpress customers. On September 27th we will release the Preview to the public.  December 3rd, 2012 is the official launch date. Mark your calendars.

For now, we'd love to hear about your experience and thoughts on DevExtreme.  To learn more about DevExtreme watch our Announcement Video or check out the online Reviewer’s Guide.


Free Download

You can download a free trial of the DevExtreme Preview here:

Download DevExtreme Preview



What's included?

DevExtreme HTML includes a set of user interface (UI) Widgets and a framework. The UI widgets help you build your mobile web app screens.

DevExtreme List widgetUI Widgets:

- Button
- Checkbox
- Datebox
- Gridlist
- List
- Navbar
- Numberbox
- Overlay
- Slider
- Switch
- Tabs
- Textbox
- Toolbar

To learn more about them, visit this great help site: DevExtreme Learning Center


There's also a great set of data visualization widgets that are written completely in HTML 5 and use SVG:

DevExpress DevExtreme Data Visualization Charts HTML5

There are three main widgets that generate the many different charts and gauges like bars, line & point, Area, Spline, Pie, etc.:

- Chart
- CircularGauge
- RangeSelector

Check out the online demos for these charts here: DevExtreme Visualization Gallery



The framework portion of DevExtreme HTML contains:

- Knockout extensions
- data providers
- URL routing engine
- View management

Because this is just the preview release, we're also working hard to add more features, demos, documentation, and other items you'll see in December.


Touch support & Animations built-in

Each of the UI widgets provide touch support for the various mobile platforms and unique animations.


Build native mobile apps!

DevExtreme supports Apache Cordova (PhoneGap). Compile your DevExtreme mobile web app and turn it into a native app that has access to local resources like the device's camera, GPS, etc.

Adobe PhoneGap is a free open source framework that supports multiple mobile platforms. And DevExtreme provides you the ability to work seamlessly with PhoneGap for iOS, Android, and Windows 8 mobile devices!

Developing with Adobe® PhoneGap™ gives you the freedom to create mobile applications for iOS, Android, and Windows 8 using the web code you know and love: HTML, CSS and JavaScript.

From Visual Studio, you'll be able to build native packages. You'll have the option of specifying what native application permissions to allow (e.g. Accelerometer, Compass, Camera, etc.). And because your app will need to be 'signed' with your own certificate for the app stores, we also added the capability for you to attach your own certificates through Visual Studio.


True jQuery and Knockout support

Our DevExtreme team of developers decided early in design phase to use and play nice with open-source libraries like jQuery and Knockout rather than reinvent the wheel. These libraries have a huge following and by adopting them, it makes development easier for you to use our set of DevExtreme tools with them.

We adopted the excellent Knockout library for client-side data-binding, jQuery for its general awesomeness, and jQuery globalize for globalization and localization of strings, dates, and numbers.

These libraries are popular with a rich developer community who use and improve them.

Therefore, DevExtreme widgets can be used very easily with other frameworks and vice versa. This approach has some great benefits for you:

1. You don't have to relearn a new approach.

2. You can feel confident that our client-side tools know and do not inherently try to conflict with popular libraries.

3. And, you have a choice of how to declare the widgets using Knockout binding or as a jQuery plugin. For example, this code below shows how to declare and use a DevExtreme HTML Check box widget. Personally, I'm a fan of the Knockout approach for it's simplicity but the choice is yours:

DevExpress JavaScript jQuery Knockout approach

DevExtreme Learning Center

Getting Started

A special 'Learning Center' has been created to help you get started quickly. Go to:

DevExtreme Learning Center

There you'll find a short series of lessons designed to get you up to speed with the framework in no time. You will build a part of the DXTravel smartphone demo. By the end of this tutorial you will have a working application you can see and play with right now in the emulator section to the right. The tutorial is the recommended place to get started with the framework.

Additionally, you can watch the demo portion of the DevExtreme launch video where you'll see a walk through of how to create a multi-channel web app.


Visual Studio Support

Because we understand that a majority of our customers are Microsoft developers who use Visual Studio, we've made the experience of developing JavaScript mobile web apps, easier.

First, we've included a File->New template that helps you get started with creating a new mobile DevExtreme web app:

DevExtreme File New Template

While these next two features are not in the preview release, here's a sneak peek to an upcoming wizard that will help guide you from the File-New template:

DevExtreme File New Wizard Selection DevExtreme File New Wizard Layout

Also, the Visual Studio design experience will show you a visual preview (this feature is not in the preview release):

DevExtreme Visual Studio Designer

In the preview release, we only support Visual Studio 2012 but we will also be supporting Visual Studio 2010 soon.

Note: The core widgets and framework of DevExtreme HTML do not have any server dependencies. Therefore, you choose your favorite editor like Notepad, Sublime Text 2, etc. However, only the Visual Studio IDE has the integrations mentioned above.


Unique Mobile Debugging

A custom application called DXProxy is installed to help you test and deploy your mobile DevExtreme apps. Here's how it works:

1. When you run (F5) a project from Visual Studio, DXProxy goes through the cloud and sets up a direct connection to your machine.
2. It then provides an unique QR Code on the browser window that is displaying your solution. Take a look at the QR Code at the bottom left of this image:

DevExtreme QR Code Deploy Debug

3. Now you can use any QR reader on your mobile device to scan this code and it will launch a version of the web app (yes the one that is running locally on your machine), on your mobile device!

Directly test how the web app will look and feel for each mobile device that you'll support by loading the version that you're developing on your laptop or desktop.

This gives you several benefits:

- Save time by not having to deploy your web app to a web server just to test it
- Create better quality mobile web apps because you can test directly on your mobile device
- When running on your mobile device (via Courier), you'll have access to local resources like the camera
- You don't need to worry about deploying through an app store to see

And because you might have several DevExtreme mobile web projects, we've made a special native app to help you test it.


A free iOS app too

To help you test and deploy the mobile web apps you create with DevExtreme, we've made a slick iOS app for iPhones and iPads. It has a great debugging feature too. Read more about in in the following blog post:

DevExtreme Courier App - Free iOS App helps you deploy and test mobile apps

There will also be an Android version of this app in the future.


JavaScript? And what else do I need to learn to use DevExtreme?

To use DevExtreme will require some basic understanding of JavaScript and jQuery. I recommend getting familiar with:

- JavaScript
- jQuery
- Knockout

There are a ton of good free resources on the internet to learn these technologies. In fact, our CTO Julian Bucknall, has been blogging about JavaScript and you find these blog posts helpful:
- JavaScript blog posts on DevExpress
- "JavaScript for C# developers" blog posts


Supported Web Browsers

Because DevExtreme HTML is an HTML 5-based framework, we have targeted only the modern web browsers that fully support HTML 5. Webkit browsers like the newer versions of Chrome and Safari are supported. And the latest versions of Firefox, as well as, Internet Explorer versions 9 and 10!


What about jQuery Mobile? Competitor X,Y,Z?

We have taken a look at the strengths and weaknesses of the solutions out there today. And we feel that DevExtreme is on par with the best of them in terms of features and performance.

A key benefits for you is that it was developed by DevExpress who has been in the developer tools business for over a decade. And we work hard to make it easier for you to create stunning applications. Plus, our excellent support team will be there to help you when you have a DevExtreme question.

If you have specific questions or concerns about features versus any existing company or product then please feel free to ask us by posting your question on our support center:


In the coming weeks, we will be talking more about DevExtreme. Drop me a line below with your comment or question. Thanks.


Create beautiful experiences across devices and platforms...

DevExtreme tools deliver an innovative solution for developers who want to create stunning, multi-screen applications across platforms and devices, from Windows 8 devices and the iPad to smartphones like the iPhone and Android. With the power of HTML5, CSS and JavaScript tools in DevExtreme developers can also build interactive and engaging web applications that push the boundaries of user experiences to a new level.

Learn more here:

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.