XDK Official Tutorials

---

Tutorials

Description:

Tutorials provide a step-by-step process to accomplish a task. Tutorial documents are aimed at a lesser skilled audience and often include details that a more advanced developer might take for granted.

Getting Started with the Intel® XDK

Get a step-by-step introduction to building your first application here.

Installing the Intel® XDK on Mac* OS X*

Follow step-by-step directions for installing the Intel® XDK.

Creating an App Using App Starter

A guide to starting a new app with the App Starter UI builder. Build out a UI for App Framework.

Submitting an Application to the Appstores

Find all the requirements for submission of an application to the Apple Appstore and the Android Market here.

Obtaining Application Store Credentials

Discover what needs to be done in order to obtain the appropriate credentials for submitting applications to the iOS Appstore and the Andorid Market.

Building an Apple iOS Application Binary

This document details how to build an Apple iOS binary file using the App Dev Center build system.

Building a Google Android Application Binary

This document details how to build a Google Android binary file using the App Dev Center build system.

Building a MicroSoft Windows Store Application Package

This document details how to build a Microsoft Windows Store package using the App Dev Center build system.

Test and Submit a Microsoft Windows Store App

A tutorial with instructions for testing an application built using the App Dev Center Windows 8 Store build on device and submitting it to the Windows 8 Store.

Building a MicroSoft Windows Phone 8 Application Package

This document details how to build a Microsoft Windows Phone 8 package using the App Dev Center build system.

Test and Submit a Microsoft Windows Phone 8 App

A tutorial with instructions for testing an application built using the App Dev Center Windows Phone 8 build on device and submitting it to the Windows Phone 8 Store.

Building a Chrome Store App

Learn how to build a Chrome Web App and publish it to the Chrome Web Store.

Accelerated Canvas App Game Interface Implementation Guide

Get started making acclereated HTML5 apps using this helpful implementation guide hosted at Intel's HTML5 Developer Zone.

Using App Game Interface Accelerated Canvas with ImpactJS

This document provides the steps necessary to use the Accelerated Canvas App Game Interface with an ImpactJS game.

Using Physics Engine App Game Interface with ImpactJS

This document provides the steps necessary to use Accelerated Canvas App Game Interface with an ImpactJS game.

Facebook Implementation Guide

This article on IDZ helps developers add Facebook functionality to their application quickly and easily through the use of a sample application, a handy "helper" JavaScript library, and implementation instructions.

Twitter Implementation Guide

Want to be able to "tweet" from your applicaitons? This guide helps developers implement Twitter functionality into their application quickly and easily through the use of a sample application, a handy "helper" JavaScript library, and implementation guide. Click this link to download the entire guide as an archived folder.

Using App Debugger

Learn how to use the App Debugger remote JavaScript debugging tool to help build your next HTML5 project.

Using the Bootstrap to use a single codebase on a variety of platforms

Get acquainted with the HTML5 Tools Bootstrap Library to help create a single codebase for a variety of platforms.

Adding appMobi Javascript Intellisense

This document will outline where to download the auto-completion libraries and how to install them into your editor.

pushMobi Implementation Guide

This feature is now available from the appMobi documentation. Click here to redirect to that documentation.

Live Update Implementation Guide

This feature is now available from the appMobi documentation. Click here to redirect to that documentation.

1Touch Implementation Guide

This feature is now available from the appMobi documentation. Click here to redirect to that documentation.

---
source: http://html5dev-software.intel.com/documentation/tutorials/index.html
---

Difference Between Native Apps, Web Apps, and Hybrid Apps

---

Mobile: Native Apps, Web Apps, and Hybrid Apps

by RALUCA BUDIU on September 14, 2013

Topics: 

• Applications
 
• Mobile & Tablet

Summary: Native and hybrid apps are installed in an app store, whereas web apps are mobile-optimized webpages that look like an app. Both hybrid and web apps render HTML web pages, but hybrid apps use app-embedded browsers to do that.

In the mobile realm, you’ll hear often terms like native app or web app, or even hybrid app. What’s the difference?

Native Apps

