Enterprise Mobile Application Development: Native or Hybrid?

Enterprise Mobile Application Development: Native or Hybrid?

Enterprise Mobile Application Development: Native or Hybrid? SevenTablets 855-285-2322 Contact@SevenTablets.com http://www.seventablets.com Copyright 2014 SevenTablets SevenTablets All Rights Reserved If you wish to publish the content of this white paper for any reason, written permission must be obtained via Contact@SevenTablets.com.

Native or Hybrid? At SevenTablets we re often asked, native or hybrid? The answer, like most technical questions, is a resounding, It depends. The capabilities of both native and hybrid applications have exploded in recent years, creating a new set of advantages and disadvantages for each approach. In the past, native applications for mobile devices often offered developers more versatility and users better performance than hybrid applications. But that s no longer the case. In fact, at SevenTablets we re increasingly choosing hybrid applications as the best option to meet the needs of our customers and our own internal app development. In this whitepaper, we bring the reader up to date on the developments that have made hybrid app development the preferred approach in an increasing number of situations. If your company has a BYOD policy, hybrid applications maximize your investment because you can reach more enterprise users. Hybrid Applications Hybrid applications are similar to web applications, but with an important difference: they give you access to platform capabilities. On iphones, for example, you can access the Global Positioning System (GPS), accelerometers, the address book and other features of ios. With Hybrid iphone apps most code and the look and feel is delivered with HTML5 and its standards, which include HTML, CSS, and JavaScript. The hybrid app is just like a real application except the programmer used web techniques to display and manipulate 3 data. By contrast, a native app uses the native languages, screen layout, and direct access to the application programming interface (API) to do the same thing. The Benefits of Hybrid Hybrid applications offer a number of fundamental benefits. Common building blocks. Developing hybrid applications is very similar to the simplicity and versatility of building websites because in most instances HTML and JavaScript are used. As a result, there are many tools, libraries, and techniques to draw upon. Because the environment is HTML and therefore feature rich, there are no limitations for look, feel, animation, and even 2D/3D drawing and animation. Multi-platform. Hybrid applications are multiplatform, which means they can be used on most devices. This is extremely important for customers and partners that make their own choices about what devices to buy. If your company has a BYOD policy, hybrid applications maximize your investment because you can reach more enterprise users. Access to native features. In developing a hybrid application, we keep as much as we can in the HTML5 environment, but we also can access native features. For example, we may need to access a native library or access a feature not available in the native platform. As a result, we never need to sacrifice native for HTML5 because we always have both. Optimizing Hybrid for Performance One of the criticisms of early hybrid applications was performance. But there are methods and architectures that overcome

this limitation and dramatically increase performance. Figures 1 and 2 are graphics of two architectures. Figure 1 is how traditional web pages are written. The pages are loaded one at a time, usually from a server. With this design, there is a lot of latency when loading each page, and if you go back and forth between pages, you repeat the task. Figure 1. Traditional web application. Figure 2. Single page app. Figure 2 is how hybrid applications should be built. One html page is loaded that contains most of the user interface. Moving between pages and changing data is done by dynamically controlling the structure and properties in the page. Speed is boosted because there is no latency to load a page and the data for the rendering is reused when it s made visible to the user. Switching pages is simply hiding or revealing a section of the HTML document. Javascript and CSS are used to change the dynamic parts of the pages. Usually a framework like JQuery Mobile is used. Applications that feel exactly like a native app use the single page or framework architectures. One load of the page and quick access to device data lead to nearly the same performance as a native application in most cases across all platforms. The primary downside of this technique is that there is a larger memory overhead on large applications that needs to be optimized. A third method (not shown) is to render the user interface dynamically. Using libraries, templates, and a framework to create the user interface dynamically as needed. This method is similar to a single-page application, but substitutes mostly static pages with code. With this technique, rendering is more dynamic at runtime to account for specific platforms, styles, and especially data. The developer also has more control of the behavior. Frameworks like Sencha Touch follow this approach, though they are often mixed with a framework of html like the example in Figure 2. Though generally a good technique, complex user interfaces are harder to debug than a single page app. In addition to choosing the right architecture, there are many tweaks in hybrid app development that can eliminate wasted time. One good example is clicking performance. In a standard web page, the browser is built to accept several touch events like double tap, pinch, etc. The problem is that for buttons, lists, and other clickable interfaces, we only need to know if the user has clicked. The browser, however, has to wait to see if the user is performing another type of action before it finally settles on generating the click. By bypassing touch events, we can eliminate onethird of a second or more for a simple click. This does not sound like much, but it is critical to make the app feel like it is native. In fact, 4

The choice between hybrid and native is never black and white. The trend, however, is toward an HTML5 hybrid platform, primarily because of the reduced development costs. 5

