Recently, I started learning about mobile app development frameworks called Mobile Angular UI, IONIC, Sencha, KendoUI. They help to develop mobile app using html, javascript and css.
That's when it got me thinking if the above frameworks are hybrid or not.
A Hybrid framework is one which helps to create mobile app using html, css and javascript. But so do mobile apps. So actually what is the difference between Mobile web app and Hybrid mobile apps.And are the above frameworks Hybrid or not??
Originally posted here: Cedcommerce
First of all, let me guide you what actually is a native app and what we mean by Native vs Hybrid mobile apps. A Native app is an application which is built specially for a particular operating system, different application for a different operating system using native language of that particular device.
If you’re still confused about Native app development, it means creating an Android or iOS mobile application using the respective company’s (in this case Google and Apple) SDK(Software Development Kit) and tools.
Two most widely used operating systems are Android and iOS where Android dominates the market with a whopping 86%, while iOS comes at a distant second at 12%.
Native vs Hybrid Mobile App
Worldwide Smartphone OS Market share
Image Credit: IDC
If you are developing for Android, that means writing your apps in Java (or Kotlin) and for iOS, writing your apps in Objective-C or Swift. The main tool Xcode is the integrated development environment in which your developer will create your native app.
Another type of less known Mobile app is called Hybrid app. Hybrid app development means using a 3rd party hybrid platform (examples include React Native, PhoneGap, Ionic, Cordova, or Xamarin) and using web technologies (HTML, CSS, and Javascript) to write a hybrid app that runs on both iOS and Android.
When it comes to Native vs Hybrid mobile apps the hybrid apps can run on any platform – (Android and iOS) – with the same code. This may sound like an advantage over the native apps because writing one app is cheaper than two but don’t get excited so quickly as I will highlight why not to choose the hybrid apps as we go down.
While 79 percent of consumers would retry a mobile app only once or twice if it failed to work the first time, only 16 percent would give it more than two attempts. The poor mobile app experience is likely to discourage users from using an app again. Source
Users experience tops all the other features when it comes to mobile apps, a bad UX will surely help you get your app deleted and there is hardly any chance the user will ever return to your app again.
See How Native Apps provide Faster and User-Friendly Checkout
Talking about mobile apps, the number of downloads surely represents how good and popular an app is but the key factor is the user retention. And It’s a known secret in the mobile development community that mobile app retention is pretty low. According to TechCrunch, one in four mobile users only use an app once.
Retention Curves for Android Apps
Source: Quettra
Native apps are far more superior when it comes to Speed, Responsiveness and therefore scores more in the user retention segment. Native applications have the best performance, highest security, and best user experience.
Talking about native apps a simple yet top-performing solution for your online store is MageNative App
Native vs Hybrid Mobile Apps:
Built-In Features: A native app has better and faster access to device’s native features and inbuilt utilities such as camera, GPS, calendar whereas hybrid app struggles a bit.
Speed: Hybrid applications are web applications (or web pages) in the native browser, such as UIWebView in iOS and WebView in Android (not Safari or Chrome) but native app runs as a standalone application (no web browser needed). Due to this dependency on a native browser, hybrid lags behind a native app.
Responsiveness: Native apps are more responsive compared to hybrid apps since they follow the design pattern for unique platforms but hybrid apps are same for all the platforms.
Offline usage: Since Hybrid apps are dependent on a native browser they are unusable without internet connection in contrast native apps like media players, games, navigation works well offline.
Security: Native apps are stored in an application store and the approval process stops buggy or harmful from being published whereas no such store exists for hybrid apps.
Importance of Security Testing
Source: QArea
App Stores also provides good accessibility if a user wants to search any particular app. Besides, before publishing the app you have the possibility to encrypt everything with standard tools, hide the implementation and so on.
Better UX standards: As I mentioned earlier the problem with a hybrid app is that even the most brilliant user experience architect cannot truly build an app that caters to the two dominant user types: iPhone users and Android users whereas Native app follows the specific UX/UI standards for creating Android or iOS apps, which allow users to easily understand the interface and navigation of the apps. An example of a native app:
Native vs Hybrid Mobile App
Bottom-Line: Native vs Hybrid Mobile Apps
It’s time to finish the Native vs Hybrid mobile app battle with the conclusion that ultimately the user and his needs decide which framework will work best, for me Native apps are better than hybrid apps in almost all the major aspects.
The choice depends on you, if you are looking for a simple app with some basic functions and can handle daily simple tasks go for hybrid app but if you want a more complex app which can make full use of the device’s inbuilt features and handle complex tasks then the native app will be the best choice and you won’t regret.
Anything that wraps HTML/JS code into a native app is a hybrid. The difference is that the hybrid app relies on the UIView (think of it as a minimalistic web browser) to show all the content, while the native apps usually use the UIView only for browsing and have everything else coded in the native language. Basically, the hybrid app is always laid on the UIView and everything happens inside it. Similar to opening a dedicated web page in fullscreen and having access to all (or most) of the native phone features (vibration, sensors, notifications, etc...).
Think of a simple button made using HTML vs. a simple button made using Java/Objective C/C#... That's what hybrid frameworks are trying to make work and look as similar as possible. Hybrid apps require none (or almost none) native language coding.
"So actually what is the difference between Mobile web app and Hybrid mobile apps?"
None of the frameworks above say that. More specifically: none of them mentions mobile web apps with a contrast to hybrid apps because those are the same thing, just different semantics. What the frameworks offer is:
web version of the app (web app)
mobile version of the app (mobile app)
Bottom line:
Anything that is written in HTML/JS/CSS and functions as a native mobile app is a hybrid app.
This article shows the difference between the native app, hybrid app, and a "mobile web app": http://blogs.telerik.com/appbuilder/posts/12-06-14/what-is-a-hybrid-mobile-app-
Be careful, the last one is nothing but a website optimized for phones that can't be installed on a phone as an app, and it should definitely not be mixed with phone apps (native or hybrid). Excerpt from the URL above:
Native apps are built for a specific platform with the platform SDK, tools and languages, typically provided by the platform vendor (e.g. xCode/Objective-C for iOS, Eclipse/Java for Android, Visual Studio/C# for Windows Phone).
Hybrid apps, like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.
Mobile Web apps are server-side apps, built with any server-side technology (PHP, Node.js, ASP.NET) that render HTML that has been styled so that it renders well on a device form factor.
Having all that in mind, all four frameworks you listed above can create mobile web pages (or mobile apps, as they call them), but seems like only Ionic is able to build hybrid apps that you can actually install on the phone (couldn't find relevant info on Sencha, but now you know what to look for).
Agree with all the above said.
Will just add/sum up the pros and cons of Hybrid Mobile Apps (Apache Cordova and React Native).
Apache Cordova
Pros
High development speed
Coded in web development technologies (HTML, CSS, Javascript) that yield cross-compatible iOS, Android, and web software (just one web developer needed)
Frameworks are availalbe that emulate native app UI elements (i.e. buttons, menus, etc.)
UX is very close to a native experience using UI elements that mimic native app behavior
Access to the smartphone’s hardware API, facilitating device functionality (e.g. camera, push notifications, geolocation, and others)
Cons
UX is not as good as it is on native apps (300ms click delays, phantom clicks while scrolling, etc.)
The more complex the application, the slower it works due to the various wrappers and libraries employed
Doesn't work offline
Animations are difficult to implement in the UI
React Native
Pros
High development speed for the React-based apps
Web application built with React.js can be easily converted to a React Native mobile app, and some source code can be reused
Native user experience
Application looks and feels exactly like a native mobile app for a specific platform
Reduces development costs
Experts in React Native can usually build both Android and iOS apps
Cons
Relatively new technology (limited open-source solutions)
Limited with regard to visual design
Not ideal for complex projects like mobile games or apps that require a high load (significant computations)
If you are interested in comparison of Hybrid vs Progressive vs Native app development this article is worth reading.
Related
I would like to make an app for Android and iOS:
Consider a feature-similar app like Uber using the map and its location features, widgets on the map, login screen, camera and WIFI information (what wifi hotspots are available and if it’s private or free, etc). The user also needs to use either paypal or credit card.
What would be better: using HTML5, CSS and javascript or developing a separate app for Android and iOS? Or maybe developing in C++ and creating two UIs for Android and iOS?
Are frameworks (like phonegap) best for high-level apps like games that don't need too much access to native features?
The best thing to do is develop a separate app for Android and iOS.
Making them separate you can maintain the high performance for both operating systems.
And obviously Android and ios have guidelines regarding the graphics very different. So if your goal is to get high performance from your app, you should definitely make two apps for the two operating systems. Instead, if your goal is to have an app to be published in a short time you can make a hybrid application.
I think this 'true image' will clarify your ideas
Speaking from personal experience (working in parallel on iOS and Android right now with some mapping apps):
- Android's ties to GooglePlay for all mapping services are a big headache
- Implementation of GoogleMaps SDK on iOS is NOT the same as on Android
If you want a very similar look and feel for both platforms; go with web-based.
I understand that not all the code and functionality are available. However, I am currently in the planing of a new project and there are no document to be found on this aspect.
I want to know once I code in Titanium, is it possible to make a web version for mobile without the application with limited feature and the same code base? (something like touch.facebook.com vs Facebook app)
Thank you very much
Of course, Titanium could do that since it also supports MobileWeb. Titanium features:
Develop native applications for iOS, Android, BlackBerry, Windows, and
mobile web through a single code base.
With their Titanium Studio, you can easily build and package your app for MobileWeb.
But there are a lot of things to consider on developing titanium apps. Here are the few things I've learned along the way:
Don't use ImageView. Use View with backgroundImage. If it's an icon, you can make a font for your app. See how to create an icon font using IcoMoon.
Memory management
Never use borderRadius, borderWidth, borderColor in components within components, as for example a ScrollableView.
Minimize calling Ti.Platform.[property_name]. Example: instead of always calling Ti.Platform.osname to your controllers, you could have put it on you commonjs var osname = Ti.Platform.osname, then exports.getPlatformName = function() { return osname; };
Here are some few references:
http://developer.appcelerator.com/question/152656/tips-and-tricks-for-memory-management
http://developer.appcelerator.com/question/116867/this-is-a-solution-to-your-memory-woes#answer-203729
http://www.tidev.io/category/howtos/
Titanium SDK supports iOS, Android, BlackBerry, Tizen and HTML5 platforms. You can read more about that in their documentation. You can limit features in HTML5 app in a code with simple if() and reuse most of your codebase.
You can create a web version of the application if you include Mobile Web in the target platforms, when you create the project.
To deploy it on the browser, run the application as Mobile Web.
You may refer the following links for more details.
Getting Started with Mobile Web
Mobile Web Platform Overview
Mobile Web Limitations
I am interested in web standards (js/HTML/CSS). I would like to create applications from them, for phones and tablets. And sell these applications on mobile stores and web stores (for appstores and google play).
Is it possible ? What would be the best way to do it ?
Yes, there is a PhoneGap platform that can be used for building mobile apps for iOS, Android, Symbian, Windows Phone.Apps developed with it are accepted in all the stores. It is quite popular, robust and has nice features.
As mentioned in one of the other answers, yes PhoneGap will do the trick if you decide to write your app in HTML/CSS/JavaScript. Now, if you want to have a pleasant user experience on both smartphone and tablet operating systems, I would also recommend looking into Twitter Bootstrap.
This CSS framework has built-in responsive web-design styles that will allow you to scale things down in a user-friendly manner from tablet to smartphone, as well as show/hide different parts of your HTML depending on whether your users are viewing the page on a tablet or smart phone.
Specifically, you can do things like the following:
<div class="visible-tablet">
This will only be visible on tablets.
</div>
<div class="visible-phone">
This will only be visible on smart-phones.
</div>
For a full listing of the responsive design support in Twitter Bootstrap, check out their section on responsive design.
You may also want to check out the Google Chrome Web Developer plugin to assist you in creating a responsive web experience. This plugin lets you (among other things) view how your page will look on multiple device resolutions and is an invaluable tool for debugging resolution-specific issues.
You can look at Zurb Foundation, which is a very active open source project for building responsive web apps for mobile devices. Some overall description of the features here.
You can create Windows 8 Apps using Javascript and HTML 5 (apart from using Native languages). Windows 8 runs on Surface tablets and PC's.
Create your first Windows Store app using JavaScript (Windows)
There is a free ebook as well: free-ebook-programming-windows-8-apps-with-html-css-and-javascript
There are lots of options around - PhoneGap seems to be the most popular and, since it's now part of Adobe, it will probably continue to be popular.
However, there is a more important issue to be considered here: iOS users expect an iOS app experience, Android users an Android one... You get the idea. Make sure it's the best choice for your customers.
See this story about HTML5 at Facebook.
Also, and I know I might open a can of worms here, the performance will always be inferior to that of a native application.
You can also try MoSync:
"Build native mobile apps for all the major platforms using our leading open-source, cross-platform development environment. Now with support for In-App Purchases, NativeUI and Windows Phone 7." ]
There's Titanium from Appcelerator where according to their site you can build native apps using Javascript.
Just a late update: Facebook has open-sourced react-native since use asked your question and unlike PhoneGap (now called cordova) React-Native does not build hybrid app but builds true Native mobile application with the same power you would get when using Java for android or ObjectiveC for IOS. You can find out more here
No point in doing Microsoft/Windows Mobile anymore since it's now dead, but the easiest way to create Android apps based on HTML is to use DroidScript which can be found on Google Play (it did not exists at the time of this question).
You can also build native (non-html) apps with pure JavaScript using the same tool and it's far easier to use for novices than PhoneGap/Cordova.
At first glimpse Cordova and PhoneGap exist primarily for the use to develop apps to be used on a mobile device. Well, I am not interessted in the developement of native mobile apps.
There exists a webapplication (a cms) of our own and the question is now if a mobile toolkit like Cordova or PhoneGap is able to be of any help to develop parts of our cms functionalities with it in order to be able to support more plattforms.
Does it make sense to use Cordova or PhoneGap for the developement of a pure browser-based web application?
Phonegap (or Cordova as its now called) works by wrapping your webpages in a Webview and giving you access (in JavaScript) to some of the native device functions, such as the Camera, Accelerometer, Contacts etc.
As for whether it will help you depends on if want to make use of any of the native device functions, for example if you think incorporating the Camera (current HTML support for camera is quite spotty) into your web app is of use then you probably should consider it.
Another consideration is how your users will access the applications, with Phonegap it gets packages into a native app and they can just launch it from their home-screen (or however they launch apps on their mobile device), while with a Web App it depends on the device, on iOS you can pin it to your home screen and add some meta tags to make it appear more native like (for example hide the address bar) while on Android as far as I know you can't do that.
Finally consider that with Phonegap it might be more of a pain to debug your application since your HTML/Js is wrapped in a Webview, but as far as I've seen there is no easy way to debug it there.
One other thing I seem to recall reading somewhere that on iOS Apple doesn't give your native applications' Webviews access to the same amount of memory as if it were in safari so the exact sane web application when packaged into a Phonegap application might actually be slower.
To sum up, the benefits of wrapping your application in a Phonegap wrapper are access to native device functions and how your users access your app, if those aren't important (or the cons outweigh the benefits) than it probably isn't worth your while to go that route.
Cordova/Phonegap extend javascript with functionality provided by mobile operating systems. Therefore apps developed with these frameworks must be compiled to the target platform and only embed the HTML etc. in an embedded browser. The extensions need java, objective-c etc. code to run so I don't think that you are able to benefit from this code.
You are forced to write your own mobile device compliant HTML code when using Cordova/Phonegap. There are no neat mobile device ready user interface controls provided by the framework but only access to device specific hardware or software apis like notification etc. is given.
Cordova is just the latest name of PhoneGap. I would not go for that if you just want to build a mobile website. First of all publishing such an app on several online stores (iTunes, Play) is a pain.
I am still researching about the right frameworks to use for an upcoming project. I need to develop a static web app that will be running on iPad, iPhone, Galaxy Tab 10.1 and Android devices with a resolution of 480x800px. This web app will be static, no interaction with a server.
Since I like Backbone very much, I was asking myself if it would be useful using it for something static. The advantages I see are especially in structuring code in general, separating different views and making use of the events in the views. Would you recommend using Backbone for this - what are the advantages and disadvantages you see in this approach?
From your question i am getting that you want to make an app that could be run on both iOS and android devices.
A few weeks earlier i was also looking for the same question and after looking at couple of mobile frameworks available in markets like (rhoMobile,Appcelerator,and phonegap) I choose Appcelerator.
Its a great framework. If you are comfortable with ruby then you can opt for rhoMobile too.
This framework can easily work with webServices etc written in php and other.
Like backbone, Titanium Appcelerator also uses javascript and provide rich API for your application development.