Native apps live on the device and are accessed through icons on the device home screen. Native apps are installed through an application store (such as Google Play or Apple’s App Store). They are developed specifically for one platform, and can take full advantage of all the device features — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on. They can also incorporate gestures (either standard operating-system gestures or new, app-defined gestures). And native apps can use the device’s notification system and can work offline.

Mobile Web Apps

Web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: they navigate to a special URL and then have the option of “installing” them on their home screen by creating a bookmark to that page.

Web apps became really popular when HTML5 came around and people realized that they can obtain native-like functionality in the browser. Today, as more and more sites use HTML5, the distinction between web apps and regular web pages has become blurry.

In 2011 Financial Times withdrew its native app from Apple’s App Store to circumvent subscription fees and maintain closer connection with their subscribers. Instead, it came out with an iPhone web app (app.ft.com):

              

Financial Times web app for iPhone

                

Horizontal swiping on Financial Times' web app

Its web app is, in many ways, hard to distinguish from a native app. For instance, there are no visible browser buttons or bars, although it runs in Safari (when accessed from an iPhone). Users can swipe horizontally to move on to new sections of the app. And, due to browser caching, it’s even possible to read the newspaper offline.

These are all features that are available in HTML5. Also available are the GPS, the tap-to-call feature, and, there is talk about a camera API, although I haven’t seen any web app (or web page) that takes advantage of it so far. There are, however, native features that remain inaccessible (at least from now) in the browser: the notifications, running in the background, accelerometer information (other than detecting landscape or portrait orientations), complex gestures.

Of course, one can argue that many apps (native or otherwise) do not take advantage of those extra features anyhow. But if you really need those native features, you’ll have to create a native app or, at least, a hybrid app.

Hybrid apps

Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.

Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow cross-platform development and thus significantly reduce development costs: that is, the same HTML code components can be reused on different mobile operating systems. Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.

Walgreens provides two very similar hybrid apps– one for Android and the other for iPhone. Both apps have multiple sections and many native features such as access to notifications and a Refill by scan feature that uses the phone camera to refill prescriptions:

Walgreens app for Android

However, the Shop section in both the Android and iPhone apps uses a browser view that renders the corresponding page of the Walgreens mobile website. Here are three pages displaying the same content in the Android app, iPhone app, and mobile website:

Walgreens app for Android

Walgreens app for iPhone

Walgreens mobile website (m.walgreens.com)

As you can see, all these pages are the same, except for the top header, which is platform specific. The Back button on iOS is translated into a caret on Android; the logo is present on the web page, but not in the app. (The designers have correctly assumed that on the web people need the logo to orient themselves, since they are likely to land on a deep page without navigating through the homepage. In contrast, in their apps all navigation has to go through the homepage).

Banana Republic is such another example of hybrid app; it has used the exact same design on Android and iPhone:

Banana Republic app for Android

Banana Republic app for iPhone

However, the Back button in the Android app ignores the fact that, unlike iPhones, Android devices come with a physical or virtual Back button. The tab bar at the bottom of the page works well in the iOS design, but is clunky and clearly non-native on Android.

Native, Web App, or Hybrid: Which Should You Choose?

Each of these types of apps has their advantages and disadvantages, as I’ve tried to point out. Let’s summarize them here.

Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.

Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.

Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or an information need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.

Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app. Responsiveness is key to usability.

Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.

Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.

Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.

Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such as Playboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.

Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web. NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.

User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.

(These issues are discussed in further depth in our full-day training course Mobile Websites and Apps: Essential Usability Principles for Mobile Design, while many more detailed screen-design issues are covered in the seminarVisual Design for Mobile and Tablet.)

To summarize, native apps, hybrid apps, or web apps are all ways to cater to the needs of the mobile user. There is no unique best solution: each of these has their strengths and weaknesses. The choice of one versus the other depends on each company’s unique needs.

---
copied from: http://www.nngroup.com/articles/mobile-native-apps/
---

Understanding Native, HTML5, and Hybrid Apps

---

Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

Screens are small, apps are big, and life as we know it is on its head again. In a world that's increasingly social and open, mobile apps play a vital role, and have changed the focus from what's on the Web, to the apps on our mobile device. Mobile apps are no longer an option, they're an imperative. You need a mobile app, but where do you start?

Get Started

