Over a million developers have joined DZone.

How Hybrid Mobile Apps Deliver A Native Experience With Web Technologies

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

HTML is one of the most used languages for mobile application developers, according to some report. One of the main reasons of choosing web technologies is low cost development and cross-platform portability of code.

There is no doubt hybrid applications manage to be poor designed. So, here we are going to prove that whether it is possible to deliver the native feel and look to the application that we are used to.

Generally, mobile applications can be divided into three types, i.e. native, hybrid and web apps. Develop web applications enable code to be ported across platforms that reduced development time and cost.

In Hybrid application, essential things both the worlds is combined by using a common code base to deploy native-like applications to a wide range of platforms. Mainly, there are two approaches for developing a hybrid application:

WebView app

The HTML, JavaScript and CSS code base runs in an internal browser, which is better known as WebView and it is wrapped in a native application.

There are some native APIs that showed to JavaScript this wrapper.

Just like

Adobe PhoneGap and Trigger.io.

Compiled hybrid app

Here, the code is written in one language like JavaScript or C# and gets accumulated to native code for each supported platform.

A native app for each platform is a result but provide less freedom when development. For e.g. Appcelerator Titanium, Xamarin, and Embarcadero FireMonkey.

Advantages:

  • Access to some device and operating system features
  • Reduced development time and cost
  • One code base for multiple platforms
  • Advanced offline capabilities
  • Increased visibility
  • Developer can use existing web skills
  • Easily design for various form factors, including tablets for using responsive web design.
  • Disadvantages:

  • Increased time and effort required to mimic a native UI and feel
  • Risk of being rejected by Apple if app does not feel native enough
  • Performance issues for certain types of apps
  • Not all device and operating system features supported

  • Provide Easy Accessibility to Your Users

    A single code base doesn’t mean that application look exactly same in all platforms. Moreover, users don’t have to care about the underlying cross-platform technology.

    They want the application to act as anticipated. One can have to consider each platform’s design guidelines:

  • iOS Design Resources,” iOS Developer Library
  • Android Design,” Android Developers
  • Design,” Windows Dev Center
  • Such type of guidelines might not perfectly preferable to all types of application as it provides a standard set of interfaces and experiences that users are looking for each platform.

    DIY VS. UI FRAMEWORKS

    It is quite challenging to implement all of such patterns, factors and animations. All such kinds of frameworks available to help you that ranges from commercial to open-source ones and from ones with a common UI (jQuery Mobile and Onsen UI) to different platform-specific user interfaces like ChocolateChip-UI and Sencha Touch.

    Some of them are good for delivering a pixel-perfect layout while other seems to be sloppy so it is compulsory to check a web application.

    Custom UI Components

    There are many good use cases in custom UI components. Moreover, choosing a platform’s UI and a custom UI depends on the targeted audience.

    If you want to do everything by your own then you must have a deep understanding of UX design as the guidelines are connected to above were crafted by professionals to consider particular needs of their platform’s users.

    There are some design patterns that mostly used by people whether they stick to a platform’s UI guidelines or doing your own things with custom factors. Usually, people are introducing latest application through a slideshow walkthrough or an instructional overlay.

    Now, the question arises how people navigate, the only answer is through a sidebar drawer or a tab bar. How users load and refresh data? The answer is by simply pulling to refresh.

    Sketch A Native-Looking Header Bar

    The header bar with its title and navigation elements is an important part of UI, particularly the “back” and “up” buttons.

    According to my personal view, there are some popular frameworks that fail to deliver a HTML and CSS solution as compare to a native application.

    The part of the UI along with a minimal DOM and some of CSS seems to be fair easy:

    <header>
       <button class="back">Feed</button>
       <h1>Details</h1>
       <!-- more actions (e.g. a search button on the right side) -->
    </header>


    If you are looking for full code of the native-looking header bar for iOS, Android and Windows Phone on JSFiddle, you will find result like below given.

    It is preferable to use the same DOM across all the platforms as results in cleaner code and thus, utmost maintainability. Such things can be possible for many UI factors of Android and iOS, including header bar, custom navigation menu, tab bar, settings page, popover, and so on.

    Support High-Resolution Screens

    The vast majority of mobile devices are made up by smartphones and tablets with high-resolution screens that created over 80% of iOS devices and more than 70% of Android devices.

    One can have to deliver double the dimensions than actual one to make your images look crusty for every person. One of the most discussed topics in responsive design is to serve proper size of images for all different resolutions.

    No doubt, there are different approaches available with its advantages and disadvantages that are related to browser support, bandwidth, and code maintainability. Here, we review the popular ones in no specific order:

  • CSS image-set
  • CSS media queries
  • Server-side resizing and delivering
  • Client-side detection and replacement via JavaScript
  • Resolution-independent images (SVG)
  • HTML5 picture element
  • HTML5 srcset attribute

  • One cannot find silver bullet for responsive images as always. It totally depends on image types and how they are using in the application. It is advisable to use SVG for static images like tutorial images and logo. Such images are scaled perfectly with no extra efforts and have excellent browser support as long as you find with Android 3+.

    The HTML5 picture element and srcset attributes are absolutely, where front-end development is heading when SVG is not an option. Right now, you will find the main drawback is limited browser support and thus, the requirement of polyfills is needed.

    CSS background images and media queries are the most excellent solution:

    /* Normal-resolution CSS */
    .logo {
       width: 120px;
       background: url(logo.png) no-repeat 0 0;
    }
    
    /* HD and Retina CSS */
    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.25),
    only screen and ( min--moz-device-pixel-ratio: 1.25),
    only screen and ( -o-min-device-pixel-ratio: 1.25/1),
    only screen and ( min-device-pixel-ratio: 1.25),
    only screen and ( min-resolution: 200dpi),
    only screen and ( min-resolution: 1.25dppx) {
    	.logo {
          background: url(logo@2x.png) no-repeat 0 0;
          background-size: 120px; /* Equal to normal logo width */
       }
    }
    


    But, a lot of content might be available by your application and adjusting all of the img tags or changing them with CSS would be excellent. In this case, a server-side solution is an excellent option.

    There are many Android manufacturers moving forwards with what is called XXHDPI (or very high-resolution) screens. No matter which solution fitted to your requirements, you need images that are 3x times more than the original dimensions to support the latest flagship of Android devices.

    Make Use of System Fonts

    One of the best ways to make your users feel at home is to use System fonts.

    Some of recommended of font stacks on the major platforms:

    /* iOS */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Android */
    font-family: 'RobotoRegular', 'Droid Sans', sans-serif;
    
    /* Windows Phone */
    font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
    


    Additionally, some interesting present is offered by iOS7 that automatically set the proper font family, size and line height. Such fonts are easy using like font: -apple-system-body for normal text and font: -apple-system-headline for headings.

    This results into simplification of font declarations along with improvement of accessibility through “dynamic type,” an Apple’s system-wide font-size setting.

    An Icon Is Worth A Thousand Words

    There is no doubt iconography is an essential part of user experience on all leading mobile platforms. One can easily use icons to target maximum audience with fabulous fonts. However, you should ensure that icons should be scalable.

    One of the great ways to achieve is to implement them as a font through CSS’ @font-face rule. Additionally, it also enables to change an icon’s appearance through CSS.

    Below are some recommendations

  • Connect them with an icon font generator.
  • Search out various platforms icon fonts.
  • Optimize For Performance

    The major disadvantage of hybrid mobile application is its performance. Such thing is true if application contains heavy animations that contain scrolling lists and require to run on old devices.

    But, if you are comfortable with supporting newer platform versions (Android 4+, iOS 7+ and Windows Phone 8+), you must find satisfactory outcomes.

    Now, the question arise how much efforts one need to optimize DOM and CSS selectors, reducing rendering time, writing performant JavaScript, minimizing the number of reflows and repaints.

    Additionally, rendering engines and mobile hardware are also enhancing at the rapid pace with latest devices launched in the market in every other day. The performance of a hybrid WebView app can be made by developers to differentiate from that of a fully native app on Android phones and on the iPhone 5 series comparable to Nexus 4 and 5.

    Increase Perceived Speed

    Creating a performant app is an important thing, but making it feel fast is another. No matter, your application requires some time for activities like client-server communication or heavy calculation, offering immediate feedback is important to deliver a responsive experience.

    One of the most common techniques is to delay activities that user doesn’t require while preloading the steps the user might take next. Perceived speed can be very different from actual speed, so let’s use it in our courtesy.

    Remove The Click Delay On Touch Devices

    We will find a normal JavaScript click event handler on a touch-based device with a slight deferral between the click being fired and the touchstart. Such features are developed into the browser for detecting, whether the user is performing a single- or double-tap.

    One can easily remove such 300 milliseconds for getting a much more responsive tap behavior instead of the “double-tap to zoom. Here, the FastClick library solution is recommended and thus, uses in everything except Internet Explorer:

    if (‘ontouchstart’ in window) {
    window.addEventListener(‘load’, function() {
    FastClick.attach(document.body);
    }, false);
    }

    One can require some CSS, as Internet Explorer 10+ is a bit easier.

    html {
    -ms-touch-action: manipulation; /* IE 10 */
    touch-action: manipulation; /* IE 11+ */
    }

    Style The Active State

    One can have some kind of feedback that the application has been detected their actions once the user taps an actionable element like a link or a button. Additionally, one can have to switch to: active or a JavaScript solution, while the CSS pseudo-class: hover works excellently for the desktop or a JavaScript solution for it to work on mobile.

    Here, we have compared the three approaches to the active states on JSFiddle. When working on one or another way, one can easily judge what is best for you. Moreover, one can easily remove the default tap highlight when adjusting active states on mobile devices.

    Furthermore, remove the default tap highlight while adjusting your active states on mobile. It is recommended to disable user selections on actionable elements, as the selection menu would be quite troublesome when the user taps the button for long.

    iOS and Android

    button {
    outline: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    

    Windows Phone 8+

    Indicate Loading

    An application will take some time to finish an action whenever an application is performing an action. You just have to consider adding a loading indicator for a second.

    If you are not doing this, then user will think that your application stops infrequently and they will click around when they should not. It is not a good idea to add animated GIFs in mobile browsers as it stops when loads on the CPU and lastly, defeating its whole purpose.

    Spin.js is the most preferable due to its configurability and ease of use. You can also check other JavaScript solutions and CSS loaders for more understanding.

    If you are looking for some cross-platform tools, you can have PhoneGap and Trigger.io for accessing to native loaders that is best for displaying a full-screen loading animation.

    Get the Scrolling Right

    Scrolling is also an essential factor in the user experience of different mobile applications. As the success of its implementation depends on the scrolling niceties thus, it is considered both a blessing and curse.

    We are finding scrollable content and a fixed header and/or footer bar are fixed to all applications. We are finding two common approaches to get this with CSS:

    There are two common approaches to achieving this with CSS

  • Disabling scrolling on the body, and applying JavaScript custom scrolling to the content;
  • Enabling scrolling on the body, and applying position: fixed to the header;
  • Disabling scrolling on the body, and applying overflow: scroll to the content.
  • There is no doubt the first option is best to get numerous advantages, however, it is recommended to opt second option, overflow: scroll. One can find some issues with it, and has excellent browser support for modern platforms like Android 4+, iOS 5+ and Windows Phone 8+.

    Instead, you could also replace overflow: scroll with a custom scrolling library like iScroll. Such type of JavaScript solutions enables more excellent features, as they are always penalized performance. It is quite difficult when we are using many DOM nodes and/or CSS3 effects in the content area.

    Check out some basic scrolling features:

    Momentum Effect

    Users can be enabled to the touch-friendly momentum effect to scroll view large content areas in a natural ways. Such can be easily activated with some easy iOS5+ and CSS and in some versions of Chrome for Android.

    In iOS, this can also allow the content to remove top and bottom edges.

    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    

    Pull Down To Refresh

    There are different types of solutions available on the web like Damien Antipa. Moreover, you can also find solution for Windows Phone and iOS with same look and feel while Android launched its own mechanism.

    Here, we are implementing in CatchApp by using some CSS and javaScript keyframes.

    Scroll To Top

    Regrettably, if we are disabling scrolling on the body, it also helpful for breaking iOS’ native feature, enabling users to get to the top of the page by tapping the status bar.

    Some small script is written that can be added to any element and that ensures scrolling to the top by using JavaScript, although the content is presently in momentum. With a native plug-in, one can easily add to the header of your mobile website or to the status bar with a native plug-in.

    There is various scrolling features could be implemented on the top of the native overflow: scroll like just infinite scrolling and snapping to a certain elements. One should look after at the JavaScript option for more advanced requirements.

    Succeed Easy To Hit Stuff

    Users will frequently miss their target when performing touch actions by a few pixels, particularly on small buttons. Developers can help users to keep design elegant by allowing an invisible touch area available around small targets:

    <button>
       <div class="innerButton">Click me!</div>
    </button>
    

    One can also have to place the event handler on the button elements along with restricting the styles to div.innerButton. For full example, including CSS, on JSFiddle, click here.

    Using Touch Gestures

    We all know that smartdevice is all about touching and gestures. When we are interacting with touch devices, we just swipe, zoom, pinch, drag and long-tap all the time.

    So, you are lacking to offer users the same means of controlling your hybrid application? Here, we are recommending you two libraries that support all types of gestures. Those are QuoJS and Hammer.js.

    Native Functionality

    If you are developing your application with web technology doesn’t means you can’t use native features. Actually, Inbuilt access provided by all major cross-platform development tools to the most essential functionality.

    Such includes APIs for the network connection, device data, geolocation, the file system, the accelerometer, notifications (including push), etc. Even, developing custom plug-ins can extend development tools.

    There are many features added at Hojoki that includes detecting the user’s time zone, reading the user’s setting for push notifications for our app, checking whether a third-party app is installed and launching it and so on.

    We are looking for some simple examples for things that fulfilled with native plug-in. First of all, we have to enable JavaScript focus() for input fields on iOS 6+:

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) {
    [YourWebView setKeyboardDisplayRequiresUserAction:NO];
    }
    

    Here, you will find the code to copy a given string to the device’s clipboard on iOS platform:

    [[UIPasteboard generalPasteboard] setString:@”Your copied string”];

    How to Conclude It?

    If you are developing hybrid applications means you are using same processes and tools that we are using for developing websites.

    Having said that, one thing I really like about the hybrid approach is that you can deploy HTML, CSS and JavaScript code as a mobile web app with relative ease.

    Make sure to implement fallbacks for native features, or find elegant workarounds if they are not supported at all. There are many developers prefer to keep users in a native application and even, you could promote your app to your mobile website’s users.

    Here, you are thinking about native part, isn’t it? One can find mobile web application like HTML, CSS and javaScript will be loaded in a WebView, an internal browser engine that decides an application the way a default browser on the device would minimize it.

    Moreover, a native “bridges” are utilized to represent device’s feature and operating system through an API for enabling them accessible with JavaScript. Access to the device’s camera, native events, address book, geolocation, etc. are added

    Some cross-platform development tools deliver native bridge and simplify the whole process of concluding it.

    In this ways, Hybrid mobile applications deliver native experience with web technologies. If you want to know more about hybrid app or want to develop application to enjoy native experience, then Contact Perception System.

    Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

    Topics:

    Published at DZone with permission of David Maxx. See the original article here.

    Opinions expressed by DZone contributors are their own.

    The best of DZone straight to your inbox.

    SEE AN EXAMPLE
    Please provide a valid email address.

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
    Subscribe

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}