Article

Hybrid mobile development with Ionic framework

9 September 2015 | About a 4 minute read
Tags: CSS3, Development, HTML5, Hybrid Applications, Ionic Framework, Mobile Development, Open Source, tech


In the past 5 years I’ve been focusing my efforts on hybrid mobile development , mainly because I’ve never liked the idea of getting locked into proprietary platforms.

There are many frameworks to choose from today and there are just as many levels of support for device components but this gap has always been a major problem in the past where the choice was very limited.

What is a hybrid application?

A hybrid application is a native application built combining web technologies like HTML, CSS, and JavaScript that are later packaged into a native container. The native application contains a hidden browser (called WebView) that hosts your files and enables them to access device capabilities such as the camera, accelerometer and more.

UI Frameworks and Ionic

I built my first hybrid mobile application in 2010 when the iPad was first launched, Android was at its second release and the most popular mobile OS was still Symbian. At that time, when developing for mobile you would probably use jQuery as the UI framework and write your own HTML and CSS but it created a rather unusable platform to scale on and you had to work hard to make it look and behave native. Recently, there has been a fast growth in hybrid mobile development, there are many UI frameworks and many more are on the way but Ionic Framework is probably one of the most promising.

I stumbled across Ionic just over a year ago while searching for a UI framework to use for a crowdsourcing mobile application I was developing for The Institute of Archaeology, Oxford University. The first time I used it, I was quite impressed by how fast I was able to build some serious app with similar concepts to iOS – thanks to its well documented markup and JavaScript design patterns it took me only a few hours to get started and less than two weeks to come up with a pretty complex mobile application.

Ionic is an npm module and requires Node.js, it’s written on top of AngularJS and it’s essentially a wrapper around the very popular Apache Cordova framework but it comes with its own CLI tools. Its documentation and the continued support from the team and the community is continuously growing and its popularity is rising faster than for many other frameworks.

Ionic Framework

Ionic is a complete open-source SDK for building cross-platform hybrid mobile applications. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using web technologies like HTML5, CSS3 and Sass. Besides the SDK, Ionic also provides services that developers can use to enable features, such as push notifications, A/B testing, analytics, code deploys, and automated builds.

Ionic also provides a powerful CLI, so developers can get started and create a project with a simple command. The CLI also allows developers to add Cordova plugins and additional front-end packages, enable push notifications, generate app Icons and Splash screens, and build native binaries. Compared to hybrid apps, mixing Ionic code with native mobile app code in Cordova allows for higher performance of the resulting product: using AngularJS rather than jQuery, allows Ionic to rely on native hardware acceleration rather than extensive DOM manipulation. Ionic leverages CSS transitions and transforms for animation as a way to leverage the GPU and maximize available processor time.

Ionic is one of the top 50 most popular open source projects in the world, with over 50,000 new apps created every month, and over half a million unique developers visiting the website for documentation.

For more information, check out the Ionic website

Share this blog post

Related Articles

Careers

We’re looking for bright, dynamic people to join our team!

Discover More Roles