How to build a hybrid app that performs like native — yes, it can be done

The “hybrid versus native” debate touches on legitimate concerns of developers and business strategists alike. When evaluating these options for mobile app development, organizations are forced to choose between the cross-platform reach and single code base appeal of hybrid apps and the performance and tooling of native apps. It’s a tricky choice, and it’s one that leaves many wishing that a “best of both worlds” solution existed.

Fortunately, the line between these two choices is blurring by the day, and hybrid is reaping all the benefits. Each successive update to mobile operating systems like iOS and Android comes with an increasing number of improvements to the execution speed of JavaScript. We’re quickly moving from built-in speeds of “good enough” to “really good” and beyond in short order.

And while performance improves to shrink the gap with native, the hybrid tooling landscape is maturing by leaps and bounds, as well. There are now myriad mature and compelling solutions offering everything from native UI and device APIs to simulators, SDK management, on-device debugging, and more. It’s no wild West out there anymore. Hybrid app development is for real. The hybrid approach isn’t a one-size-fits-all solution, of course, and there are still cases where native is the better choice, but hybrid is no longer a second-tier option.

Editor’s note: Developers! If you’re good and want to be great, our upcoming DevBeat conference, Nov. 12-13 in San Francisco, is a hands-on event packed with master classes, presentations, Q&As, and hackathons, all aimed at boosting your code skills, security knowledge, hardware hacking, and career development. Register now.

That said, even if your organization chooses the hybrid path, a wonderful experience is no more guaranteed by default than it is on native. Just as it’s possible to take the great tools and built-in performance of native and build slow, clunky apps — something that we’ve all experienced in the form of native apps that inexplicably crash or refuse to open — better JavaScript performance on devices and robust tooling doesn’t guarantee a great hybrid app.

Instead, great hybrid apps happen as a result of careful planning and consideration of the unique capabilities of the web platform on devices. Before you set out on your next hybrid app adventure, it’s important to carefully consider critical features like performance, to take lessons from native where possible and most of all, to choose the right tools to help fill in the gaps.

Hybrid means freedom of choice

One of the biggest problems with the hybrid vs. native debate is that it’s a bit of an apples-to-oranges comparison. In the native camp, for instance, building an app for iOS means you’ve automatically chosen an IDE (XCode) as well as a series of libraries and abstractions on top of Objective-C designed to make your life easier (CocoaTouch, CoreGraphics, CoreData, etc.). To then turn around and compare this rich stack only to HTML, JavaScript, and CSS inside of a mobile browser or a WebView container like Apache Cordova seems a bit disingenuous, and it ignores the obvious cross-platform benefits inherent to the hybrid approach.

And while it is true that the web platform doesn’t have a default development stack, that doesn’t mean for a moment that hybrid apps must be built without robust tools. Quite the contrary. In fact, the beauty of hybrid is that it enables cross-platform development with a single language stack, while also freeing you to choose the combination of IDEs, frameworks, tools, and services that best fit your business. When comparing hybrid and native, think of it as freedom of choice as opposed to a single, vendor-blessed solution per platform.

Hybrid means performance is a design feature

Regardless of your tools of choice, planning for performance is critical. Often, when developers build apps, they defer performance tuning to the end of a project. The classical approach is to build it, then make it fast. And while it’s still possible to get away with this attitude in a desktop setting, it’s a non-starter on resource- and battery-constrained devices.

When building hybrid apps, it’s entirely possible to build lightning-fast apps that feel native, and the best way to do so is by planning for performance from the start. For instance, an early decision you may want to make is if your app needs to run at 60 frames per second (fps). If so, that means that you have just under 17 milliseconds per frame to run app code (populating objects, responding to user and browser events) and update your app’s UI. It’s not much time, and if parts of your app cause the frame budget to be blown, your users will notice and your app will start to feel a lot less native. In these cases, it’s better to shoot for a consistent 30 or 40 fps, which will feel just as natural to your users, as long as you keep the rate consistent.

Another way to design for performance in your apps is to consider how your UI design affects performance. And while the JavaScript in your hybrid app influences performance to a great degree, so does your CSS as well. Shadows, gradients, and other skeuomorphic ornamentations may look realistic, but they can be expensive to paint on the screen and even more expensive to animate. Does your app really need ornamentations like box-shadows and gradients, or will a flatter UI style suffice? Complex UI styles and ornamentations are costly, so it’s important to consider how vital these design elements are to the overall purpose of your app.

Hybrid means learning from native

In addition to planning for performance, it can be useful to study the way that native SDKs behave under certain conditions and emulate those in a hybrid setting. Consider a very common mobile pattern: scrolling through a list of data. In iOS, the control that enables scrolling is the UITableView. One of the ways that this control guarantees great performance and responsiveness is by re-using individual cells in the table as the user scrolls them off screen, a technique known as UI virtualization. Once a cell disappears from view, it’s pushed back below the screen and populated with the next item in the collection. This allows iOS to give users the impression that they are scrolling through a giant list of data, when only a handful of actual cells are being used. The end result is a very fast, battery-preserving implementation.

What can we learn from this in a hybrid setting? Lots, actually! If you think of cells in a UITableView as HTML DOM elements, it’s easy to see the implication for hybrid apps. In a hybrid setting, developers can reuse, or virtualize, DOM in a similar manner, which greatly improves the scrolling experience on mobile devices, as well.

The hybrid approach is appealing because it allows us to use familiar web technologies to build apps for devices, but it’s important not to fall into the trap of treating hybrid apps as mini, self-contained websites. While it’s possible on the web to largely ignore concerns like UI virtualization, battery life, and memory management, these are real issues on devices, for both native and hybrid apps. To effectively build hybrid apps, it’s important to pay attention to how native platforms and SDKs solve common app design concerns and apply these to our own apps.

You need great hyrbid dev tools

It’s all well and good to plan for performance and emulate the characteristics of native apps, as I described above, but there’s no arguing the value of what native frameworks and SDKs provide to developers out of the box. That’s why to really adopt hybrid for cross-platform app development, you need great tools. There are lots of tools and frameworks to choose from, but a great hybrid tool is one that closes the gap between the built-in capabilities of the web platform and what native SDKs provide by default. As a result, you can rely on great performance in your hybrid app, because your hybrid tools are built with performance in mind. It means you can benefit from great native patterns, because your tools were built to emulate those patterns on your behalf. Of course, you can always go framework-free and be successful, but when cross-platform reach and time-to-market are at the top of your requirements list, you’d be wise to consider pairing hybrid with one or more great tools.

Great hybrid apps don’t happen by accident. Just as is the case with native, hybrid apps require attention to performance and an understanding of unique mobile design patterns. Thankfully, web technologies on mobile are faster than ever, and a great choice for building cross-platform mobile apps in a flash. With a bit of performance design and the right set of tools, you’ll find that you have everything you need to deliver compelling experiences across a wide array of mobile devices.

Brandon Satrom is a Program Management Lead for Cross-Platform Tools and Services at Telerik.