Salesforce Mobile Services

Build Mobile Apps

Salesforce Mobile Packs

There are many factors that play a part in your mobile strategy, such as your team’s development skills, required device functionality, the importance of security, offline capability, interoperability, etc., that must be taken into account. In the end, it’s not just a question of what your app will do, but how you’ll get it there.

Like Goldilocks, you may have to try a couple beds that are too soft or too hard, before you find the one that’s just right. And sometimes there’s just no perfect choice. Each development scenario has its pros and cons, and those might in be inline, or at odds, with your means. Unlike Goldilocks, there are no bears to contend with, and it’s our intent that this article keeps you from burning your lips on hot porridge (well, figuratively).

While this article addresses mobile app development in general, it is specifically targeted at developers looking to create mobile applications that interact with Salesforce.com, Force.com, or Database.com. Currently, the Salesforce Mobile SDK supports building three types of apps:

• Native apps are specific to a given mobile platform (iOS or Android) using the development tools and language that the respective platform supports (e.g., Xcode and Objective-C with iOS, Eclipse and Java with Android). Native apps look and perform the best.
• HTML5 apps use standard web technologies—typically HTML5, JavaScript and CSS. This write-once-run-anywhere approach to mobile development creates cross-platform mobile applications that work on multiple devices. While developers can create sophisticated apps with HTML5 and JavaScript alone, some vital limitations remain at the time of this writing, specifically session management, secure offline storage, and access to native device functionality (camera, calendar, geolocation, etc.)
• Hybrid apps make it possible to embed HTML5 apps inside a thin native container, combining the best (and worst) elements of native and HTML5 apps.

Native Mobile Applications

In a nutshell, native apps provide the best usability, the best features, and the best overall mobile experience. There are some things you only get with native apps:

• Multi touch - double taps, pinch-spread, and other compound UI gestures
• Fast graphics API - the native platform gives you the fastest graphics, which may not be a big deal if you’re showing a static screen with only a few elements, or a very big deal if you’re using a lot of data and require a fast refresh.
• Fluid animation - related to the fast graphics API is the ability to have fluid animation. This is especially important in gaming, highly interactive reporting, or intensely computational algorithms for transforming photos and sounds.
• Built-in components - The camera, address book, geolocation, and other features native to the device can be seamlessly integrated into mobile apps. Another important built-in components is encrypted storage, but more about that later.
• Ease of use - The native platform is what people are accustomed to, and so when you add that familiarity with all of the native features they expect, you have an app that’s just plain easier to use.
• Documentation - There are over 2500 books alone for iOS and Android development, with many more articles, blog posts, and detailed technical threads on sites like StackOverflow.

Native apps are usually developed using an integrated development environment (IDE). IDEs provide tools for building debugging, project management, version control, and other tools professional developers need. While iOS and Android apps are developed using different IDEs and languages, there’s a lot of parity in the development environments, and there’s not much reason to delve into the differences. Simply put, you use the tools required by the device.

You need these tools because native apps are more difficult to develop. Likewise, the level of experience required is higher than other development scenarios, you don’t just cut and paste Objective-C and expect it to work. Indeed, the technological know-how of your development team is an important consideration. If you’re a professional developer, you don’t have to be sold on proven APIs and frameworks, painless special effects through established components, or the benefits of having your code all in one place. Let’s face it, today a skilled native iOS or Android developer is a rock star, and can make rock star demands.

While we’ve touched on native apps from a development perspective, there’s also the more important perspective: the end user. When you’re looking for an app, you’ll find it in the store. When you start the app, it fires up immediately. When you use the app, you get fast performance, consistent platform look and feel. When your app needs an update, it tells you so. Native apps give you everything you’d expect from the company that built your device, as if it were simply meant to be.

HTML5 Mobile Applications

If you’re new to mobile app development, you’re late to the party. However, for mobile Web-based apps, we’re still partying like it’s 1999! Sure, browsers have gotten better in the past umpteen years, but the underlying technology isn’t that much different than when you feared the Y2K bug.

But that can be a good thing. An HTML5 mobile app is basically a web page, or series of web pages, that are designed to work on a tiny screen. As such, HTML5 apps are device agnostic and can be opened with any modern mobile browser. And because your content is on the web, it's searchable, which can be a huge benefit depending on the app (shopping, for example).

