IndustryWhy Ionic is Reigniting the Native vs HTML5 Debate

Andrew Chalkley
writes on June 2, 2015

 

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!

16 Responses to “Why Ionic is Reigniting the Native vs HTML5 Debate”

  1. Test User on February 29, 2016 at 11:19 pm said:

    ObjC nightmare because it did not have reference counting before? What a sad state of development these days if idiots like you can’t use simple languages like ObjC which is just a C with macro classes. Can you remove yourself from the pool of programmers please? Programming is definitely not for you.

    • S. Corbent on March 22, 2016 at 8:51 am said:

      Reference counting or not, Objective-C is a P.O.S. I’m a 30 year programming veteran and have used a variety of languages since the days they were invented. Whether Ionic is the right solution or not, at least it’s headed in the right direction. In this day and age, the last thing we need is a platform specific framework built on top of an archaic and messy language. Objective-C is one of the worst, hacked up languages ever invented. Why do you think it was necessary for Apple to build Swift?

  2. Although I previously saw Ionic as a great platform, performance issues lead me to believe React Native is the better option for web developers moving towards building native apps.

  3. Your facebook share link is currently limited to the width of the button in chrome on mac.

    I set a width of the table (.uiGrid ._51mz .pluginConnectButtonLayoutRoot ._3c9t) to allow posting but you’re going to be losing quite a bit of share traffic if this isn’t fixed quickly

  4. Steve on June 3, 2015 at 2:53 pm said:

    Can we use the UI components of Ionic and forget about Angular?

  5. Ionic is awesome and beautiful! With this framework you can build hybrid apps with good performance and with design very similar as a native app can provide.
    The 99folks app (http://99folks.com) is a good Ionic showcase.

  6. Bernard on June 2, 2015 at 2:41 pm said:

    Are there any ionic courses in treehouse?

Leave a Reply

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more