Seminar Presentation on Mobile Web Apps.

2. Introduction
According to a recent study
 more than 1 billion people use mobile phones and
tablets as primary computing devices
 68% of customers prefer mobile websites over full desktop
versions
 There are several approaches to developing mobile Web
apps, but given the fast speed of mobile software
evolution, it’s crucial to understand the basic
technologies.

4.  Apps developed with os provider’s language and frameworks.
 Binary executable files on the device.
 Can access all API’s made available by OS vendor.
 SDK’s are platform-specific.
 Each mobile OS comes with its own unique tools and GUI
toolkit.
* IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper

5. Different tools, languages and distribution channels
associated with leading mobile operating systems

6. PROS
Easy low-level hardware
access services.
Easy access to high level
services important to
personal mobile experience.
Full use of all functionalities
that modern mobile devices
have to offer.
High usability.
CONS
Code Reusability : Low
Development &
maintenance: Time-
consuming & expensive.
Designers are required to be
familiar with different UI
components of each OS.
Upgrade flexibility: Low.

7.  Use standard web technologies such as HTML 5, CSS 3 &
JavaScript.
 Features of HTML 5 - Advanced UI components, access to rich
media types, geolocation services & offline availability.
 Increasing popularity of HTML 5 in rendering engines such as
WebKit.
 Runs on a standalone mobile web browser.
 Installed shortcut, launched like a native app.
 UI logic resides locally; makes the app responsive and accessible
offline.

8. ADVANTAGES:
 Multiplatform support.
 Low development cost.
 Leverage existing knowledge.
DISADVANTAGES:
 Limited access to OS API’s.

9.  Combines native development with web technology.
 The web app runs inside a thin wrapper native app.
 Hybrid apps are mobile Web applications packed into a
native app. They behave like a native app in that they’re
installed from a Web store and have access to the same
capabilities as a native app, but they’re developed using the
same tools used to develop Web applications—mainly,
HTML5, CSS, and JavaScript.
 The communication between web app and native app
normally happens over JavaScript via custom built
API’s.

10. ADVANTAGES:
 Flexibility of web apps combined with feature
richness of native apps.
 Simplified deployment and immediate availability.
 Leverage existing knowledge.
DISADVANTAGES:
 Poorer user experience as compared to native apps.
 Access to advanced device capabilities normally
restricted.

11. PROS
Code Reusability
Plugins
Easy for web developers
Reduced development costs
Support for enterprise &
cloud services
Easy Deployment
CONS
Might not support every
feature of OS
Cannot use own tools/IDE
Slower.
High end graphics & 3D
support limited
Vendor lock-in

13. Technical Considerations
 There isn’t a single solution for choosing which mobile
application type will be best for every situation.
 Several technical criteria can help us narrow down our
options to select the most suitable development
approach for a given situation.

14. Platforms and version support
What we have to consider
 platforms and versions to be supported
 Range of devices to support
 Devolopment stack for each of them
 Platform’s browser capabilities
 Our own devolopment skills

15.  If the goal is to build an app once with support for
multiple platforms, a hybrid or a mobile Web approach
is a better choice than a native app, which must be
developed specifically for each mobile platform.

16.  We also need to consider which device capabilities are
needed.
 If the app needs access to camera, a barcode scanner, the
file system, or a Bluetooth peripheral, we’re better off using
a native or hybrid approach because they have direct access
to these features.
 The latest browsers support hardware- accelerated
animation properties, but they still can’t fully use device
capabilities such as native graphics or other device-specific
interfaces included in the native device API.

17. User Experience
 Later, we’ll list different Web frame-works that provide
libraries for mobile Web and hybrid apps to imitate
native mobile interfaces and behaviour.
 However, native apps still provide a richer, more
compelling experience with a more responsive
interface and superior interaction because users can
open them faster and use device specific hand
gestures.

18.  Moreover, mobile apps still face challenges in
accessing a device’s native features across all mobile
browsers, which keeps users from achieving the same
level of experience as when using a native app.
 Hybrid apps offer an important trade-off in terms of
the depth of experience. They allow the HTML code to
have access to native APIs—although this comes at the
cost of a non-native user interface due to the Web
technologies involved.

19. Performance
 Performance is one of app developers’ chief concerns.
 If the user interfaces are graphic-heavy or require excessive
data processing, the mobile and hybrid app approaches
have more difficulties in achieving high performance
because they’re running on top of additional layers, which
consumes computing resources.
 At any rate, before completely developing any app,
developers should test performance by using a preliminary
prototype or testing similar existing apps.

21. Frameworks
 Although it’s possible to develop a mobile Web, hybrid, or
native app without a framework, using frameworks can
simplify and reduce the development process effort.
 There are frameworks available for just about any develop-
ment option
 Most frameworks are for HTML5 development. However, if
we choose to develop for a hybrid or native ap-proach with
a cross-platform develop-ment frame in mind, we have
different options that we should consider.