If you have experience developing Web apps, you'll take to HTML5 like a duck to water. If you're new to Web development, the technological bar is lower; it's easier to get started here than in native or hybrid development. Unfortunately, every mobile device seems to have their own idea of what constitutes usable screen size and resolution, and so there's an additional burden of testing on different devices. Browser incompatibility is especially rife on Android devices, so browser beware.

An important part of the "write-once-run-anywhere" HTML5 methodology is that distribution and support is much easier than for native apps. Need to make a bug fix or add features? Done and deployed for all users. For a native app, there are longer development and testing cycles, after which the consumer typically must log into a store and download a new version to get the latest fix.

In the last year, HTML5 has emerged as a very popular way for building mobile applications. Multiple UI frameworks are available for solving some of the most complex problems that no developer wants to reinvent. iScroll does a phenomenal job of emulating momentum style scrolling. JQuery Mobile and Sencha Touch provide elegant mobile components, with hundreds if not thousands of plugins that offer everything from carousels to super elaborate controls.

So if HTML5 apps are easier to develop, easier to support, and can reach the widest range of devices, where do these apps lose out? We already reviewed the major benefits of native development, so we'll just reiterate that you can't access native features on the device. Users won’t have the familiarity of the native look and feel, or be able to use compound gestures they are familiar with. But strides are being made on all fronts, and more and more functionality is supported by browsers all the time.

The latest batch of browsers support hardware accelerated CSS3 animation properties, providing smooth motion for sliding panels as well transitions between screens, but even that can’t match the power and flexibility of native apps. Today, it’s simply not possible to capture multi-touch input events (determining when more than one finger is on the screen) or create path-style elegance with spinout buttons and photos that hover, then drop into the right place.

However, significant limitations, especially for enterprise mobile, are offline storage and security. While you can implement a semblance of offline capability by caching files on the device, it just isn't a very good solution. Although the underlying database might be encrypted, it’s not as well segmented as a native keychain encryption that protects each app with a developer certificate. Also, if a web app with authentication is launched from the desktop, it will require users to enter their credentials every time the app it is sent to the background. This is a lousy experience for the user. In general, implementing even trivial security measures on a native platform can be complex tasks for a mobile Web developer. Therefore, if security is of the utmost importance, it can be the deciding factor on which mobile technology you choose.

Hybrid Mobile Applications

Hybrid development combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features. PhoneGap is an example of the most popular container for creating hybrid mobile apps.

For the most part, hybrid apps provide the best of both worlds. Existing web developers that have become gurus at optimizing JavaScript, pushing CSS to create beautiful layouts, and writing compliant HTML code that works on any platform can now create sophisticated mobile applications that don’t sacrifice the cool native capabilities. In certain circumstances, native developers can write plugins for tasks like image processing, but in cases like this, the devil is in the details.

On iOS, the embedded web browser or the UIWebView is not identical to the Safari browser. While the differences are minor, they can cause debugging headaches. That’s why it pays off to invest in popular frameworks that have addressed all of the limitations.

You know that native apps are installed on the device, while HTML5 apps reside on a Web server, so you might be wondering if hybrid apps store their files on the device or on a server? Yes. In fact there are two ways to implement a hybrid app.

• Local - You can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud.
• Server - Alternatively you can implement the full web application from the server (with optional caching for better performance), simply using the container as a thin shell over the UIWebview.

Netflix has a really cool app that uses the same code base for running the UI on all devices: tablets, phones, smart TVs, DVD players, refrigerators, and cars. While most people have no idea, nor care, how the app is implemented, you’ll be interested to know they can change the interface on the fly or conduct A/B testing to determine the optimal user interactions. The guts of decoding and streaming videos are delegated to the native layer for best performance, so it’s a fast, seemingly native app, that really does provide the best of both worlds.

Conclusion

Mobile development is a constantly moving target. Every six months, there’s a new mobile operating system, with unique features only accessible with native APIs. The containers bring those to hybrid apps soon thereafter, with the web making tremendous leaps every few years. Based on current technology, one of the scenarios examined in this article is bound to suit your needs. Let's sum those up in the following table:

	Native	HTML5	Hybrid
