Hybrid Mobile Apps are Overtaking Native
I typically encounter two types of hybrid app dissenters: those that haven’t tried the approach yet or those that did several years ago. Regardless of your current position, the space has evolved significantly for the better. The native vs. hybrid playing field hasn’t just been leveled — hybrid is taking over! Let’s review the top concerns and see how they’ve progressed.
Performance
This is the #1 concern I hear, though it’s mostly unfounded in 2017. If you looked at PhoneGap between 2008 and 2012, then yes, skepticism was warranted:
2013 was a major turning point. The release of the iPhone 5 began making the hybrid approach viable. Interestingly, this was right after Facebook’s famous debacle on abandoning HTML5 for native.
99% of the time, hybrid works very well, as most businesses are not creating high performance, graphics-heavy game apps. They only need to create, read, update, and delete data (CRUD) with a bit of UX sprinkled on top. Sure, if a game is your end goal, then choose native.
It’s been ten years since the original iPhone was released. Mobile device hardware has come a long way! We now have near desktop-quality processors, 2 to 4 GBs of RAM, and robust operating systems. Each new generation brings improvements.
Along with hardware, JavaScript engines continue to improve. Browser makers are advancing on all fronts: improving single thread performance, GPU speeds, faster memory buses & multi-core through offloading and multi-threading. This iOS SunSpider JavaScript performance test from 2013, while several years old at this point, still speaks volumes:
Every couple of years, there are significant JavaScript engine upgrades, leading to gains of 4x or more. It’s a safe assumption that iOS 10 performance, four OS versions later, has significant enhancements.
Design
A key advantage of hybrid apps is the ability to build for all major app platforms using a single codebase. JavaScript logic execution, with its “write once, run everywhere” mantra, has traditionally worked well: consistent JavaScript features are available on each mobile platform and when native device functionality is needed, plugins abstract away platform-specific details. However, achieving consistent design has proven difficult due to the wide variety of mobile platform WebViews (mini web browsers embedded into a native app shell) available. In particular, Android has been the most difficult, given its thousands of carrier and device combinations.
Fortunately, the situation has improved massively: beginning with Android 4.4, a change to use a Chromium-based WebView was introduced. This was a good first step, but as an embedded system browser, it was only able to receive updates via new OS upgrades, which can be quite rare depending on the mobile carrier. With Android 5.0 and above, the WebView was pulled out of the system and can now be updated via the Google Play store, thus ensuring that users (and apps!) always have the latest and greatest.
iOS has been a lot more favorable for hybrid app developers. WebViews have always utilized Safari, Apple’s flagship web browser. Each OS patch or upgrade brings new JavaScript and CSS engine features. Additionally, it’s easy to drop support for older OS versions over time, since iOS users tend to upgrade to the latest OS immediately. As of July 2017, you can capture 97% of users by supporting only two OS versions:
Now that WebViews have been standardized, achieving consistent layouts across different screen sizes and displays is the most feasible it’s ever been. Developers can use CSS3 flexbox, for example, to create popular layout designs for every mobile device. If like me, you lack a design background, web frameworks can save you. Bootstrap is my favorite, as it is incredibly popular for both desktop and mobile projects. It maintains a focus on responsive, mobile-first projects by using CSS media queries under the hood — perfect for hybrid apps. I’m a big fan of combining either of those with a framework that provides out of the box responsive UI components to assist with creating standard mobile interfaces.
Frameworks
Several open source frameworks have come and gone over the past few years. Now that the dust has settled a bit, there are four top choices: Ionic, React Native, NativeScript, and Xamarin. The Ionic framework provides the ability to cover the most amount of platforms with a single codebase: web apps, mobile apps, progressive web apps (PWAs), and desktop apps (via Electron.js). Ionic apps are built on top of Angular, which means you’ll need to learn it first along with Typescript. Facebook’s React Native is another option. Apps are written in JavaScript, but instead of using web components like “div” or “span”, native components like “View” and “Text” are used, producing a real native mobile app. This approach provides great performance but means that the code can only be used for mobile apps.
Telerik’s NativeScript is another neat option. Apps are written in Angular, TypeScript, or plain JavaScript, then compiled into native code. You’ll need to learn their custom UI layout mechanism (tags such as “<Page>”, “<Image>”, etc. get converted into a specific native representation), but otherwise will reuse your existing JavaScript skills. Microsoft’s Xamarin framework is a bit different than the others — apps are written in C#. This is great for .NET developers looking to try their hand at mobile development. As with React Native and NativeScript, the C# code gets transformed into a native representation.
These four frameworks are wonderful options, but they do require upfront time investment before you can feel productive. If you’re not sure about committing to the hybrid approach, that’s perfectly OK. I recommend getting your feet wet by using plain web technology first; you can always switch to a framework once you feel comfortable picking hybrid over native. My Pluralsight course, PhoneGap Build Fundamentals, follows this approach: besides a bit of KendoUI Mobile for UI components/styling and Knockout.js for two-way data binding, it focuses on plain HTML/CSS/JavaScript.
Tooling
The last aspect of hybrid mobile app development that has come a long way is the plethora of tooling available. Developers can tap into a wide variety of products that assist with everything from debugging to continuous integration to cloud management.
Popular IDEs have evolved to support JavaScript-focused app development out of the box. Visual Studio’s “Tools for Apache Cordova” (TACO) allow developers to write, test, and debug PhoneGap apps on devices and emulators all within Visual Studio. JetBrains’ WebStorm editor provides code completion, advanced error detection, and powerful JavaScript refactoring. Personally, I’m a huge fan of the cross-platform (Windows, Linux, Mac) Visual Studio Code. I easily swap between my MacBook Air laptop and my desktop PC as I move through different work environments.
Each of the app frameworks mentioned above have their own command-line interface (CLI) tools that provide useful app templates to help you get started. Their true power lies beyond initial setup scripts; the Angular CLI, for example, provides local app debugging, end-to-end test execution, and JavaScript code quality reviews.
Web browser developer tools, especially in Google Chrome, have advanced so much that developers typically utilize them all day long. They provide many features, including layout issue resolution, JavaScript debugging, and network performance profiling. Perhaps the best feature for hybrid app developers is the ability to test responsive/device-specific viewports. This gives an idea of what your app looks like on popular devices. While not perfect, it’s incredibly useful, since realistically you’ll never be able to test on every physical device in existence.
Various commercial offerings are also available, that often begin with free plans, such as Adobe’s line of PhoneGap products. The PhoneGap CLI is the most flexible tool, allowing for creating, serving, compiling, and running apps from the command-line. The PhoneGap Desktop app is a simpler alternative to the CLI, enabling developers to get started without worrying about dependencies or commands to memorize. I’m a big fan of the PhoneGap Developer App (develop locally then see changes on your mobile device immediately) and PhoneGap Build (so much so, that I built an entire course around it) — upload HTML/CSS/JavaScript to the cloud and out pops packaged native apps. Among other reasons, it’s wonderful for developers new to hybrid app development as well as incredibly handy for re-building an iOS app when a Mac is not readily available.
Summary
Ionic’s 2017 survey results are eye-opening. (Primarily Web) Developers have spoken: they want to build mobile apps using one codebase, with familiar tools and web technology. Nearly one-third of developers surveyed plan to abandon native development all together over the next two years.
Despite the overwhelming evidence, you may still be skeptical of the hybrid app approach. I encourage you to take a fresh look though, as it’s a great time to be a web developer! Fortunately, due to better device performance, simplified design options, professional mobile frameworks, and advanced tooling, it’s never been easier to jump into hybrid app development.
