Three options for developing mobile apps: native, HTML5, or hybrid

【51CTO Translation】The screen is so small, the application is so big, and life as we know it has been turned upside down again. In today's increasingly social and open environment, mobile applications play a vital role, and the focus has shifted from Internet applications to mobile device applications. Mobile applications are no longer optional, but essential. You need a mobile application, but where to start?

Many factors play a role in your mobile strategy, such as the development skills of your workforce, the device capabilities required, and the importance of security, offline functionality, and interoperability. Ultimately, it’s not just about what features your app will have, but how you develop a successful app.

Like the girl, you may need to try out several beds to see if they are too soft or too hard before you find the right one. Sometimes there is no perfect choice. Every development scenario has its pros and cons, and those scenarios may or may not be suitable for your development tools. The original intention of this article is to help you smoothly find a method to develop mobile applications that suits you.

While this article discusses mobile application development in general, it is specifically aimed at developers who want to develop mobile applications that interact with Salesforce.com, Force.com, or Database.com. Currently, the Salesforce Mobile SDK enables developers to build these three types of applications:

• Native apps : Native apps are specific to a mobile platform (such as iOS or Android) and use the development tools and languages ​​supported by that platform (such as Xcode and Objective-C for iOS and Eclipse and Java for Android). Native apps look (appearance) and run (performance) best.

• HTML5 apps : HTML5 apps use standard web technologies, typically HTML5, JavaScript, and CSS. This write-once, run-anywhere approach to mobile development builds cross-platform mobile apps that can run on multiple devices. While developers can build sophisticated apps using HTML5 and JavaScript alone, there are some significant limitations as of this writing, including session management, secure offline storage, and access to native device features (camera, calendar, geolocation, etc.).

• Hybrid apps : Hybrid apps allow developers to embed HTML5 apps into a thin native container, combining the advantages (and disadvantages) of native and HTML5 apps.

Native mobile apps

In short, native apps offer the best ease of use, the best features, and the best overall mobile experience. Here are some features that can only be achieved with native apps:

•Multi-touch : Double-tap, pinch-to-zoom, and other combined user interface (UI) gestures.

• Fast Graphics API : The native platform provides you with the fastest graphics display. If you are displaying a static screen with only a few elements, this feature may not be important, but if you are working with a lot of data and need to refresh quickly, this feature is very important.

• Smooth animation : Related to the fast graphics API is the ability to achieve smooth animation. This is particularly important in animations, highly interactive reports, or computationally intensive algorithms for converting photos and sounds.

• Built-in components : Camera, address book, location and other native features of the device can be seamlessly integrated into the mobile application. Another important built-in component is encrypted storage, which will be described in detail later.

•Ease of use : Native platforms are platforms that people are familiar with, so if you add all the native features people expect on top of that familiar platform, you have an app that is completely easier to use.

• Documentation : There are more than 2,500 books on the market that only introduce iOS and Android development, and there are countless articles, blog posts, and detailed technical posts on websites such as Stackoverflow.

Native applications are usually developed using an integrated development environment (IDE). An IDE provides tools for building, debugging, project management, version control, and other tools that professional developers need. Although iOS and Android applications are developed using different IDEs and languages, there are enough similarities in the development environments that there is no need to delve into the differences. In short, you use the tools that the device requires.

You need these tools because native app development is harder. Likewise, it requires more development experience than other development scenarios; you can't just cut and paste Objective-C and expect it to work. Indeed, the technical expertise of the development team is an important consideration. If you're a professional developer, you're probably already familiar with mature and reliable APIs and frameworks, the easy effects that can be achieved with pre-built components, or the benefits of having all your code in one place. Let's be honest, these days a skilled native iOS or Android developer is a rock star and can make rock star demands.

While we've discussed native apps from a development perspective, let's not forget about a more important perspective: the end user. If you're looking for an app, you can find it in the App Store. If you run the app, it launches instantly. If you use the app, you get fast performance and a consistent platform look and feel. If your app needs an update, it tells you that it needs an update. Native apps give you everything you expect from the company that made the device you own, as if that's what the app was designed to do.

HTML5 Mobile Apps

If you are new to mobile app development, you are late to the party. However, we are still in the early days when it comes to web-based mobile apps. Sure, browsers have gotten better over the years, but the underlying technology has remained largely the same.

But this can be a good thing. An HTML5 mobile app is basically a web page or a series of web pages designed to be viewed on extremely small screens. As a result, HTML5 apps are device-agnostic and can be viewed with any modern mobile browser. And because your content is hosted online, it's easily searchable, which can be a huge benefit, depending on the nature of the app (e.g. a shopping app).

