Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

• By Patrick Rudolph


• October 21st, 2014


• AppsDevelopmentUser Experience


• 9 Comments

According to a new report¹, HTML is a many widely used denunciation for mobile app developers. The categorical reasons among developers for selecting web technologies² are cross-platform portability of formula and a low cost of development. We’ve also listened that hybrid apps tend to be indolent and feeble designed. Let’s infer either it’s probable to broach a local demeanour and feel that we’re used to.

This essay provides many hints, formula snippets and lessons learned on how to build good hybrid mobile apps. I’ll quick broach hybrid mobile app development, including a advantages and drawbacks. Then, I’ll share lessons I’ve schooled from over dual years of building Hojoki and CatchApp, both of that run natively on vital mobile platforms and were built with HTML, CSS and JavaScript. Finally, we’ll examination a many distinguished collection to hang formula in a local app.

What Are Hybrid Mobile Apps?

Mobile apps can be generally damaged down into native, hybrid and web apps. Going a local track allows we to use all of a capabilities of a device and doing system, with a smallest of opening beyond on a given platform. However, building a web app allows your formula to be ported opposite platforms, that can dramatically revoke growth time and cost. Hybrid apps mix a best of both worlds, regulating a common formula bottom to muster native-like apps to a far-reaching operation of platforms.

There are dual approaches to building a hybrid app:

• WebView app
  
  The HTML, CSS and JavaScript formula bottom runs in an inner browser (called WebView) that is wrapped in a local app. Some local APIs are unprotected to JavaScript by this wrapper. Examples are Adobe PhoneGap³ and Trigger.io⁴.