App Features
Graphics	Native APIs	HTML, Canvas, SVG	HTML, Canvas, SVG
Performance	Fast	Slow	Slow
Native look and feel	Native	Emulated	Emulated
Distribution	Appstore	Web	Appstore
Device Access
Camera	Yes	No	Yes
Notifications	Yes	No	Yes
Contacts, calendar	Yes	No	Yes
Offline storage	Secure file storage	Shared SQL	Secure file system, shared SQL
Geolocation	Yes	Yes	Yes
Gestures
Swipe	Yes	Yes	Yes
Pinch, spread	Yes	No	Yes
Connectivity	Online and offline	Mostly online	Online and offline
Development skills	ObjectiveC, Java	HTML5, CSS, Javascript	HTML5, CSS, Javascript

Next Steps

We encourage you to learn from existing applications, focus on the user experience, and experiment along with us. If you haven't already,

1. Get a Developer Edition organization.
2. Download the Android or iOS Salesforce Mobile SDK from GitHub.
3. Download the Mobile SDK Workbook, build an app, and step through the code with us.
4. Log into the Mobile forum of the Force.com Discussion Boards, ask questions, and contribute back your stories.

Recommended Mobile SDK Learning Paths

• Getting Started with the Mobile SDK for Android
• Getting Started with the Mobile SDK for iOS
• Webinar: Introduction to the Mobile SDK
• [1]

Related Mobile SDK Resources

• Sample Apps on GitHub
• Recent related blog posts
• Mobile Components for Visualforce
• API Java Docs for Android
• API Docs for iOS
• Recent conference sessions
  • Developing Native iOS Apps with the Force.com Mobile SDK (Cloudstock March 2012)
  • Develop Mobile Web and Hybrid Apps (Cloudstock March 2012)
  • Developing Mobile Apps for Force.com and Database.com (Dreamforce September 2011)

Authors: Mario Korf and Eugene Oksman

---
copied from: https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options
---

Developing Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap

---

Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap

by Christophe Coenraets on March 28, 2012 in Backbone.js, iOS, iPhone, PhoneGap

If you just want to try the application in your browser, click here. The data is based on Dwight’s originalorg chart :)

I’ve been blogging a lot about Backbone.js recently. Backbone.js is a lightweight architectural framework that brings structure to your Web applications. Backbone is not, however, a user interface framework that helps you with the way your application looks.

So, where do you turn to for help when you need to make your application look good? 

For traditional web apps (delivered through a browser), Twitter Bootstrap can help (read here). But what about Mobile apps? I explored Backbone.js + jQuery Mobile here. Depending on what you are looking for, it may or may not be the right solution: jQM provides mobile skins, but they don’t look native. It’s also more of a full stack framework than a lightweight UI toolkit that you can easily layer on top of your app.

The alternative to using an existing UI toolkit is to roll your own styles to make your application look and behave like a native app. Sounds easy enough, but when you consider all the details and want to achieve “pixel perfection”, it becomes a daunting task.

As I was getting ready to tackle the challenge, and build a new native looking version of my Employee Directory app, I came across this great blog post by Chee Aun where he documents the process he went through to build his own Hacker News mobile app. His post is a real gem, and I ended up reusing a lot of the Hacker News app styles.

Compared to the Hacker News app, the Employee Directory page flow is more random. Here are a few examples:

1. SearchPage -> EmployeePage -> ReportsPage -> EmployeePage -> …
2. SearchPage -> EmployeePage -> EmployeePage (manager) -> Reports -> …
3. SearchPage -> EmployeePage -> EmployeePage (manager) -> EmployeePage (manager’s manager) -> …

As you can see, the page flow includes “same page transitions”, when the user navigates from one employee to his/her manager. To accommodate the Employee Directory page flow requirements, my Backbone.js infrastructure creates and destroys pages as needed with the appropriate slide-in/slide-out transitions. The implementation of these transitions was inspired by Wesley Hales’ article.

PhoneGap

