LearnWhy Ionic is Reigniting the Native vs HTML5 Debate

 

A Little Bit of History

Back in 2010 the iPad was released and Josh Timonen and I wanted to build apps for it. Neither of us knew Objective-C and without spending too much time learning a new language we wanted to explore other alternatives with languages we did know.

There were two main options we were looking at: PhoneGap and Titanium.

PhoneGap allowed you to use HTML, CSS and JavaScript to create your applications. These type of applications are called hybrid because they use HTML, CSS and JavaScript in a native web view shell. PhoneGap gave you a blank slate. You had to re-implement your own user interface. At the time, embedded web views in applications performance weren’t that great either and didn’t have access to certain device specific APIs we needed.

Appcelerator Titanium was a way to build native views using JavaScript, so they were performant. Titanium allowed us to create user interfaces fairly quickly and prototype some parts of our project. However, we found ourselves hitting the edges of the immature Titanium SDK and couldn’t do the custom things we wanted to do.

We bit the bullet and learned Objective-C, with all of it’s nightmares (before automatic reference counting) and built a load of apps with it.

Five years have passed and things have changed. Both PhoneGap and Titanium have matured and there are new players on the hybrid web-technologies app building front; most notably Ionic.

What is Ionic?

Ionic is a series of performance-focused, beautifully designed HTML, CSS and JavaScript components optimized for building mobile applications.

The technologies used in Ionic are Cordova, the open sourced component of the PhoneGap platform, Sass and AngularJS.

It allows you to create cross-platform applications, meaning you can write your code once and deploy it anywhere; iOS, Android and announced at Build2015, now on Windows.

Why Now and Why Ionic?

There’s been a lot of debate why native is better than hybrid and for a while, I was persuaded that native would always be the best. But there are a number of advancements both as part of Ionic and in the technology itself that’s shifting the debate in favor of hybrid apps.

You Don’t Need to Implement your Own UI Code

Where PhoneGap gave you a blank slate, Ionic provides UI components for you to use and to customize using the popular CSS extension language – Sass. Before building a hybrid app using PhoneGap or Cordova, you’d be in a state of choice paralysis. Which UI framework would you use? Ionic removes that choice for you and gives you a solid foundation with examples for you to make and create your own apps quickly. You can get on with the business logic of your app without the overhead of picking what UI kit to use.

Performance of Web Views

Web views used in applications didn’t always match the performance of the web browsers bundled with the phone, like Safari. As time moved on, the SDK’s for building applications included more modern, more performant Web Views. This means that hybrid HTML5 applications get faster.

That isn’t to take away what work the Ionic team have done themselves. The Ionic team is super focused on performance and they need to be given credit for their buttery-smooth scrolling views.

Ionic is Looking Forward

Ionic is opinionated. It says “We’re using AngularJS and Sass”. It provides the UI components for you to use. It reduces the cognitive overhead to get up and running.

With version 1.0 just being released, the team is focused on version 2.0, with support for Angular 2.0 and TypeScript. If you don’t know why TypeScript is a big deal, check out my other post here – Why TypeScript is Hot Now, and Looking Forward.

Ionic is making these bold decisions so you don’t have to. You can just get to work on your app immediately and know what technologies you need to use to get up and running.

Microsoft Visual Studio Support

In the Microsoft Build2015 conference, there were a lot of awesome announcements. Microsoft’s commitment to cross-platform app development was centre stage.

If you’re a Windows developer it can be a pain to get up and running with the likes of Node.js and NPM, which Ionic’s CLI or command line interface is based. However, in Visual Studio 2015 you can install Ionic and get all of it’s dependencies up and running by clicking a few checkboxes when setting up your project. Microsoft is really showing love to developers.

Hosted Apps

Hosted apps are going to become more and more of a thing – meaning you’ll build your HTML, CSS and JavaScript and deploy it to a server, and the web view app in the app store will serve it and hook into OS-level APIs for payment and other things. You won’t need to do an app store dance to update your mobile app.

Some developers are doing this already with Ionic and it is becoming more of an officially supported pattern by the likes of Microsoft, who are sanctioning this type of model specifically.

Conclusion

Before it was cut and dry for me, native apps provided the best performance. But now with Ionic the scales are tipped towards hybrid’s favor. HTML, CSS and JavaScript tend to have longevity. New browsers are always compatible, whereas the same can’t be said of native SDKs. For example, in very recent history, iOS has changed the way how you programmatically use fonts and calculate the visible areas of your views. This can be a maintenance nightmare, whereas if you had an HTML, CSS and JavaScript app, you wouldn’t need to do anything!

If you’ve ever been put off trying to create your own mobile app by the native vs hybrid debate, now’s the time to challenge your perception and build one with Ionic!

• Hybrid
• Ionic
• javascript
• mobile
• native
• typescript