Mobile Web App Development

May 17th, 2013

Agenda
1. The Current Scenario and Problem

2. Risks involved. Hence HTML5!

3. HTML5 adoption

4. W3C agenda and hurdles

5. Native Mobile Development and some examples

2

Agenda (contd.)
6. Mobile Web App development and some examples

7. HTML5 Test App and support comparison table

8. Mobile Web Application Libraries and Frameworks

9. HTML5 benchmarking and performance tools

10. My suggestions and next steps

3

1. Current scenario and problem

Current scenario and problem

The problem new devices, more platforms!

Audiences platform providers, app developers, users

A big question for developers: What device platforms are you
targeting?

There are two extreme ends to the spectrum of approaches: 1. Build one version that works on all devices. UX will
suffer!

2. Build a version for each device you want to support. This

will take forever! Next week , new device!

Apple/Google TV Gaming Consoles Smart Watch E-Book reader .. Google glasses

2. Risks involved. Hence HTML5!

Risks involved. Hence HTML5!

it reduces the ability of the Web to open up silos of information, content and services

as mobile devices are taking the center of stage as computing devices, there will be less
investment in improving Web technologies if it is not seen as relevant on mobile devices

native technologies require multiple development per platform, which improductively increases
the cost of providing and obtaining content and services

native technologies and their associated distribution channel are under control from single
commercial entities, putting developers and users at risk of censorship, monopoly, etc.

any development platform critically needs developers; developers can only target so many different
platforms, so for the Web to strive as a platform, it needs to be a developers strongest ally

3. HTML5 adoption and the contrary

HTML5 adoption
Kendo UI survey of 5000 developers released today provides strong evidence of HTML5
adoption

1. "How will you tackle the challenge of building apps for multiple mobile platforms?"
70% of the developers surveyed answered "adopt HTML5," and 14% planned one native implementation per target platform plus one "catch-all" HTML app for all other platforms

2. 40% of developers spend time developing the same app or feature for multiple platforms
Clear indicator of active multi-platform development

3. 70% of respondents noted HTML5 as their first choice for managing the multi-platform
complexity
9

HTML5 adoption and the contrary

But the contrary

Survey: Mobile Apps vs Mobile websites

Apps are considered more convenient Apps are faster Apps are "easier to browse Apps are engaging (business) Apps build up the user experience (business)

Facebook and Xero ditch HTML5 for native Mark Zuckerbergs strategy and fall-back

10

4. W3C agenda and hurdles

W3C agenda
W3C Headlights 2013

In selecting topics for study this year, we tried to be very thoughtful, and look at our needs in three
categories. Accordingly, the topics for this year are:

Open Web Platform

Web Payments
HTML5 Performance Closing the Gap with Native Which Community Groups and Business Groups should transition to Working Groups

12

W3C hurdles
W3C hurdles

Blog: Getting agreements is hard (somebody said W3C should be disbanded!) http://www.w3.org/QA/2013/04/getting_agreements_is_hard_som.html

Roadmap HTML5 standard to release by Q4 2014 HTML5.1 standard to release by Q4 2016

13

5. Native Mobile Development & Examples

Native Mobile Development & Examples

Android

Example 1 - Setting up the Android Dev. Platform and native mobile Browser App

iOS

Example 1 - Setting up the iOS Dev. Platform and native mobile Browser App

15

6. Mobile Web App Development & Examples

Mobile Web App Development & Examples

Android

Example 2 - First Web App using static assets

Example 3 - Using a JavaScript interface Example 4 - Configuring webpage viewport

iOS

Example 2 - First Web App using static assets

17

7. HTML5 Test App and support comparison table

Mobile Web App Development & Examples

Android

HTML5 Test

iOS

HTML5 Test

19

8. Mobile Web Application Libraries and Frameworks

Mobile Web Application Libraries and Frameworks

Responsive Mobile Website Frameworks HTML5 Fall-back HTML5 Cross Browser Polyfills

Bootstrap
FlexApp

HTML5/CSS3 Mobile Library

TopCoat TypeForm MixItUp

21

9. HTML5 benchmarking and performance tools

HTML5 benchmarking and performance tools

Benchmarking and performance tools

WBench
Chrome pre-loader and high-performance browser networking Remote Google Chrome DevTools

23

10. Feedback and my suggestions

My suggestions and next steps .

My suggestions

HTML5 is not just about the web anymore, it would also target Apps running over mobile, TV, Gaming consoles, Google glasses, etc. This vision is part of W3Cs Open Web Platform and headlight of W3Cs 2013 agenda.
There should be a course on HTML5/CSS3 in IT department since HTML5 standard would be freezed in Q4 2014 and HTML5.1 would be releasing around Q4 2016.

25

My suggestions and next steps .

Next steps

I have completed the first two phases of the independent study (refer the attached draft): 1. Native Mobile Development and exploring the WebView control in detail 2. HTML5 for making Mobile Web Apps

I would be focusing on the next two steps of the independent study: 3. Mobile Web Development and Design using plugins 4. Mobile Web Development using 3rd party development tools

26

Send me feedback hds6825@rit.edu