native apps are doing the same thing, which is why this technique yields the results it does. Hybrid App Development Best Practices Developers creating hybrid applications often copy their web applications to mobile without any or limited redesign. This creates numerous problems, including: Bloated libraries built to handle legacy browsers and larger screens Dependency on web server content which creates long load times Non-mobile components that are not optimized for touch or viewing on smaller screens Large pages of navigation and data that cause a slowdown of page views. To avoid these problems, there are several best practices that can be used to create a hybrid application that performs like a native app. These include: IBM Worklight can significantly reduce the overhead of managing and supporting a cross-platform app. Only communicate data, not web pages to servers Cache data locally on the phone for responsiveness Design explicitly for mobile interface Use only mobile versions of libraries. The good news for mobile apps is that many of the things you need to create great apps are in the various hybrid frameworks. Many companies are rushing in to support app companies 6 with goals to increase productivity and optimize performance. The only issue now is selecting the right mix for your company s needs and your development team and/or partners. Native Applications The Advantages Native apps have one huge advantage over hybrid: direct access to the native libraries and device capabilities. Every bell and whistle is exposed to the developer and easily used. Native applications can also be fast. Fast is a relative term because how fast depends on the developer, techniques, network speed, device version, etc. In general, native apps should have an edge over hybrid apps, but again, how fast depends on developers and what they are doing. As discussed earlier, hybrid apps can deliver comparable performance if designed by developers who know and adhere to best practices. The Drawbacks Having access to the core platform in native applications has its drawbacks. Fragmentation. The primary problem is fragmentation of the platform and devices. Fragmentation is the variance between devices and the versions of software they support. This can mean that you need to maintain many versions of your code. So far, ios seems to limit fragmentation because most users update their OS regularly and Apple has limited the changes to their platform. Apple limits changes to hardware to be mostly backward compatible, so most older software will still run on newer devices. Cross platform compatibility. The biggest disadvantage is cross-platform incompatibility. Each native platform is almost completely

different. They don t even use the same computer languages. At most, if writing a 100 percent native app, the best you can share is your visual design and maybe the database, which is similar on most platforms. Choosing native, hybrid, or a mix will depend on your mobile strategy, your capabilities, and the goals for each app you produce. For apps that depend on network-based services, there is a little better story. Any server-based code accessed as web services or REST (Representational Set Transfer) and other common protocols will help to reduce the cost of cross-platform code. If your server code changes, you need to ensure that all platforms you support are updated either at the same time or you need to support multiple versions of your server interfaces until all platforms are updated. App Frameworks App frameworks are a secondary consideration in your native versus hybrid decision. For example, CodeNameOne is a hybrid environment that allows users to write Java on multiple platforms. CodeNameOne can operate at near native levels on ios and is using the same language as Android, so it is equivalent to Android but using its tools and frameworks to remain compatible across ios, Android, Windows, and Blackberry. IBM Worklight, a Mobile Enterprise App Platform (MEAP), supports creating multiple versions of both HTML5-based apps and all or partial native apps while managing a cross platform build, test, and enterprise connectiv- 7 ity. A MEAP like Worklight can significantly reduce the overhead of managing and supporting a cross-platform app, especially if most of the code is in HTML5/JavaScript. Summary Choosing native or hybrid for your applications has changed significantly in the past couple of years. With new libraries and hybrid frameworks, we can build hybrid applications that behave similarly to native applications for most tasks. The choice between hybrid and native is never black and white. The trend, however, is toward an HTML5 hybrid platform, primarily because of the reduced development costs. Even if you need to support native sections of code, most of the design should work across many platforms. Hybrid apps look and sound like a good choice for many business. But choosing native versus hybrid is just the start of your journey. Today there are several hybrid frameworks and some that support other programming languages like Java, C# or Ruby. Some frameworks, like IBM Worklight, have tools and built-in support for enterprise apps while others like Adobe are bare bones with just enough framework to get you started. You also need to understand third-party libraries and tools that are available on each of these platforms. To summarize the highlights, we have included the following table that compares the general capabilities of hybrid and native platforms. Choosing native, hybrid, or a mix will depend on your mobile strategy, your capabilities, and the goals for each app you produce. Our best recommendation is to work with seasoned mobile experts to make the best decision that meets your business needs.

At-a-Glance: Hybrid vs Native Application Development (Winner, Loser, Caveat) Topic Hybrid Native Distribution App store or MDM App store or MDM Updates Language Performance App store for native extensions, but JavaScript and other HTML5 can update as needed. JavaScript or languages that target JavaScript. Very Fast (see Optimizing Hybrid Performance) Must be done through web store. Native platform: IOS c/c++/objectivec Android: Java Very fast Cross Platform Yes, all modern phones No Data Storage Files and SQLite Files and SQLite Offline Access Does not require connectivity Does not require connectivity Native Look CSS and components require extra work for pixel perfect native look. It is native and it looks native Creative Freedom of Design Access to Platform API Anything you can imagine Full access to common features like camera, GPS, Address Book, but requires native to hybrid plugins. Native components or custom components. Hard to execute out of the box designs. Full access, but varies by platform We are mobile, and we know mobile. When you work with SevenTablets to create your enterprise-grade mobile app, you ll work with world-class mobile developers, designers, and marketers who have the expertise to help you choose the best platform for your mobile app. Contact us by email at contact@seventablets.com or toll-free at 1-855-285-2322, or visit our website at www.seventablets.com. 8