22. * http://setandbma.files.wordpress.com/2011/12/wora-platforms.png

24. TECHNICAL ARCHITECTURE:
 Web approach using hybrid model.
 Single source codebase written HTML 5, CSS 3, JavaScript running on a mobile
browser embedded in a native app wrapper.
 Device capabilities accessed through device-independent JavaScript API.
SUPPORTED PLATFORMS:
 iOS, Android, Blackberry, WP7, Symbian, Palm, Samsung Bada
IDE USED:
 MAC OS X & XCODE for iPhone & iPad.
 Google Android SDK, Eclipse ADT Plugin, Ant as well as Eclipse IDE for Android.
* http://www.adobe.com/devnet/phonegap/articles/creating-apps-with-phonegap-lessons.html

25. STRENGTHS:
 Native wrapper source code is provided so it can be customized further.
 Simple ‘drop-in libraries’ concept makes it easier to develop.
 Lowers barriers of adoption for web developers.
WEAKNESSES:
 Lack of support for native UI components, design patterns & development tools.
 The capabilities offered by the framework is limited to what a “WebView” can do.
 Different projects for different platforms
 Different JavaScript files on each platform for PhoneGap itself and plugins
 No native UI support
 Java, Objective-C or C# requirement to create new plugins
 No built-in support for push notifications

26. iOS Android

27. Below is a summary of each platform and whether it offers adequate support for a given
area. (Scored 2 or better in that criteria)
* http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

28. Recent Developments

29. Adobe AIR
 Adobe Integrated Runtime, also known as Adobe AIR, is
a cross-platform run-time system developed by Adobe
Systems .
 It used for building Rich Internet applications (RIA) that
can be run as desktop applications or on mobile devices,
programmed using Adobe Flash, Apache Flex(formerly
Adobe Flex), HTML, and Ajax.
 The runtime supports installable applications
on Windows, Mac OS and some mobile operating systems
such as BlackBerry Tablet OS, iOS and Android.
 It also originally supported Linux, but that support was
discontinued.

30.  “ The Adobe AIR runtime enables developers to
package the same code into native applications and
games for Windows and Mac OS desktops as well as
iOS and Android devices, “
 According to adobe “AIR reaches over a billion
desktop systems and 500 million mobile devices”

31. That was fast: Chrome Apps ready to go mobile
 The cold, hard walls between mobile native apps and HTML5 wobbled
a bit on Tuesday morning, as Google announced that Chrome Apps will
now work on the two most popular mobile platforms.
 Google introduced developer preview of the Apache Cordova
"toolchain" for wrapping Chrome Apps in code native to Android and
iOS.
 Cordova lets developers write apps in HTML5, CSS, and JavaScript,
then wraps the app in the native coding languages for iOS and Android,
connecting APIs from HTML5 to the native code as best it can. Since
it's only being released as a developer preview right now, developers
can expect improvements in Cordova.


33. Kik’s Cards content html5 platform
 An HTML5 app that Koa.la built on Kik’s Cards
content platform, surpassed one million downloads
within 24 hours.
 The app playfully connects users with existing and new
friends by letting them draw on each other avatar’s
using a Draw Something-like guessing game.

35. Boot TO Gecko (firefox OS)
 B2G is an opensource smartphone os devoloped by
mozilla. This new platform is backed by major mobile
network operators, and its development is based on
HTML5.
 I got to use an early version of Boot to Gecko, running
on a flashed Samsung device that used to run Android,
and it was really great.

36.  The operating system only uses very low amount of
ram and processing power.
 Firefox os really have the potential to make low end
devices more capable……..

37. B2G screen shots

38. Are Web apps the future of
mobile?
 Canonical recently introduced ubuntu touch mobile
os with integrated web applications support.
 Individual developers and many companies like google
and apple say and show that HTML5 is the standard
for mobile Web development.

39. So Are Web apps the future of
mobile?
There’s no definite answer, of course. But it seems to be a
safe bet.

40. References:
1. “mobile web apps”-Nicolás Serrano, Josune Hernantes, and Gorka
Gallardo
Ieee software magazine- september/october 2013
(http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=6588524)
2.Y. Chen et al., “Adapting Web Pages for SmallScreen Devices,” IEEE
Internet Computing, vol. 9, no.1, 2005, pp.
50–56.
3. R. Nixon, HTML5 for iOS and Android,
McGraw-Hill, 2011.

41.  4. R. Rodger, Beginning Mobile Application
Development in the Cloud, Wrox, 2011
 http://www.onlinesolutionsdevelopment.com/blog/mobile-
development/why-mosync-could-be-a-better-alternative-to-
phonegap/
 http://mashable.com/2012/02/16/cross-platform-app-design-pros-
cons/
 http://floatlearning.com/2011/07/which-cross-platform-framework-is-
right-for-me/