There’s already an article in our blog that describes the basics of . Reading it you’ll learn how to distinguish native apps from mobile web applications, what are their strong and weak sides, and what programming languages you can use.
It may seem like the only available option is balancing between these two options switching from one to another according to the specific conditions. Well, things work a little bit differently. It’s always good to have an alternative. The more of them you have in your baggage of knowledge, the more of possible solutions you have. The world of mobile applications is not an exception. This time, we’ll talk about one of the alternatives to the native and web applications. We’re talking about hybrid mobile apps.
So, here’s the main question for today: “What is hybrid mobile application development?”
What is Hybrid Mobile Application
As you can see from the name, a hybrid app is a some combination of technologies. You can think of it as of a web app that works like a native one. If your intention is to build a hybrid app, you use web technologies such as HTML, CSS, and JavaScript. But unlike the web applications which are web pages basically, hybrid apps install on your device. To make them work such way, they should be wrapped in a native application by using a proper framework. Nowadays classics for such a purpose are PhoneGapp and Cordova. These frameworks provide the possibility of communication with the operating system of the device. But they don’t have tools for building the user interface, logic, etc. For this purpose, you should use JavaScript/CSS libraries, the same that are used to make web pages. Then, this “wrapped” application runs in an internal browser (UIWebView in the case of iOS and WebView in the case of Android). Here’s how the hybrid mobile app works in a nutshell.
The distinct advantage of choosing hybrid is the fact that web skills can be used for developing. Thus, if you already have some experience in web developing, or there’s a web developer on your team, it won’t be an unordinary task to learn some extra skills required for creating a hybrid app. Moreover, the created code can be used for any of your target platforms, which means that you won’t spend extra money and time for going multi-platform.
Hybrid apps have access to the hardware of the device. Platforms such as PhoneGap or Cordova provide a set of JavaScript APIs that allows using the camera, contacts, etc. You also shouldn’t forget about advanced offline capabilities. The application can run whether you have an Internet connection or not. The fact that hybrid apps could be distributed via app stores is a plus, too.
Like any other technology, this one has its specific drawbacks. If your application is intended for high performance (it could be a 3D game), hybrid apps is not an option for you. You can get access to the basic features of your target device, but their number is limited. The Apple store can reject your application if it doesn’t look “enough native”. Seems like some cases leave you no choice but to prefer native apps. Check out the supported features and .
Hybrid Mobile Application Development Frameworks
PhoneGap is not the kind of frameworks that can help you with creating UIs. Use it to pack and release a previously created application. This tool wraps your code in a native application. We talked about this concept earlier. This framework can be used along with any JavaScript or UI frameworks (jQuery Mobile or AngularJS, for example). With PhoneGap, you can get access to device’s hardware and use its accelerometer or camera.
The Ionic framework, in its turn, provides you with the wide variety of available UI components. It’s extremely popular library with the great community. And that’s why you should pay attention to this framework. It’s quite a good choice for beginner developers. It uses AngularJS that supports two-way data binding, and interaction with backend services and APIs. There’s even such thing as Ionic Creator, an online tool with drag-and-drop support. Such tools are always helpful for getting started with development.
Mobile Angular UI was created by using Bootstrap and AngularJS, so you can take the best from them to realize your passion for the HTML5 mobile development. It’s some kind of extension to Bootstrap 3, but it does not depends on jQuery or Bootstrap JS and uses FastClick.js and Overthrow.js. Such approach makes it more lightweight and, as a result, everything works pretty smooth. You can build UI components like sidebars, switches, scrollable areas and many others. They don’t bounce on scroll providing a user with better mobile experience.
Framework 7 is a so-called framework agnostic which means that there are no extra dependencies like AngularJS or React. But yet you can combine it with your favorite JavaScript framework. In the case of hybrid mobile applications, this framework holds a leading position in the world of iOS mobile application development. And it’s probably the best option for a web developer who intend to create a mobile application since it relies on HTML, CSS, and JavaScript. Applications made with Framework 7 look and behave like native iOS apps. But it has its weakness. There are no tools for packaging the created applications, so you should combine this framework with PhoneGap or Cordova.
Sencha Touch is mostly used for enterprises. The application created with this framework works on several platforms including iOS, Android, Windows Phone, and BlackBerry. And on every platform, hybrid apps look and feel like the native ones.
These are only five development tools that were chosen as an example. Of course, there are many others: Onsen UI, React Native, Native Script. Invest some time in your research and you’ll certainly find the hybrid mobile app framework that meets your needs. Take a look at your favorite app, make a research, and find out what framework was used for its creation. Sounds like a good start.
As for us, when it comes to , our developers here, in XBsoftware, prefer using PhoneGap and the Webix . Webix is a library of UI components that you can use for developing web applications that work perfectly despite the platform you use. You can use everything, from a simple button to complex data components. If you want to follow the trends, is included too. You can use this library to write code and then use PhoneGap to turn it into a hybrid app. Can’t wait to try it? Here, check our step-by-step tutorial: .
Tips and Tricks for Developers
There are different development approaches and techniques. But despite the chosen way, there are always trends and tendencies dictated by common sense. We gathered together some tips that you may find helpful.
Prepare your graphics. Use graphics optimizers that provide you with the possibility of lossy compression. There’s a lot of them all over the Internet.
Using HTML5 for complex apps may be a bad idea. In the case of a complex hybrid application that covers a wide variety of purposes, you can face the reduction of performance. The clean and simple concept is what should be your aim. At least, if you’re not experienced enough to use all available advantages of HTML5 at full capacity. This warning is based on the fact that Facebook has faced some performance issues while trying to use HTML5 for building hybrid apps. Since then, “to use or not to use” is a moot point. But you can always try.
Don’t forget about the performance testing. It’s unlikely that you’ll get a second chance if a user faces unexpected troubles when he decide to test your application. If you use PhoneGap or Cordova, you can try built-in testing tools like Browser-perf. In another case, there’s a lot of third-party solutions.
Conclusion
The hybrid mobile web application is a good choice if you’re limited in resources or have no experience in developing the native apps. But there’s no reason for you to think that you’ll get something clumsy and low-functional as a result. There’s a lot of popular hybrid applications with a wide audience that you can find in app stores. For example, or . It proves that hybrid apps are not just a compromise between the lack of experts and intention to save time and money, but a professional and mature technology. What’s also important, in most cases users won’t notice any difference between the native and hybrid app.