Even though you can run this application in a browser (here), I built it with the intention of packaging it as a native app with PhoneGap so that you could start it like any other app from your iPhone home screen. If you are not familiar with PhoneGap, I’ll provide more details on packaging this app as a native app in my next post.

Source Code

I updated the backbone-directory GitHub repository to include this version: It is available in the iphonedirectory.

---
copied from: http://coenraets.org/blog/2012/03/crafting-native-looking-ios-apps-with-html-backbone-js-and-phonegap/
---

COMPARING HTML5 MOBILE UI FRAMEWORKS

---

In response to the growing market for mobile apps several HTML5 Mobile UI Frameworks are now available to help developers create attractive and responsive apps.  These libraries enable Web developers to create great user experiences for their apps using technology and skills that they are familiar with.  The best of these UI/UX frameworks include App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat.  Each one provides a unique set of features to help Web developers make great apps.

What are UI Frameworks?

HTML5 Mobile User Interface Frameworks are libraries that will enable developers to easily create a professional grade user experience for their HTML5-powered app.  These libraries are included as one or more files written using JavaScript and CSS.  They are meant to be used by including them in an HTML file.  They are appropriate for a variety of uses.  All these platforms are appropriate for mobile Web apps as well as for native hybrid applications where a native wrapper allows the entire user experience be driven by HTML5.  These hybrid applications are built using a wrapping technology like Cordova to give HTML5 applications access to native features of the device such as the camera through a JavaScript bridge API.

Why would I want to use one for mobile?

There are a lot of great reasons why Web developers would choose to use an HTML5 Mobile UI Framework for their next app.  Developers who learn how to use frameworks save a lot of time and effort styling and animating their app experiences.  All the frameworks listed in this article provide the tools to create a great app for both tablet and phone form-factors, but some even adapt to add support for desktop browsers.  HTML5 Mobile UI frameworks can give developers’ apps a unified look and feel to make the software much more “professional” than a home-grown solution can.  Some HTML5 Mobile UI frameworks even adapt depending on the platform they are running on to present users with an experience customized for the operating system they are running the software on.

How are they all alike?

These frameworks have a lot in common to help developers make great mobile apps.

All these frameworks are also designed to work on a variety of platforms.  There is a panoply of mobile devices in the market, and these frameworks aim to support as many of them as possible.  They do that by using the technique of Responsive Design or a combination of Responsive Design and Reactive Design.  For those keeping score at home, Responsive Design is a process of laying out Web UI elements so that the UI can be resized at will with a minimum of redrawing on all form factors while Reactive Design is a process where UI elements are turned on or off depending on the platform the application is running on.

Most of these frameworks are based on jQuery or a jQuery style query selector JavaScript engine.  A query selector is a JavaScript library that allows the framework to select elements make changes to the Document Object Model or DOM. Without a query selector those frameworks that require a query selector won’t work appropriately or not work at all.

With a few exceptions, these frameworks provide JavaScript support for scrolling through HTML elements as well as animated transitions between pages.  Additionally, each of these frameworks gives developers a way to display basic navigational elements and controls to create an application using Web development skills like HTML5, CSS3, and JavaScript.

These frameworks all include methods for loading data from the Web dynamically using asynchronous techniques to grab data in XML or JSON format.  By providing access to resources on the Internet, these frameworks accelerate development and extend the capability of what is possible with HTML5 Mobile Apps.

There are a variety of HTML5 user interface elements that all these libraries provide.  Buttons, menus, forms, lists, toolbars, tabs, modal overlays, and a variety of other controls are available from these frameworks.  Most of these UI frameworks use font files to deliver icon images to the screen.  Font files are a superior solution to flat files for icons because they consume less bandwidth and are naturally resizable.

All these frameworks take advantage of touch events as well as click events, allowing them to be used by mobile devices as well as desktop mouse-driven devices.  Many frameworks make sure HTML elements are sized appropriately for touch activation as well.

Many of these frameworks include a method of adding functionality through plugins, or additional CSS or JavaScript library files.  Developers only include what is necessary and nothing else. This progressive enhancement conserves as much speed and responsiveness, while providing options to add extra functionality as necessary.

How are they different?