• Compiled hybrid app
  
  The formula is created in one denunciation (such as C# or JavaScript) and gets gathered to local formula for any upheld platform. The outcome is a local app for any platform, nonetheless reduction leisure during development. Examples are Xamarin⁵, Appcelerator Titanium⁶ and Embarcadero FireMonkey⁷.

While both approaches are widely used and exist for good reasons, we’ll concentration on WebView apps given they capacitate developers to precedence many of their existent web skills. Let’s demeanour during all of a advantages and drawbacks of hybrid apps compared to both local and mobile web apps.

Benefits

• Developer can use existent web skills


• One formula bottom for mixed platforms


• Reduced growth time and cost


• Easily pattern for several form factors (including tablets) regulating manageable web design


• Access to some device and doing complement features


• Advanced offline capabilities


• Increased prominence given a app can be distributed natively (via app stores) and to mobile browsers (via hunt engines)

Drawbacks

• Performance issues for certain forms of apps (ones relying on formidable local functionality or formidable transitions, such as 3D games)


• Increased time and bid compulsory to impersonate a local UI and feel


• Not all device and doing complement facilities supported


• Risk of being deserted by Apple if app does not feel local adequate (for example, a elementary website)

These drawbacks are poignant and can't be ignored, and they uncover that a hybrid proceed does not fit all kinds of apps. You’ll need to delicately weigh your aim users, their platforms of choice and a app’s requirements. In a box of many apps, such as content-driven ones, a advantages transcend a drawbacks. Such apps can typically be found in a “Business and Productivity,” “Enterprise” and “Media” categories in a app store.

Both Hojoki and CatchApp are unequivocally content-driven capability apps, so we primarily suspicion they would be a good compare for hybrid development. The initial 3 advantages mentioned above were generally useful to us in building a mobile app for Hojoki in customarily 4 weeks. Obviously, that initial chronicle lacked many vicious things. The following weeks and months were filled with work on optimizing performance, crafting a tradition UI for any tallness and exploiting a modernized capabilities of opposite devices. The training in that time was essential to creation a app demeanour and feel native. I’ll share as many lessons as probable below.

So, how do we grasp a local demeanour and feel? To a mobile web developer, being means to use a facilities of a device and doing complement and being means to package their app for an app store sounds customarily awesome. However, if users are to trust it is a local app, afterwards it will have to act and demeanour like one. Accomplishing this stays one of a biggest hurdles for hybrid mobile developers.

Make Your Users Feel during Home

A singular formula bottom doesn’t meant that a app should demeanour and feel accurately a same on all platforms. Your users will not caring during all about a underlying cross-platform technology. They customarily wish a app to act as expected; they wish to feel “at home.” Your initial stop should be any platform’s pattern guidelines:

• “iOS Design Resources⁸,” iOS Developer Library


• “Android Design⁹,” Android Developers


• “Design¹⁰,” Windows Dev Center

While these discipline competence not ideally fit all kinds of apps, they still yield a extensive and customary set of interfaces and practice that users on any tallness will know and expect.

DIY vs. UI Frameworks

Implementing all of these components, patterns and animations on your possess can be utterly a challenge. All kinds of frameworks exist to assistance we with that, trimming from blurb (Kendo UI¹¹) to open-source ones (Ionic¹²) and from ones with a common UI (jQuery Mobile¹³ and Onsen UI¹⁴) to many platform-specific UIs (Sencha Touch⁷⁶¹⁵ and ChocolateChip-UI¹⁶). Some are unequivocally good during providing a pixel-perfect layout, while others are rather sloppy, so creation it easy for a user to brand a web app. However, my sense is that their categorical drawbacks are performance-related, given many UI frameworks try to be as all-embracing as possible. Judge for yourself by holding a few mins to try a demos on your possess device.

At Hojoki, we try to qualification all components on a possess regulating CSS3 and minimal JavaScript. This keeps us in control of opening and reduces overhead. We apparently use tiny libraries for formidable tasks that someone else has solved customarily fine.

Custom UI Components

Custom UI components also have many good use cases. Deciding between a platform’s UI and a tradition UI will apparently count on your aim audience. If we wish to do your possess thing, we should have a low bargain of UX design, given a discipline compared to above were crafted by experts to accommodate a sold mandate of their platform’s users.

Whether we hang to a platform’s UI discipline or do your possess thing with tradition components, know that there are certain pattern patterns that many people use any day and love. How are people customarily introduced to a new app? Through a slideshow walkthrough or an enlightening overlay. How do people navigate? With a add-on bar or a sidebar drawer¹⁷. How do users quick bucket or modernise data? By pulling to refresh. (Native-like scrolling will be lonesome extensively serve below.)

Resources for Mobile UI Design

• “Mobile UI Design Patterns: 10+ Sites for Inspiration¹⁸,” Jacob Gube, Six Revisions


• “Cloning a UI of iOS 7 With HTML, CSS and JavaScript¹⁹,” Côme Courteault


• “Tapping Into Mobile UI With HTML5²⁰” (slides), Luke Melia and Yael Sahar, Slideshare

Design A Native-Looking Header Bar

One vicious partial of a UI is a header bar, with a pretension and navigation elements, many particularly a “up” and “back” buttons. To me, many renouned frameworks destroy to yield a HTML and CSS resolution that compares to a local app. Mimicking this partial of a UI with a minimal DOM and a few lines of CSS for any tallness is indeed sincerely easy:

header
 symbol class="back"Feed/button
 h1Details/h1
 !-- some-more actions (e.g. a hunt symbol on a right side) --
/header

Check out a full formula of a native-looking header bar for iOS, Android and Windows Phone²¹ on JSFiddle. This is my result:

Native-looking headers done with HTML5 and CSS.

Using a same DOM opposite all platforms is generally preferable given it formula in cleaner formula and, therefore, maximizes maintainability. I’ve found this to be simply probable for many UI components on iOS and Android (including a header bar, add-on bar, tradition navigation menu, settings page, popover and many more). However, this becomes many harder when adding support for Windows Phone, that comes with some unequivocally opposite pattern patterns.

Support High-Resolution Screens

Nowadays, smartphones and tablets with high-resolution screens make adult a immeasurable infancy of mobile devices, creation adult some-more than 80% of iOS devices²² and over 70% on Android devices²³. To make your images demeanour frail for everyone, we customarily have to broach twice a measure than what is indeed shown in your app. Serving scrupulously sized images for all opposite resolutions is one of a many discussed topics in manageable web design. There are several approaches, any with a advantages and drawbacks compared to bandwidth, formula maintainability and browser support. Let’s quick examination a many renouned ones, in no sold order:

• server-side resizing and delivering


• client-side display and deputy around JavaScript


• HTML5 picture element


• HTML5 srcset attribute


• CSS image-set


• CSS media queries


• Resolution-independent images (SVG)

As always, there is no china bullet for manageable images. It flattering many depends on a form of images and how they are used in a app. For immobile images (such as a trademark and educational images), we try to use SVG. They scale ideally nonetheless any additional bid and have good browser support as prolonged as you’re excellent with Android 3+²⁴.

When SVG is not an option, a HTML5 picture component and srcset attributes²⁵ are unequivocally where front-end growth is heading. Currently, their categorical obstacle is a unequivocally singular browser support and, therefore, their need for polyfills.

In a meantime, CSS credentials images and media queries²⁶ are a many useful solution:

/* Normal-resolution CSS */
.logo 
 width: 120px;
 background: url(logo.png) no-repeat 0 0;


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

However, your app competence already enclose a lot of calm (such as news articles), and adjusting all of a img tags or replacing them with CSS would be exhausting. A server-side resolution is a best choice in this case.

Starting final year, some-more and some-more Android manufacturers have left one step serve with what is called XXHDPI (or unequivocally unequivocally high-resolution) screens. Whichever resolution above fits your need, keep in mind that you’ll need images that are 3 times a strange measure to support Android’s latest flagship devices.

Use System Fonts

A elementary nonetheless vicious proceed to make users feel during home is to use complement fonts.

Native fonts for iOS²⁷, Android²⁸ and Windows Phone²⁹.

These are my endorsed rise stacks on a vital 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;

Furthermore, iOS 7 offers some engaging presets that automatically set a scold rise family, rise distance and line height. It’s as easy as regulating font: -apple-system-body for normal calm and font: -apple-system-headline for headings. This not customarily simplifies rise declarations, nonetheless also improves accessibility by “dynamic type³⁰,” Apple’s system-wide font-size setting. You can puncture deeper into iOS 7 rise presets in a post by Thomas Fuchs³¹.

An Icon Is Worth A Thousand Words

Iconography is an vicious partial of a user knowledge on all vital mobile platforms. As with fonts, you’re customarily best off regulating icons that your aim assembly already knows. Recalling what we pronounced about high-resolution screens earlier, make certain that your icons are scaleable. Implementing them as a rise around CSS’ @font-face order is a good proceed to grasp this, and it comes with far-reaching browser support³². It even allows we to change an icon’s entrance (for example, a color, shade and transparency) seamlessly around CSS. Here are my recommendations:

1. Get several tallness idol fonts.
   Ionicons³³ is a baseline set given it includes scarcely all we need. This includes specific icons for iOS and Android in further to their ubiquitous ones. The rest come from specific tallness idol fonts for iOS³⁴, Android set 1³⁵ and set 2³⁶ and Windows Phone³⁷.


2. Combine them with a idol rise generator.
   
   Using mixed idol fonts is treacherous and quick adds adult in size. That is given we use Fontello³⁸ to mix a opposite sets, adjust pivotal codes and trade them for any platform. The outcome is span class="icon"s/span, that looks like a hunt idol on iOS, Android and Windows Phone. Also, check out a renouned alternatives IcoMoon³⁹ and Fontastic⁴⁰.

On Windows Phone, we can also get divided with a local font-family: 'Segoe UI Symbol'⁴¹.

Optimize For Performance

Performance is customarily deliberate to be one of a vital disadvantages of a hybrid mobile app. This is mostly loyal if your app has a lot of formidable animations, contains outrageous scrolling lists and needs to run on aged devices. However, if we are all right with ancillary customarily newer tallness versions (Android 4+, iOS 7+ and Windows Phone 8+), afterwards you’ll unequivocally expected have gratifying results. It’s eventually a doubt of how many bid we put into optimizing DOM and CSS selectors, essay performant JavaScript, shortening digest time and minimizing a array of reflows and repaints. An unconstrained array of articles and tutorials cover mobile web performance. These are some of my favorites:

• “Performance and UX Considerations for Successful PhoneGap Apps⁴²,” Andrew Trice


• “Mobile: Web Performance⁴³” (slides), Estelle Weyl


• “Writing Fast, Memory-Efficient JavaScript⁴⁴,” Addy Osmani, Smashing Magazine


• “Minimizing Browser Reflow⁴⁵,” Lindsey Simon, Google Developers


• “How to Make Your Website Faster on Mobile Devices⁴⁶,” Johan Johansson, Smashing Magazine

Beyond that, mobile hardware and digest engines are improving during a quick pace, with new inclination entrance out any other day. Developers can make a opening of a hybrid WebView app formidable to heed from that of a entirely local app on a iPhone 5 array and on Android phones allied to Nexus 4 and 5.

Increase Perceived Speed

Building a performant app is one thing, nonetheless creation it feel quick is a whole other. Whether your app needs some time for a certain charge (such as some formidable calculation or client-server communication), presenting present feedback is essential to providing a liquid and manageable experience. A common technique is to check tasks that a user doesn’t need yet, while presaging and preloading a stairs a user competence take next. A famous instance is Instagram, that uploads photos in a background⁴⁷ while a user is bustling adding tags and sharing. Perceived speed can be unequivocally opposite from tangible speed, so let’s use it in a favor. Here are some no-brainers.

Remove a Click Delay on Touch Devices

A normal JavaScript click eventuality handler on a hold device comes with a slight check between a touchstart and a click being dismissed (usually around 300 milliseconds). This underline is built into a browser to detect either a user is behaving a single- or double-tap. If we don’t need a “double-tap to zoom” feature, we can safely discharge these 300 milliseconds to get a many some-more manageable daub behavior. My favorite resolution for this is a FastClick⁴⁸ library. Use it on all solely Internet Explorer:

if ('ontouchstart' in window) 
 window.addEventListener('load', function() 
 FastClick.attach(document.body);
 , false);

Internet Explorer 10+ is a bit easier. You customarily need some CSS:

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

Style a Active State

As shortly as a user taps an actionable component such as a symbol or a link, they should immediately get some kind of feedback that a app has rescued their action. While a CSS pseudo-class :hover works good for this on a desktop, we need to switch to :active or a JavaScript resolution for it to work on mobile. I’ve compared a 3 approaches to a active state⁴⁹ on JSFiddle. While they all work one proceed or another, we decider that is best for you.

Furthermore, mislay a default daub prominence while adjusting your active states on mobile. I’d also suggest disabling user selections on actionable elements, given a preference menu would be utterly disruptive if a user incidentally taps a symbol for too 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+:

meta name="msapplication-tap-highlight" content="no"

Indicate Loading

Whenever your app is behaving an movement that will take some time to finish, even customarily for a second, cruise adding a loading indicator. If we don’t, users will consider that your app freezes occasionally, or they’ll click around when they shouldn’t, or they competence even mangle things and afterwards censure your app. From what I’ve experienced, charcterised GIFs are customarily a bad thought in mobile browsers. As shortly as there is a bucket on a CPU, a GIF freezes, so defeating a whole purpose. we cite Spin.js⁵⁰ for a configurability and palliate of use. Also, check out some other JavaScript solutions⁵¹ and CSS loaders⁵².

Cross-platform collection like PhoneGap and Trigger.io also yield entrance to local loaders, that is good for display a full-screen loading animation.

Get a Scrolling Right

Scrolling is one of a many vicious factors in a user knowledge of many apps. This is both a abuse and a blessing given a success of a doing will count heavily on a scrolling niceties that your app relies on and on a mobile doing systems that need to be supported.

Scrollable calm and a bound header and/or footer bar are common to scarcely all apps. There are dual common approaches to achieving this with CSS:

1. Enabling scrolling on a body, and requesting position: fixed to a header;


2. Disabling scrolling on a body, and requesting overflow: scroll to a content;


3. Disabling scrolling on a body, and requesting JavaScript tradition scrolling to a content.

While a initial choice has some advantages (such as iOS’s local scroll-to-top movement and a elementary formula structure), we rarely suggest going with a second option, overflow: scroll. It has fewer digest issues⁵³ (although still a lot), and browser support is good on complicated platforms (Android 4+, iOS 5+ and Windows Phone 8+), with a good tiny polyfill for some comparison ones⁵⁴. Alternatively, we could reinstate overflow: scroll with a tradition scrolling library (the third option), such as iScroll⁵⁵. While these JavaScript solutions concede for some-more coherence with facilities (for example, a corkscrew position during momentum, eventuality handling, customization of effects and scrollbars, etc.), they always reprove performance. This becomes vicious when you’re regulating a lot of DOM nodes and/or CSS3 effects (such as box-shadow, text-shadow, opacity and rgba) in a calm area.

Let’s demeanour during some of a elementary scrolling features.

Momentum Effect

The touch-friendly movement outcome enables users to quick corkscrew by vast calm areas in an discerning way. It can be simply activated with some elementary CSS on iOS 5+ and in some versions of Chrome for Android. On iOS, this will also capacitate a calm to rebound off a tip and bottom edges.

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

Pull Down to Refresh

Various resolution for this are permitted on a web, such as a one by Damien Antipa⁵⁷⁵⁶. While a solutions for iOS and Windows Phone have a identical demeanour and feel, Android recently introduced a possess resource (see below). We’ve implemented this in CatchApp regulating some JavaScript and CSS keyframes. (I have nonetheless to hang it adult simply and put it on GitHub, so stay tuned!)

Pull down to modernise on iOS. (Image credit: Damien Antipa⁵⁷⁵⁶)

Pull down to modernise on Android. (Image credit: Android Widget Center⁵⁸)

Pull down to modernise on Windows Phone. (Image credit: David Washington⁵⁹)

Scroll to Top

Unfortunately, disabling scrolling on a body will also mangle iOS’ local underline that enables users to quick get to a tip of a page by drumming a standing bar. I’ve created a tiny book that can be combined to any component and that takes caring of scrolling to a tip regulating JavaScript⁶⁰, even if a calm is now in momentum. Add it to a header of your mobile website or to a standing bar with a local plugin (for example, in PhoneGap).

Many other scrolling facilities could be implemented on tip of a local overflow: scroll, such as gnawing to a certain component or customarily gigantic scrolling. If your mandate are some-more advanced, unequivocally demeanour during a JavaScript options out there.

Make It Easy To Hit Stuff

When behaving a hold action, users will utterly mostly skip their aim by a few pixels, generally on tiny buttons (such as a ones in iOS’ tip bar). Developers can support users while gripping a pattern superb by enabling an invisible hold area around tiny targets:

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

You’ll have to put a eventuality handler on a symbol element, while restricting a styles to div.innerButton. Check out a full example, including CSS⁶¹, on JSFiddle.

Using Touch Gestures

A smartphone is all about touching and gestures. We swipe, pinch, zoom, drag and long-tap all a time when interacting with hold devices. So, given not offer users a same means of determining your hybrid app? QuoJS⁶² and Hammer.js⁶³ are obvious libraries for ancillary all kinds of gestures. If you’d like some-more choice, check out Kevin Liew’s comparison of “11 Multi-Touch and Touch Events JavaScript Libraries⁶⁴.”

Don’t Miss Out on Native Functionality

Building your app with web record doesn’t indispensably meant that we can’t use local features. In fact, all vital cross-platform growth collection yield built-in entrance to a many vicious functionality. This includes APIs for device data, a record system, a network connection, geolocation, a accelerometer, notifications (including push) and many more.

You can customarily even extend a growth apparatus by building tradition plugins. At Hojoki, we combined many blank features, including reading a user’s environment for pull notifications for a app, detecting a user’s time zone, and checking either a third-party app is commissioned and rising it. Let’s demeanour during dual unequivocally elementary examples for things that can be satisfied with local plugins. First, let’s capacitate JavaScript focus() for submit fields on iOS 6+:

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

And here’s a formula to duplicate a given fibre to a device’s clipboard on iOS:

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

Always Provide a Way Out

Web developers mostly disremember how to hoop bad situations in a hybrid app (for example, a tie timeout, a bad input, a timing issue, etc.). A hybrid app is essentially opposite from a website, generally given there is no tellurian modernise button, and an app can simply run in a credentials for weeks on some mobile doing systems. If a user runs into a passed end, their customarily choice will be to restart a app, that entails force quitting and afterwards restarting. Many people don’t even know how to do that, generally on Android 2.x (where it’s dark low in a app’s settings) and on iOS 6 and subsequent (where we have to double-tap a home button, long-press a idol and kill it).

So, omit a modernise symbol during development, and hoop bad situations as they come up. For all other situations that would have astonishing outcomes, such as ones involving client-server communication, be prepared for things to go wrong, and yield a proceed out for users. This could be as easy as display a full-screen blunder summary — “Oops! Something bad happened. Please check your tie and try again” — with a vast “Reload” symbol below.

How To Wrap It

Developing a hybrid mobile app means regulating a same collection and processes that we would customarily use to rise (mobile) websites. Having pronounced that, one thing we unequivocally like about a hybrid proceed is that we can muster HTML, CSS and JavaScript formula as a mobile web app with relations ease. Make certain to exercise fallbacks for local features, or find superb workarounds if they are not upheld during all. Most mobile developers cite to keep users in a local app, and we could even publicize a app to your mobile website’s users.

⁶⁵

A local WebView wrapper, with an HTML, CSS and JavaScript formula base. (View vast version⁶⁶)

What about a local part? Your mobile web app (plain HTML, CSS and JavaScript) will be installed in a WebView, that is an inner browser engine that renders an app a proceed a default browser on a device would describe it (there competence be slight differences — your mileage competence vary). Additionally, local “bridges” are used to display facilities of a device and doing complement by an API to make them permitted with JavaScript. This customarily includes entrance to a device’s camera, residence book, geolocation, record complement and local events (for example, around one of a hardware buttons on Android), to name customarily a few features.

A few cross-platform growth collection yield that local overpass and facilitate a whole routine of jacket it. Let’s dive into some options.

PhoneGap and Apache Cordova

PhoneGap⁶⁷ is positively one of a many renouned collection for cross-platform development. The name itself is mostly used synonymously with hybrid mobile app development.

There has been some difficulty about a name⁶⁸ and propinquity to Apache Cordova⁶⁹, that is understandable. The latter is a top-level Apache plan that was before called PhoneGap. It offers a set of device APIs to entrance local functionality from HTML, CSS and JavaScript formula regulating in a WebView. Now, Adobe PhoneGap is a placement of Cordova — not distinct a proceed Chrome uses WebKit as a engine.

Both are open-source and giveaway to use, with support for all vital platforms and with an active village building all kinds of plugins and extensions.

PhoneGap has made a hybrid lanscape significantly, and many new collection have emerged that offer additional services or that streamline a growth process. They customarily supplement a lot of preference by enabling we to build an app in a cloud, thereby saving we a bid of locally installing all of a opposite tallness SDKs and tools. Each apparatus has a opposite focus, turn of tallness support and price:

• PhoneGap Build⁷⁰


• Telerik AppBuilder⁷¹ (formerly Icenium)


• AppGyver Steroids⁷²


• Appery.io⁷³ (formerly Tiggzi)


• Monaca⁷⁴


• Intel XDK⁷⁵

Sencha Touch

Sencha Touch⁷⁶¹⁵ started out as a UI horizon for a mobile web and has been around for years. Traditionally, developers have used Sencha to build an app while regulating another service, like PhoneGap, to muster it as a hybrid app. Nowadays, Sencha offers this kind of functionality built in for free. Platform support includes iOS and Android (both around Sencha’s possess local packager) BlackBerry, Windows 8 and some-more (via PhoneGap Build).

Trigger.io

At Hojoki, we started regulating Trigger.io⁷⁷ dual and a half years ago given we were looking for a lightweight choice to PhoneGap. Even nonetheless iOS and Android are a customarily upheld platforms, it offers a good set of local APIs, tradition plugins and third-party formation (including Parse pull notifications, Flurry analytics and collection of Facebook’s SDK). Trigger.io’s command-line collection authorised us to confederate a app’s jacket into a Grunt⁷⁸ build process, that is good if we adore automation.

One of a pivotal facilities is Reload⁹¹⁷⁹, that enables developers to pull HTML, CSS and JavaScript updates to an app on a fly. Unlike PhoneGap Build’s Hydration⁸⁰, Reload is privately designed for growth and prolongation apps. This creates it probable to legally bypass Apple’s acquiescence routine to pull bug fixes and iterate quick with A/B testing.

Once a 14-day hearing is up, Trigger.io’s high pricing⁸¹ is substantially a biggest downside for many developers.

With MoSync⁸² carrying left offline a integrate of days ago, Trigger.io seems to be a customarily remaining apparatus that is not compared with PhoneGap.

Test on Real Devices

Building a mobile app with web technologies apparently tempts us to do many of a contrast in a web browser. This competence be excellent when building non-native features, nonetheless unequivocally equivocate it when releasing. Test with as many manufacturers, platforms and form factors as probable before submitting a app. Android’s fragmentation brings unconstrained possibilities of differences in browser rendering, unsupported facilities and manufacturer modifications. While iOS does many improved with digest differences, Apple has a flourishing array of inclination with varying sizes, resolutions and pixel densities. Check out “Prioritizing Devices: Testing and Responsive Web Design⁸³” to learn more.

When Facebook famously ditched many of a HTML5 and went local in 2012, it cited blank debugging collection and developer APIs⁸⁴ as one of a categorical reasons. LinkedIn drew a same conclusions⁸⁵ half a year later, saying that HTML5 itself is ready, nonetheless elementary collection and a ecosystem don’t support it yet. From what I’m seeing, a conditions is removing better, with remote debugging in WebView on Android 4.4+ and an augmenting array of growth collection on all platforms:

• “Web Inspector⁸⁶,” Safari (iOS)


• “Remote Debugging on Android with Chrome⁸⁷”


• “Debug Store Apps in Visual Studio⁸⁸” (Windows Phone 8.1), Windows Dev Center


• Weinre⁸⁹ (for everything), Patrick Mueller


• Edge Inspect⁹⁰ (for iOS and Android), Adobe

Start Thinking in Terms of Hard Releases

When building an app for web browsers, deploying a prohibited repair to users is a elementary step, that means that contrast can remove some of a importance. This apparently needs to be reconsidered when you’re releasing an app by an app store. Think of it like program growth in a ’90s: You’re now vital in a universe of tough releases.

So, given is this bad? First, a acquiescence routine could simply take a week or dual (Hello, Apple!). Secondly, even if your prohibited repair is expelled quickly, that doesn’t pledge that users will refurbish a app any time soon. Here are my suggestions:

1. Make contrast a high priority.


2. Have some kind of “force update” proof to depreciate aged customer versions.


3. Use mechanisms like Trigger.io’s Reload⁹¹⁷⁹ to repair formula on a fly.


4. Apply for an expedited app review⁹² (Apple only) if we need to be fast.

Get It in a Stores

The collection mentioned above separate out a binary for any platform, that can afterwards be submitted to a applicable store. From this indicate on, a routine is accurately a same as edition a “normal” local app. Some of a collection we’ve looked during competence even have improved support for this. Nevertheless, here are a central guides:

• “App Distribution Guide⁹³,” Apple


• “Get Started With Publishing⁹⁴” and “Launch Checklist⁹⁵,” Android Developers


• “Publish for Windows Phone⁹⁶,” Windows Dev Center

Conclusion

Now that a hybrid mobile apps have been in Apple’s App Store and in Google Play for dual years, I’d like to reproduce some of a advantages and drawbacks mentioned during a commencement of this article.

For us, a web startup association with unequivocally singular resources and no local iOS or Android experience, building an app for mixed platforms in customarily a few weeks would have been impossible. Choosing a hybrid trail enabled us to reuse a lot of formula from a web app and to iterate quick formed on user feedback. We’ve even managed to tell local apps for Windows 8 for a desktop and Microsoft Surface as good as Mac OS X with accurately a same formula base. The bid of relocating to another tallness will count mostly on a capabilities of a given browser and device and on a turn of your need for local functionality. We indispensable pull notifications, in-app purchases and entrance to a user’s contacts, among other things. Depending on your needs, a lot of local functionality could make we heavily contingent on a local jacket apparatus that we choose.

Finally, let’s see either hybrid apps unequivocally can broach a local demeanour and feel. Below is a gathering of user reviews from a app stores. Both certain and disastrous comments are included, nonetheless many of a disastrous reviews are for early releases, that had a same UI for all platforms and was partially delayed in performance.

★ Great idea, nonetheless not a good app. The app runs intensely delayed on my Samsung Galaxy Ace and Tab. The app also looks and controls like an iPhone app. This is treacherous when we have never had an iPhone.

★★ Another reason apps should not use WebViews for UI.

★★ Service good nonetheless WebView app sucks.

★★★ It’s a right app in concept, nonetheless it unequivocally is too laggy to be most used. And I’m regulating Jellybean so there is no excuse.

★★★ It lags a lot and a UI is not beautiful.

★★★ Good nonetheless unequivocally unequivocally slow.

★★★★ This app is unequivocally handy, nonetheless is a tiny delayed to foot up.

★★★★★ This is operative unequivocally tough good given a update. It’s a good app to start with and now it’s operative smoother and faster than before.

★★★★★ Extremely well-spoken and effective.

★★★★★ The app work flawlessly…

★★★★★ Beautiful designed app! Love a interface and a good overview of all your tools! Good job! Keep shippin!

★★★★★ This is an positively pleasing total that runs buttery smooth, even on a 3GS. Recommend to anyone doing any arrange of project.

We’re unequivocally relocating divided from platform-specific app growth and towards a many new technologies that are emerging. Larry Page pronounced this⁹⁷ when asked during Google I/O final year about a destiny of a web:

In a unequivocally prolonged term, we don’t consider we should have to consider about, as a developer, am we building for this tallness or another, or something like that. we consider we should be means to work during a many aloft level, and program we write should run everywhere, easily.

The (mobile) web is a vital success story in this regard. Being means to use this tallness and still be means to discharge an app in all stores is a outrageous step forward. It will be engaging to see how this all plays out. Whatever happens, regulating a record that over a third of a world’s population⁹⁸ (over dual thirds in Europe and a US) relies on substantially won’t be a bad choice.

(da, al, ml)

Footnotes

1. 1 http://www.visionmobile.com/product/developer-economics-q3-2014/


2. 2 http://www.visionmobile.com/product/developer-economics-2013-the-tools-report/


3. 3 http://www.phonegap.com


4. 4 http://www.trigger.io


5. 5 https://xamarin.com/


6. 6 http://www.appcelerator.com/titanium/


7. 7 http://www.embarcadero.com/products/rad-studio/fmx


8. 8 https://developer.apple.com/library/ios/navigation/


9. 9 http://developer.android.com/design/index.html


10. 10 https://dev.windowsphone.com/design


11. 11 http://www.telerik.com/kendo-ui


12. 12 http://ionicframework.com/


13. 13 http://jquerymobile.com/


14. 14 http://onsenui.io/


15. 15 http://www.sencha.com/products/touch/


16. 16 http://chocolatechip-ui.com/


17. 17 https://github.com/jakiestfu/Snap.js


18. 18 http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/


19. 19 http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/


20. 20 http://de.slideshare.net/yaelsahar/tapping-into-mobile-ui-with-html5


21. 21 http://jsfiddle.net/prud/dnebx02p/


22. 22 http://david-smith.org/iosversionstats/#retina


23. 23 http://developer.android.com/about/dashboards/index.html#Screens


24. 24 http://caniuse.com/#feat=svg


25. 25 http://responsiveimages.org/


26. 26 http://www.uifuel.com/hd-retina-display-media-queries/


27. 27 http://iosfonts.com/


28. 28 http://developer.android.com/design/style/typography.html


29. 29 http://msdn.microsoft.com/library/windows/apps/hh700394.aspx#ux_font_choice


30. 30 http://support.apple.com/kb/HT5956


31. 31 http://mir.aculo.us/2013/09/16/how-to-create-a-web-app-that-looks-like-a-ios7-native-app-part-1/


32. 32 http://caniuse.com/#feat=fontface


33. 33 http://ionicons.com/


34. 34 http://ios7-icon-font-demo.herokuapp.com/


35. 35 http://www.spiderflyapps.com/downloads/android-developer-icons-the-font/


36. 36 https://github.com/Turbo87/Android-Action-Bar-Icon-Pack-Font


37. 37 http://modernuiicons.com/


38. 38 http://fontello.com/


39. 39 https://icomoon.io/app


40. 40 http://fontastic.me/


41. 41 http://msdn.microsoft.com/library/windows/apps/jj841126.aspx


42. 42 http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/


43. 43 http://estelle.github.io/mobileperf/


44. 44 http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/


45. 45 https://developers.google.com/speed/articles/reflow


46. 46 http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/


47. 47 http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/


48. 48 https://github.com/ftlabs/fastclick


49. 49 http://jsfiddle.net/prud/x9y6cfhg/


50. 50 http://fgnass.github.io/spin.js/


51. 51 http://www.queness.com/post/9150/9-javascript-and-animated-gif-loading-animation-solutions


52. 52 http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/


53. 53 http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/


54. 54 https://github.com/filamentgroup/Overthrow#browser-support


55. 55 http://iscrolljs.com/


56. 56 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/


57. 57 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/


58. 58 http://androidwidgetcenter.com/android-tips/how-to-refresh-gmail-on-android/


59. 59 http://dwcares.com/pull-to-refresh-2/


60. 60 https://github.com/prud/ios-overflow-scroll-to-top


61. 61 http://jsfiddle.net/prud/r7kqr1a3/


62. 62 http://quojs.tapquo.com/


63. 63 http://hammerjs.github.io/


64. 64 http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries


65. 65 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg


66. 66 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg


67. 67 http://phonegap.com/


68. 68 http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/


69. 69 http://cordova.io


70. 70 https://build.phonegap.com/


71. 71 http://www.telerik.com/appbuilder


72. 72 http://www.appgyver.com/


73. 73 http://appery.io/


74. 74 http://monaca.mobi


75. 75 https://software.intel.com/html5/tools


76. 76 http://www.sencha.com/products/touch/


77. 77 https://trigger.io


78. 78 http://gruntjs.com/


79. 79 https://trigger.io/reload/


80. 80 http://docs.build.phonegap.com/en_US/tools_hydration.md.html


81. 81 https://trigger.io/pricing/


82. 82 http://www.mosync.com/


83. 83 http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/


84. 84 http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html


85. 85 http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/


86. 86 https://developer.apple.com/safari/tools/


87. 87 https://developer.chrome.com/devtools/docs/remote-debugging


88. 88 http://msdn.microsoft.com/en-us/library/windows/apps/hh441472.aspx


89. 89 http://people.apache.org/~pmuellr/weinre/


90. 90 http://html.adobe.com/edge/inspect/


91. 91 https://trigger.io/reload/


92. 92 https://developer.apple.com/appstore/contact/appreviewteam/index.html


93. 93 https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html


94. 94 http://developer.android.com/distribute/googleplay/start.html


95. 95 http://developer.android.com/distribute/tools/launch-checklist.html


96. 96 http://msdn.microsoft.com/library/windows/apps/jj206736.aspx


97. 97 http://youtu.be/9pmPa_KxsAM?t=2h56m6s


98. 98 http://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users

↑ Back to topShare on Twitter

Hybrid Mobile Apps: Providing A Native Experience With Web Technologies