The world is going mobile and millions of smart phones are activated daily. As a result, more and more mobile applications are developed for consumers, and enterprise software products are also slowly but steadily joining the revolution. More and more businesses are convinced that in order to sustain, they need to be in the mobile space. You are a web developer and one fine morning your manager tells you, "We now need to focus on the mobile platforms. Get ready!" or you want to develop a mobile app which needs to be deployed to one or more mobile app stores. There are many factors that play a part in choosing the appropriate mobile development platform, such as your development skills, native functionalities, security, offline capability, and support for multiple platforms. In this chapter, we will see different approaches for developing mobile applications and understand why HTML5 is a popular choice for cross-platform development. Then we will have an introduction to Kendo UI Mobile and will go over some design principles for mobile applications.
In this chapter we will cover:
Native versus hybrid versus mobile websites
HTML5 and CSS3
Kendo UI – building cross-browser apps made easy
Kendo UI Mobile
HTML5 mobile web application design guidelines
As you may already be aware, there are three ways to develop a mobile device compatible application: native, hybrid, or mobile website.
Native apps are coded in a programming language specific to a platform, namely, Objective C for iOS, Java for Android, and so on. Native applications run faster, have access to all device APIs and features, and provide a better user experience. Since native apps are built for a particular platform, the entire application needs to be rewritten if a native application needs to run on another platform. This will create code duplication, maintenance headache, budget increase, and the need to have multiple development teams (specializing in a certain platform) working on the same business rules. Typically, games and applications which require high performance are developed as pure native apps.
Hybrid apps are written using pure web technologies (such as CSS, HTML, and JavaScript) and they run on the device in a native container using the device's browser engine. Hybrid apps are usually packaged using tools such as PhoneGap, which helps the app to access device-specific APIs and hardware features. WebKit rendering engine is used in platforms such as iOS, Android, and Blackberry to render the web-based script/code to be displayed in a web view control of the native platform. Since Hybrid apps are created using a native app shell, they can be distributed using app stores too. Icenium by Telerik is a cloud-based, all-in-one development environment to package, test, and deploy hybrid applications. PhoneGap is another commonly used tool for packaging web apps for deployment on multiple mobile platforms.
Mobile websites are accessed using a URL and run in the mobile device's browser. They can be developed using server-side technologies, such as ASP.NET and PHP, and can be deployed and updated without any approval process from an app store. If the mobile website is written using pure web technologies (HTML, CSS, and JavaScript) or using frameworks based on them, such as jQuery, Kendo UI, and jQuery Mobile, mobile websites can be packaged to be installed as a hybrid application without much effort. A major drawback of mobile websites is that only device features that are exposed through the browser can be accessed, and this makes a mobile website suitable for content-based applications. There is no single solution which is suitable for all the scenarios. Selection of a methodology will depend on a number of factors, such as the skill sets you have, budget, time lines, and update frequency.
Kendo UI Mobile is an ideal platform for developing hybrid apps and mobile websites. During the course of this book, we will create a Movie Tickets application using Kendo UI Mobile which will be treated as a mobile website initially and then, towards the end of the book, it will be packaged using PhoneGap as a mobile app and deployed to Android as well as the iOS devices.
HTML5, jQuery, and CSS3 are the new mantra for developing cutting-edge web applications. When we say web, it includes the standard websites/applications, mobile websites/applications, as well as hybrid applications. Even though this book is about Kendo UI Mobile, it's important to have an idea about the underlying technologies behind the Kendo UI Mobile framework, namely, HTML5, CSS3, and jQuery. Let's take a high-level view at HTML5 and CSS3 technologies briefly before we take a deep dive into Kendo UI Mobile. Since we expect the readers of this book to have knowledge in jQuery, we won't be discussing the basics of jQuery here.
HTML5 shot to fame among the Internet public when Steve Jobs famously announced the death of Flash on the iOS devices and endorsed HTML5 as the future, as it helps to build advanced graphics, typography, animations, and transitions without relying on third-party browser plugins.
HTML5 is a markup language specification that is comprised of a significant number of features, technologies, and APIs that allow content developers to create a rich and interactive experience. HTML5 is still in the recommendation stage, but many browsers already implement a significant portion of the specification. This poses a challenge for developers as they need to figure out which browsers support which features before kick starting an HTML5 project.
Even though the specification for HTML5 is not complete yet, tons of features are already implemented by mainstream browsers. The following are some of the main features of HTML5 as it stands as of today:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Note
http://html5rocks.com from Google is a very good website for HTML5 reference with tons of tutorials, articles, and other resources.
There are three different organizations behind the development of the HTML5 specification: W3C (World Wide Web Consortium), WHATWG (Web Hypertext Application Technology Working Group), and IETF (Internet Engineering Task Force). As a result, there are two versions of the HTML5 specification maintained by W3C and WHATWG, which can be found at http://www.w3.org/TR/html5/ and http://whatwg.org/html respectively. IETF comprises of the groups responsible for Internet protocols such as HTTP, and handles the WebSocket protocol which is used by the WebSocket API of HTML5.
Two different versions of HTML5 is not a matter of concern as the WHATWG version is considered as a living standard (meaning there will be constant development and versions no longer will be applied) and W3C is planning to create a single definitive standard, which WHATWG calls a snapshot of their living standard.
The WHATWG effort is focused on developing the canonical description of HTML and related technologies (meaning fixing bugs, adding new features, and generally tracking implementations), while W3C will continue the HTML5 specification work, focusing on a single definitive standard.
Now let's get our hands dirty and take a look at a simple HTML5 page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Our first HTML5 page </title>
</head>
<body>
<header>
<h1>Sample HTML5 Structure</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
</header>
<section>
<h1>Main Section</h1>
<h2>This is a sample HTML5 Page</h2>
<article>
<p>Article 1 goes here</p>
</article>
<article>
<p>Article 2 goes here</p>
</article>
</section>
<footer>
<p>Footer goes here</p>
</footer>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE HTML>
This line needs to be added at the top of every HTML5 page that we create. The new DOCTYPE declaration is plain and simple, unlike the lengthy and hard to remember ones in HTML4 shown as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
All the latest browsers will look at the new DOCTYPE declaration and switch the contents into standard mode.
Like the DOCTYPE declaration, the character set declaration is also simplified in HTML5 as shown as follows:
<meta charset="UTF-8">
The meta charset attribute in a meta element is used instead of a pragma directive as in HTML4.
This is how a typical character encoding looks in HTML4:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
As highlighted in the earlier code, you can see some new HTML5 tags which are semantic markups. Semantic markups describe their meaning or purpose clearly to the browser and to the developer. In HTML4, we used the <div> tag to define a division in a page, but it never provided any details about the contents and had no specific meaning. To make sense, developers used to add an id attribute and provide a meaningful ID such as sectionHeader, footer, and navLinks as follows:
<div id="sectionHeader"> </div>
The semantic elements such as <header>, <footer>, and <nav> were added in to HTML5 as a result of mining billions of web pages, for figuring out what common IDs and CSS class names the developers use most often, and for selecting a small subset to be added in to the HTML5 specification. It made perfect sense as this will help search engines and accessibility tools to crawl the web pages easily and developers can work on neat HTML code.
Let's now checkout some of the new semantic markups we used in our sample HTML5 page.
The <header> element represents a group of introductory or navigational aids. Typically <header> will be the first element in a page. It is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not a requirement. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
The <nav> element represents a section with navigation links to other pages or to sections inside a page. This element is primarily intended for sections that consist of major navigation blocks. Usually footers will have a short list of links to various pages of a site. The <footer> element alone is sufficient for such cases, while a <nav> element can also be used, but it is usually unnecessary.
The following are some more places where you can think about adding the <nav> element:
Bread Crumbs
Table of Contents
Side Navigation
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of the following contents:
Chapter
Various tabbed pages in a tabbed dialog box
Numbered sections of a thesis
A website's home page could be split into sections for an introduction, news items, and contact information. It is a segment of content that you will consider storing as a record in a database.
The <section> element is appropriate only if the contents would be listed explicitly in the document's outline.
The <article> element represents an independent section of content such as a blog post, a comment, and a magazine article. An article should be an independent entity and it should be possible to distribute or reuse it even when the surrounding contents are removed.
The <footer> element represents information about the containing element such as links to related content or copyright information. Footers need not be added at the end of the section even though it is the usual practice.
Note
http://html5test.com/ is a great website to test your browser's HTML5 compatibility.
CSS3 is the latest version of CSS, that unlike CSS2 (which is a single large specification of CSS) is divided into multiple modules which are documented and worked upon separately. Work on the CSS3 specification started back in 1998 as soon as the specifications for CSS2 were complete, and it is still undergoing updates.
CSS3 helps in adding life to a web page by animating its elements, applying different effects such as gradients, shadows, multiple backgrounds, and opacity, and much more without using images or client-side code as done with previous versions of CSS. CSS3 helps to improve performance of the application as CSS files are cached on the client side and use hardware acceleration technique for animations on supported browsers.
CSS3 has over 50 modules published from the CSS Working Group such as Media Queries, Namespaces, Color, Animations, Backgrounds and Borders, Selectors, and 2D/3D Transformations.
Let's see using a quick example, how easy it is to apply rounder border, transformation, and shadow to an HTML element using CSS3.
First, let's define a simple div element and add some styles to it:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#myDiv
{
width: 200px;
height: 100px;
background-color: #A3D1FF;
border: 1px solid black;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div style="margin: 75px">
<div id="myDiv">
I am an HTML div
</div>
</div>
</body>
</html>The HTML is rendered as shown in the following figure:
Now, we need to rotate this div by 40 degrees, add rounded corners to the border, and add a shadow to the box. In CSS3, achieving these requirements is very easy using few lines of code. Add the following CSS3 properties to the CSS definition of our HTML document:
border-radius: 10px; box-shadow: 8px 8px 1px gray; transform: rotate(40deg); -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari and Chrome */
On reloading the HTML page, we can see our div has transformed to this new look:
Now that we have had enough of an overview, let's get started with the real thing: Kendo UI Framework from Telerik. Telerik has always been in the forefront for providing Rapid Application Development (RAD) tools for the developers and Kendo UI Framework is the recent addition to the Telerik RAD stack for building HTML5, jQuery, and CSS3 based cross-browser applications.
The only external dependency to using Kendo UI is jQuery. Developing applications using Kendo UI is straightforward and the setup requires only referencing the jQuery, Kendo JavaScript, and CSS files in your HTML page.
The Kendo UI Framework can be broadly classified into:
Kendo UI Widgets
Kendo UI Framework elements
The Kendo widgets use HTML5, CSS3, and jQuery to build powerful web applications without using multiple third-party frameworks and plugins, as in the case with some of the other HTML5/jQuery frameworks.
Kendo UI widgets are the UI elements that we really "see" once the application is developed such as the buttons, drop-down list, and tree view. The Framework elements are the invisible entities such as DataSource, Templates, and MVVM, which helps in integrating the data with the widgets. For simplicity, if we consider an application built using Kendo UI as a building, the UI widgets are the bricks and the Framework elements are the cement which helps the bricks to stick together.
Kendo UI widgets can be classified into three groups:
Kendo UI Web: These are used for touch-enabled desktop development
Kendo UI DataViz: These are used for desktop and mobile data visualizations
Kendo UI Mobile: These are used for mobile application development
Even though Kendo UI Web and DataViz are outside the scope of this book, it is a good idea to have an understanding of these two as well, as all the three widget groups inter-operate seamlessly and there is a good chance that in a big project more than one widget group needs to be used.
Kendo UI Web widgets are used for building keyboard/mouse input as well as touch-based traditional cross-browser web applications. As of today, there are 22 widgets available in the Kendo UI Web widgets collection. All Kendo UI Web widgets provide full support for touch-screen devices, such as the iPad, iPhone, and Android, so that the web applications can be accessed on a wide array of devices with varying input options.
Even though the Kendo UI Web framework uses modern HTML5 and CSS3 based widgets, it supports older browsers such as IE7 and IE8 by implementing graceful degradation.
Note
More information about Kendo UI Web can be found at: http://www.kendoui.com/web.aspx
Kendo UI DataViz widgets help to build cutting-edge, touch-aware charts and dashboards using HTML5. Thanks to built-in hardware acceleration, DataViz widgets use less CPU resources and thereby provide maximum performance for all animations and rendering. DataViz graphics are rendered on the client using SVG with a fallback to VML for legacy browsers.
DataViz supports the following charts and gauges widgets:
|
Chart Types |
Gauges Types |
|---|---|
|
Area |
Radial |
|
Bar |
Linear |
|
Bubble | |
|
Line | |
|
Donut | |
|
Pie | |
|
Scatter |
Note
And just like the Web widgets, DataViz supports older browsers such as IE7 and IE8 by mixing their limited HTML5 support (if any) and graceful degradation. DataViz fully supports the latest mobile browsers and so it can be used both in desktop web apps as well as in mobile apps. More information about Kendo UI DataViz can be found at: http://www.kendoui.com/dataviz.aspx
Kendo UI Mobile is the third group of the Kendo UI widget stack that helps to build HTML5-based mobile websites as well as hybrid mobile applications. Kendo UI Mobile features adaptive rendering technique which helps applications' look and feel to adapt to the platform on which it is viewed. Without any configurations or extra code, an application built on Kendo UI Mobile looks like Android on an Android device, iOS on an iOS device, and so on. At the time of writing of this book, Kendo UI Mobile supports iOS, Android, BlackBerry, and Windows 8 platforms.
Now you might have this question: "What if I need a single look and feel across all the devices on which the app is viewed?" Recently, Kendo has released a Universal Mobile Theme using which the developers can create a consistent look and feel across different platforms. If you are not using this new theme, a single configuration to force a specific platform while instantiating the mobile app will do the trick! Once we force the UI to render using a particular platform's look and feel and then modifying, the corresponding CSS files for that platform will ensure the same look and feel across multiple platforms.
Note
Kendo also provides a Mobile Theme Builder to customize the styles of the mobile widgets: http://demos.kendoui.com/mobilethemebuilder/index.html
If you are a server-side programmer who works on ASP.NET MVC, JSP, or PHP, there is good news for you: Kendo UI has server wrappers available for ASP.NET MVC, PHP, and JSP which automatically generates the necessary HTML and JavaScript to configure, render, and initialize your Kendo UI widgets (Web and Mobile) and charts (DataViz). The server wrappers emits Kendo UI JavaScript and provides full access to the Kendo UI client-side API so that the UI can be manipulated from the client-side too once the web page is rendered.
Note
You can read more about the server wrappers here: http://www.kendoui.com/server-wrappers.aspx
Developing applications for mobile devices is quite different from developing websites for desktops and laptops. There are a wide range of mobile devices available with varying screen sizes and processing powers. Mobile devices access the Internet with varying bandwidth; they can be connected to a Wi-Fi network and in an instant they can go to a slow 2G network. All these factors make mobile applications development different from traditional web applications development.
Here are some guidelines which will help developers while building a mobile web application:
Animations with CSS3 rather than with jQuery: Whenever possible use CSS3 animations as they are handled in the browser natively so that it can make use of the hardware resources thus increasing the performance.
Responsive design using CSS3 media queries: Mobile devices these days have varying screen sizes and it's a basic expectation that a mobile web app will fit on the screen of the device requesting the application. Responsive designs using CSS3 media queries help the same code base provide an optimal viewing experience on a wide range of devices.
Use CSS3 gradients instead of images: Using CSS3, we can provide gradients in your web page without using specifically cut images. This helps to preserve bandwidth by not having images travelling over the wire and provides more flexibility on the page design.
Go for SPA (Single Page Application): SPA (for example, Gmail) provides a quicker and responsive navigational experience to the user. They are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve a page. While building mobile applications, go for SPA if it does not complicate your development process. Kendo UI Mobile is an excellent framework to build single page applications as you will see in the future chapters.
Make full use of offline mode and local data storage: Almost all modern mobile browsers these days support quite a lot of the HTML5 specification, as their update frequency is very high as compared to their desktop counterparts. Although we can safely assume that these features will be available on the mobile browsers, it's a good idea to check whether these features are enabled on the client browser using simple JavaScript conditional statements.
In this chapter we discussed different ways of developing a mobile application and had an introduction with HTML5 and CSS3. We also got our hands dirty by writing some sample code in HTML5 and CSS3. It is important to understand the power of HTML5 and CSS3 combined, which will provide the most powerful tool for mobile application development for the next generation apps. Then we had a high-level look at Kendo UI architecture and finished off with some of the design guidelines for HTML5 mobile applications.
In the next chapter we will take a deep dive into Kendo UI Mobile, write some code, and develop few screens of an application which will be developed as a fully functional web application as we progress through this book.