Although the examples of HTML5 Mobile UI Frameworks mentioned earlier are very similar in a lot of ways, there are still significant differences as well.  Here is a brief comparison of the strengths of App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat.

App Framework

Intel’s App Framework is a reliable and responsive HTML5 Mobile UI Framework that is ideal for creating hybrid mobile apps.  It is optimized for mobile, and so it lacks a lot of the “moving parts” that would allow the framework to adapt to the desktop.  However, that simplicity can be a boon for newer developers.  An app can be written with simple HTML5 markup alone, so even basic users mostly unfamiliar with JavaScript can use the framework.  It gives developers the ability to write a single codebase, and have their application adapt a native-style look and feel depending on the device the app runs on.  For example, the Mobile HTML5 app would look like an iOS app on an iPhone, a native Android app on a Galaxy, and so on.  App Framework is used extensively in the Intel XDK which includes a great app prototyping tool named App Starter.

Twitter Bootstrap 3

Twitter Bootstrap 3 is the latest in a series of HTML5 UI Frameworks for desktop browsers that has added support for mobile as well.  It is based on manipulating HTML5 elements by giving them specific CSS styles to compose an application.  Customized style and JavaScript components may be added from the Twitter Bootstrap Website to extend the functionality.  Twitter Bootstrap has a distinctive “Web 2.0” look which is very crisp and modern, but its approach to mobile is an afterthought since it doesn’t support JavaScript scrolling or animated transitions.  It is a great option for an application that is meant for the desktop as well as a mobile platform, but that reusability makes it a poor choice for a mobile-only experience.

jQuery Mobile

The first and perhaps most commonly used HTML5 Mobile UI Framework is jQuery Mobile.  Although jQuery UI was originally not created for the mobile space, jQuery Mobile has done an admirable job at providing a mobile user interface that reflects the same aesthetic and usability of its desktop product.  The jQuery Mobile HTML5 Mobile UI Framework is very easy to use, and is programmed using HTML elements like the previous two frameworks.  It has good documentation for a free product, and has a large installed base that can provide help and sample code for new projects.

Sencha Touch

Sencha Touch offers a unique take on HTML5 Mobile UI Frameworks because it requires that all UI code is written in JavaScript.  That makes for a more precise experience, but it requires developers to have considerable JavaScript chops to get things done.  It is a commercial venture, so it has some great documentation, tools, and support.  However, it is free as long as it isn’t part of a product that ships more than 5,000 units.  Sencha Touch is able to create some great graphical charts, it supports the Yahoo Query Language, and it has themes to support every popular mobile platform.

Kendo UI

Kendo UI is a commercial venture based on jQuery, which helps support the outstanding documentation and tools that are available for developers who use the tool.  For example, Kendo UI’s theme builder can help developers cook up a custom color scheme for their UI quickly.  Kendo UI’s Mobile HTML5 library uses HTML with class tags to run “widgets” that provide a set block of functionality.  It is able to change its UI based on the platform to emulate the native aesthetic of an iOS, Android, Blackberry, or Windows Phone 8 device depending on which platform it runs on.  Kendo UI us used by the Hybrid App builder Icenium.

TopCoat

TopCoat is a free HTML5 Mobile UI framework build by Adobe.  It is unique from the others in this list for several reasons.  First, it relies on CSS libraries over JavaScript to provide everything developers need.  That makes it easy to build using HTML5 elements only and gives the framework an edge in speed.  Secondly, TopCoat’s look and feel sets it apart from the others.  It is very much a stylish product, and if you are a fan of Adobe’s aesthetics you won’t be disappointed by TopCoat.  Finally, it is designed primarily for desktop browsers but includes a mobile stylesheet that features larger touch targets for controls.

Where can I find all these great HTML5 Mobile Frameworks?

If all this technology sounds great, developers can try them out for themselves by following these links.

• App Framework – http://app-framework-software.intel.com/
• Twitter Bootstrap 3 – http://getbootstrap.com
• jQuery Mobile – http://jquerymobile.com
• Sencha Touch – http://www.sencha.com/products/touch/
• Kendo UI – http://www.kendoui.com/
• TopCoat – http://topcoat.io/

---
copied from: http://html5hub.com/comparing-html5-mobile-ui-frameworks/
---