Mobile web apps

A study by Athhar

1

IntroductionAccording 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, its crucial to understand the basic technologies.

2

APPROACHES TO MOBILE DEVELOPMENTNATIVE, WEB OR HYBRID?

Choose a mobile strategy depending on the budget, project timeframe, target audience & app functionality.3

NATIVE APPSApps developed with os providers language and frameworks.Binary executable files on the device.Can access all APIs made available by OS vendor.SDKs 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

Can take full advantage of particular os feautures4

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

NATIVE APPSPROSEasy 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.

CONSCode Reusability : LowDevelopment & maintenance: Time-consuming & expensive.Designers are required to be familiar with different UI components of each OS.Upgrade flexibility: Low.

Once the app is installed, it interacts with the underlying operating system through proprietary API calls that the OS exposes. These are divided into 2 categories Low-level APIs & high level APIs. Through low-level API calls, the app can interact directly with the touchscreen or keyboard, render graphics, connect to networks, process audio received from the microphone, receive images & video from the camera, access the GPS etc. Higher level services include processes like browsing the web, managing calendar, contacts, photo album, the ability to send and receive phone calls etc.6

MOBILE WEB APPS

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.

Another increasingly popular approach is to develop mobile web apps which run on the users mobile browser. These are different from mobile-optimized websites which detect when they are being accessed from a mobile device and serve HTML pages that have been designed to provide a comfortable touch experience on a small screen size.This involves using standard web technologies such as HTML, CSS, JavaScript to build the application & make it look and behave like a native app. It is possible due to the advanced capabilities of HTML 5 including embedded SQL databases, local storage (application cache to reduce page startup time and enable offline features), animations, canvas (avoid transferring images), websockets, video playback, geolocation services etc. Mobile Google Search uses the HTML5 Geolocation API to show location-aware results. Google Maps for Mobile and Mobile Gmail both use the canvas tag to avoid transferring images. This approach may be appealing for many applications such as ebooks, mobile banking, social interaction & email. However it may not be suited for highly interactive, CPU-intensive, visually rich applications like games, augmented reality browsers & videoconferencing.7

ADVANTAGES:Multiplatform support.Low development cost.Leverage existing knowledge.DISADVANTAGES: Limited access to OS APIs.

HYBRID APPSCombines 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 theyre installed from a Web store and have access to the same capabilities as a native app, but theyre developed using the same tools used to develop Web applicationsmainly, HTML5, CSS, and JavaScript.

The communication between web app and native app normally happens over JavaScript via custom built APIs.

The bridge enables the hybrid app to take full advantage of all the features that modern devices have to offer.App developers can choose to code their own bridge or use ones provided by many of the cross-platform development frameworks such as PhoneGap. 9

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.

PROSCode ReusabilityPluginsEasy for web developersReduced development costsSupport for enterprise & cloud servicesEasy Deployment

CONSMight not support every feature of OSCannot use own tools/IDESlower.High end graphics & 3D support limitedVendor lock-in

Web apps and hybrid apps

Major frameworks, including Appcelerator and PhoneGap offer easy access to plugins and modules that can easily plug into other services or tools.Do not have to invest in a team or developer specific to that ecosystem.In addition to plugins and modules for specific functions, most frameworks also have the option to directly integrate with cloud services, including Salesforce.com, AWS, Box.net and others.Deploying and compiling apps is much faster in a cross-platform scenario. This is especially true with many of the new cloud-based build tools that various frameworks are starting to push out.

If Google, Apple or Microsoft adds a new feature, the framework you are using will need to be updated to support those new additions.Most frameworks want users to use their own development tools and suites, and that can mean that a developer has to forgo his or her own IDE preferences and use something else.Most of the cross-platform frameworks build using their own subsets of JavaScript, which means that if you want to switch to another platform, that code you wrote before is likely not going to be reusable without a lot of work.11

Technical Considerations

There isnt 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.

Platforms and version supportWhat we have to consider

platforms and versions to be supportedRange of devices to supportDevolopment stack for each of themPlatforms browser capabilitiesOur own devolopment skills

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.

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, were 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 cant fully use device capabilities such as native graphics or other device-specific interfaces included in the native device API.

User ExperienceLater, well 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.

Moreover, mobile apps still face challenges in accessing a devices 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 APIsalthough this comes at the cost of a non-native user interface due to the Web technologies involved.

PerformancePerformance 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 theyre 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.

Frameworks

Although its 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.

CROSS-PLATFORM FRAMEWORKS

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

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.

PHONEGAPFrom Nitobi now acquired by Adobe* http://www.adobe.com/devnet/phonegap/articles/creating-apps-with-phonegap-lessons.html

Best suited when you have an existing web application you wanna port to a mobile environment24

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 platformsDifferent JavaScript files on each platform for PhoneGap itself and pluginsNo native UI supportJava, Objective-C or C# requirement to create new pluginsNo built-in support for push notifications

PHONEGAPFrom Nitobi now acquired by Adobe

Drop libraries in the right place and begin coding with a familiar web stack to produce a functional application quickly.

Imposes little structure and/or guidelines on how to best develop applications with it. This means users are free to architect their solutions in away that best suits their needs. This can be a blessing for experienced developers but can create confusion and promote bad designs within novice users.

PhoneGap does nothing to emulate the native device UI. Left the users withthe task of styling the markup to mimic a native app. Fortunately there are loads of open sourcelibraries specialized in exactly this. Therefore its not unusual to see Phonegap being used inconjunction with other libraries like XUI and Sencha Touch.

PhoneGap API runs on a very extensible plugin architecture. If PhoneGap doesnt already support the feature you need, you can easily write a plugin yourself. To extend PhoneGap through plugins one must know how to program in the native language of each platform.

The burden for that increases when there is a need to use multiple PhoneGap plugins because you need to search and update different files on each platform.25

UI DESIGN CONSIDERATION

iOSAndroid

Screenshots of a foursquare app develped on both ios and android using phonegap.26

COMPARISON OVERVIEWBelow 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/

Recent Developments

Adobe AIRAdobe Integrated Runtime, also known as AdobeAIR, is across-platformrun-time systemdeveloped byAdobe Systems.It used for buildingRich Internet applications(RIA) that can be run asdesktop applicationsor on mobile devices, programmed usingAdobe Flash,Apache Flex(formerly Adobe Flex),HTML, andAjax. The runtime supports installable applications onWindows,Mac OSand some mobile operating systems such asBlackBerry Tablet OS,iOSandAndroid. It also originally supportedLinux, but that support was discontinued.

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

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 thatChrome Appswill 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.

Kiks Cards content html5 platformAn HTML5 app that Koa.la built on Kiks 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 avatars using a Draw Something-like guessing game.

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.

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..

B2G screen shots

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.

So Are Web apps the future of mobile?Theres no definite answer, of course. But it seems to be a safe bet.

References:1. mobile web apps-Nicols 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. 5056.

3. R. Nixon, HTML5 for iOS and Android, McGraw-Hill, 2011.

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/