If you've developed web applications, you'll naturally love HTML5 and feel comfortable using it. If you're new to web development, the technical barriers to entry are relatively low; it's easier to get started than native or hybrid development. Unfortunately, each mobile device seems to have its own understanding of available screen sizes and resolutions, so there's an added burden: testing on different devices. Browser incompatibilities are especially common on Android devices, so be careful with browsers.

An important part of the "write once, run everywhere" approach to HTML5 is that distribution and support are much easier with native apps. Need to develop a fix or add a feature? Once you're done, you can deploy it uniformly for all users. With native apps, the development and testing cycles are long, and then consumers usually have to log in to the store and download the new version to get the latest fixes.

Over the past year, HTML5 has become an incredibly popular way to build mobile apps. There are now multiple UI frameworks that solve some of the most complex problems that no developer wants to face again. iScroll does an excellent job of emulating fast scrolling. JQuery Mobile and Sencha Touch offer elegant and sophisticated mobile components, and there are hundreds, if not thousands, of plugins that offer everything from carousels to ultra-complex controls.

So, if HTML5 apps are easier to develop, easier to support, and cover the widest variety of devices, where do these apps lose out? We've already discussed the main benefits of native development, so we'll just reiterate one point: you don't have access to the native widgets on the device. Users also don't get the familiar look and feel of native apps, nor can they use the familiar gesture combinations. But there are great strides being made, and browsers are supporting more and more features all the time.

The latest browsers support hardware-accelerated CSS3 animation features, which provide smooth animations for sliding panels and transitions between screens, but even so, it is still no match for the power and flexibility of native applications. Today, it is impossible to capture multi-touch input events (determine when more than one finger is on the screen) and achieve the elegance of path-style with slide-out buttons and photos that float and then fall into place.

However, the significant limitations are in offline storage and security, especially for enterprise mobile apps. While you can achieve the appearance of offline functionality by caching files on the device, this is not a very good solution at all. While the underlying database may be encrypted, it is not as well separated as the native keychain encryption method that protects each application with a developer certificate. In addition, if the web application with authentication mechanism is launched from the desktop, it will require the user to enter login credentials every time the application is sent to the background. This is a bad experience for the user. In general, implementing even trivial security measures on the native platform is a complex task for web mobile developers. Therefore, if security is critical, this factor may determine which mobile technology you choose.

Hybrid Mobile Apps

Hybrid development combines the advantages (and disadvantages) of both native and HTML5. We define a hybrid app as a web application built primarily with HTML5 and JavaScript, then encapsulated in a thin native container that provides access to native platform functionality. PhoneGap is the most popular container for building hybrid mobile apps.

In general, hybrid apps are the best of both worlds. Existing web developers who are already experts at optimizing JavaScript, manipulating CSS to design beautiful layouts, and writing compatible HTML code that can run on any platform can now build sophisticated mobile apps without sacrificing cool native features. In some cases, native app developers can write plugins for tasks like image processing, but in these cases, a lot of the problems are hidden in the details.

On iOS, the embedded web browser or UIWebView is not the same as the Safari browser. Although the differences are minor, they can cause tricky issues while debugging. That’s why it’s necessary to use a popular framework that overcomes all limitations.

You know, native apps are installed on the device, while HTML5 apps reside on a web server, so you might be wondering: do hybrid apps store their files on the device or on the server? That’s right, there are actually two ways to deploy hybrid apps.

• Local : You can wrap HTML and JavaScript code into a mobile app binary, similar to the structure of a native app. In this scenario, you use REST APIs to transfer data back and forth between the device and the cloud.

• Server : Alternatively, you can deploy a standard web application from a server (with optional caching for improved performance), using the container as a thin shell over the UIWebview.

Netflix has a cool app that uses the same code base to run the UI on all devices: tablets, phones, smart TVs, DVD players, refrigerators, and cars. While most people don't know how the app is deployed, or care, it's fascinating that they can quickly change the interface or do A/B testing to determine the best user interactions. The basic work of video decoding and streaming is offloaded to the native layer to get the best performance, so it's a fast, native-looking app that really is the best of both worlds.

Conclusion

The mobile development landscape is constantly changing. Every six months, a new mobile operating system appears with unique features that are only accessible through native APIs. Soon after, containers bring those features to hybrid applications, and the Internet takes a giant leap every few years. Given the current technology, one of the development scenarios described in this article is bound to fit your needs. Here's a table to summarize it:

Original English text: https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options