Short overview about web, hybrid and native apps

It is been always a big debate whether it is better to build a native app, hybrid or usual website. Things have changed in mobile world since the time when Facebook decided to go native back in 2012. Some companies like Basecamp give another try for hybrid apps.
So how was it in the past and what things have changed? Let me shortly clarify what means native, website, hybrid, web clips.
Native app
Native apps are installed through an application store such as Google Play or Apple’s App Store and live locally on a device. They can be accessed through icons on a device home screen. Such apps are developed specifically for one platform and take full advantages of all device features through available platform API (camera, GPS, accelerometer, compass, contacts, etc).
Website is running in a browser and all content is stored on the server(not on a local device). Website can be accessed through URL. Websites developed for multiple platforms and take full advantages of available APIs through HTML5, CSS, JavaScript (camera, GPS). The number of APIs is way less than on native apps.
Hybrid apps are partly native and web apps. They can be installed through an application store in the same way as native apps. The content can be stored locally on a device as well as on a server. Such apps are developed for multiple platforms though require specific platform depended code to run web pages. In order to run web pages an app needs to use UI WebView API specific for each platform. This UI WebView is a platform default chromeless browser but has some differences to a usual browser(will talk about this later).  Such apps take full advantages of native and web apps APIs.
Web Clips
Pretty much the same as usual website but runs in full screen mode (chromeless browser). It is possible to access an app through icon on home screen. Installation can be done in a browser by bookmarking a page to the home screen. It takes all advantages and disadvantages of websites.
Advantages of native apps are pretty obvious:

  • Multi touch gestures.
  • Fast graphic and fluid animation. This is especially important in gaming, highly interactive apps, computational algorithms to work with video and sound.
  • Built-in APIs. They are camera, GPS, contacts list, compass, offline storages, encryption, notifications, etc.
  • Performance metrics like startup time.
  • User interface. Consistent with operation system user experience might be a high priority for an app.

Disadvantages (just few the most important):

  • Installation is a hassle for users. A user should be really motivated to justify the effort. Bookmarking web pages seems simpler  but on practise is less familiar to users.
  • Maintaining can be a challenge because an app has to be packed and published to apps store for review process. Especially it can be a challenge if developers need to maintain several versions for several platforms.
  • Development and testing cost. Your team has to have skills to develop an app for each platform and maybe even device form factor.

Advantages of hybrid apps are:

  • write-once-run-anywhere” – with HTML5 and responsive design it is possible to combine all platforms and all devices factors in a single app(though it requires more time and skills to maintain). It is also possible to have a usual website based on the same codebase.
  • Updates can be delivered to a user immediately. User doesn’t need to manually update an app. This is very good for continues delivery process. Of course there might be a situation when UI WebView should be updated though it should not happen often. In this case an app should be published to app store.
  • Offline capabilities are available though require much more implementation time comparing to native apps. There is still a limitation of how much data it is possible to store on a device. There’s a rumour that Apple doesn’t not allow hybrid apps which don’t work offline.

Disadvantages (just few the most important):

  • Development time: HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are fairly advanced skills.
  • App performance

Hybrid App performance has been always a major obstacle. It hasn’t changed much.
When people talk about performance problems most of the time they mean JavaScript. In iOS Mobile Safari JavaScript engine is called Nitro. Nitro in mobile Safari just-in-time (JIT) compiles JavaScript into native machine code, rather than interpreting it. According to some benchmarks, JIT compilation in Nitro can improve the speed of JavaScript execution by 200% to 300%. So NItro performs very well and does the same good job as Google Chrome V8 JavaScript engine in terms of performance. However when a browser is used through UI WebView in hybrid apps there is no JIT and code doesn’t get compiled into native machine code. This is why it is slow.
This is how the situation was in 2012 (iOS version 5) and it is still the same. There is no JIT because of Apple’s security policy.
The good thing is that Nitro has been improved since that time and works faster now. To add more JavaScript itself has never been a bottleneck but DOM manipulations, animations and transitions implemented in a wrong old-style way have always been a bottleneck.
The latest browsers support hardware accelerated CSS3 animation properties, providing smooth motion for sliding panels as well transitions between screens. However even that can’t match the power and flexibility of native apps. The question is how much and complex animations and transitions your app needs?
Regarding Web Clips – although it runs through UI WebView it still uses Nitro with JIT so Web performance is the same as in usual Mobile Safari. It was changed in iOS version 6. Maybe Apple wants to enable JIT for all UI WebView hybrid apps some time later? Who knows.
Android was the worst platform until Android v4.4 primarily because of default browser and tools for web development and debugging hybrid apps.
Android 4.4 (KitKat) includes a new WebView component based on the Chromium open source project. The new WebView includes an updated version of the V8 JavaScript engine and support for modern web standards that were missing in the old WebView (or so called the Internet browser) It also shares the same rendering engine as Chrome for Android, so rendering should be much more consistent between the WebView and Chrome. Speaking more technically the following APIs (in addition to existing e.g. Geolocation, etc) are now available in current WebView:

  • Server Sent events
  • Web Sockets
  • Web Workers
  • Advanced form input selectors, such as date and time
  • FileSystem API
  • IndexedDB
  • MediaCapture Stream
  • Animation Timing API
  • Page Visibility API
  • Canvas Blend modes
  • CSS3 Flexbox
  • CSS3 Filters

Debugging Android v4.4 hybrid apps is so simple as doing web development in Chrome browser.
More companies develop web and hybrid apps nowadays. For example Netflix, Walgreens and NY Times.
Todd Anglin, a EVP at cross-platform development toolmaker Telerik said in a statement. “The choice between native and hybrid approaches is dependent on business needs, app requirements, developer skill, development timeline, and other factors.”
UPDATE as of June 6th: since iOS 8 hybrid apps, web clips and any third party browser vendors can benefit from JavaScript Nitro with FTL JIT.