The Advantages (and Disadvantages) of Building Apps with Ionic

There are many different ways to build applications. And, until a few years ago, native apps (apps built from scratch) were the best way to ensure performance, customization, and security.

But, now there’s a framework called Ionic that’s been revolutionizing the app development space and competing with native apps.

With experience in application development, but most of our experience in web technologies, Ionic strengthened, streamlined, and sped up our ability to make applications for our clients. How? It’s developer friendly, front-end agnostic, and equipped with an entire suite of tools—all of which made our work better.

What is Ionic?

Ionic is an open source UI framework for cross-platform, hybrid app development. It is built on top of standardized web technologies: HTML, CSS and Javascript and enables the skills of web developers to be used to build applications.

Other widely-used frameworks include React Native, Quasar Framework, Polymer, and Flutter.

Ionic’s universal web components pair with any JavaScript framework, including Angular, React, Vue, or no framework at all. It’s also back-end agnostic, with connections to AWS, Azure, and Firebase.

Since being founded in 2012, Ionic has become more impressive and is the world’s most popular cross-platform mobile development technology stack. Their toolkit has grown with the expanding needs of their developer community, and their client list has grown bigger and more diverse because of it.

The Advantages of Ionic (and Why We Use It)

When we prototyped using Ionic, our Chief Technology Officer François Bouyer immediately saw potential. And, since we first used it for the 2016 McDonald’s Worldwide Convention, we’ve developed more apps on it for McDonald’s, as well as other clients (under lock and key).

That’s because the benefits of building Ionic-based applications surpass other frameworks.

Here are a few advantages to building apps with Ionic:

1. Developer-friendly

Ionic allows web developers to build applications. Although we have experience building custom apps, it’s easier and less time consuming to leverage Ionic’s framework than start each project from scratch.

“Our team of engineers that are web developers by trade can create apps for iOS, Android, desktop, and even PWAs. We’ve been able to recycle our knowledge without having to learn a completely new language or hire specifically for one project,” said François Bouyer, Chief Technology Officer.

Being able to leverage the expertise our developer’s already have made our work better and our timelines shorter.

Preview of a developer’s view of Ionic

Another reason Ionic is developer-friendly? Two words: one codebase.

Rather than having to develop a separate codebase for iOS, Android, and the web, Ionic interconnects a single source of code.

“We’ve never had a client that only wanted just an Android app or just an iOS app, and with Ionic, we can code once and build an app for multiple platforms. So, if there’s a bug, we just have to solve for it in one place, not multiple. It’s saved us a lot of work and headaches on top of helping us keep a clean and robust build,” said Bouyer.

Working off of one codebase saves us resources, our clients money, and everybody time. And, with one source of documentation, it also future-proofs the app, something that’s a challenge for native apps to ensure.

2. Equipped with an entire suite of tools, with native compatibility

Along with the framework, Ionic’s team is constantly testing, perfecting, and releasing new, Ionic-built APIs that work across platforms. With Ionic, we get a library of components and plugins, including front-end building blocks, UI components, common app icons, etc. The plugins also allow us to connect to a users’ native phone APIs like Bluetooth, GPS, and their camera without having to build custom integrations.

Example of a few UI components offered with Ionic

For the event applications, one of the biggest challenges is the spotty cellular and wifi connection (or rather, lack thereof). With 15,000+ users all trying to use the wifi, it can be slow or even unresponsive. But, luckily, we had a solution: offline storage data with Ionic.

“At the convention, participants relied on the app for important things, like their daily schedule. With Ionic, we were able to easily cache and store important data on the user’s phone and smartly push and pull updates as soon as the connection was available,” said Bouyer.

That means, users can view information in the application without having to be connected to wifi or without cell service. For an event application, it’s a big win.

A few more of our favorites?

• Text-to-speech: With an Ionic plugin, an entire blog post, section, or page can be read aloud to the user. All they have to do is hit “play.” It makes our apps more accessible with flexible ways for users to consume content.
• Deeplink: A plugin that builds a seamless pathway from the Ionic-built application to other apps on the users phone. For example, if a user wants to share a post on Twitter, they can. With just the click of a button, their Twitter app will open with the tweet already drafted so all the user has to do is hit send: a completely uninterrupted experience.
• Camera access: Afterall, everyone takes pictures. This tool lets users use their phone camera to take a picture and store it within the app’s library, not in their phone library.

3. Front-end agnostic

Until recently, Ionic 3 forced developers to use Angular and restricted React (similar to the way React Native forces users to use React). However, after listening to developers, they made a big change with Ionic 4, allowing developers to use any (or no) JS frameworks—like React or Vue.

“A lot of people didn’t want to use Ionic because it was heavily relying on Angular. But now that it’s front-end agnostic, if someone is already using React or Vue for their web development builds, they can move to app development without skipping a beat. This is an awesome move from Ionic and will increase Ionic’s adoption through the dev community, which means we’ll get a better product—as it’s open source. ” said Bouyer.

Now, there’s even more opportunities for all types of developers with all types of experience to build with Ionic.

4. Trusted by companies small and large

It’s hard to go to Ionic’s website without noticing the big brands who’ve endorsed, used, and trusted it—and that’s because it delivers for companies big and small.

Among the brands that have used it are Nationwide, Amtrak, and NASA, Sworkit, Untappd, Dow Jones MarketWatch, and—of course—McDonald’s.

A simple, tech-company rule of thumb? If it’s good enough for NASA, it’s good enough for us.

5. Fueled by a developer-centric community

Ionic is an open source platform, meaning the original source code is made freely available. And, because it’s open source, the developer community has embraced helping each other, solving challenges, and sharing ideas.

Ionic community meetups

“The Ionic community is big, so a lot of the problems that we can run into have already been solved and shared within the community. We never get stuck or have no one to talk to when we’re using Ionic,” said Bouyer.

Within the community, there’s a Slack channel, Youtube channel, GitHub, forum, and blog—all dedicated to developers helping developers master Ionic.

The Disadvantages of Ionic (and Why We Still Use It)

As with most things in life, Ionic isn’t perfect. So, here are the disadvantages of building with Ionic:

1. Performance: Native vs. Hybrid

In terms of performance, there are some types of applications where Hybrid solutions, like Ionic, might not be the best solution. For example, if we were tasked to build a 3D video game (think Pokémon Go), we probably wouldn’t recommend Ionic.

Pokémon Go

“If you try to build complex 3D applications or if the application performance is your one and only concern, I would recommend to go fully native to get as close to the metal as possible. You could still use Ionic, but I don’t think it should be the go-to,” said Bouyer.

However, so far, we haven’t run into a project that made us choose a different Framework instead of Ionic, because for most things, the performance is perfect. For the McDonald’s Worldwide Convention app, with over 15,000 event goers, 4 days of activity, and around 2,000 photos uploaded, we had a 99.9% crash free session rate.

“It’s not a one size fits all solution; it’s a one size fits most solution. For what we’ve done, it’s been the best. But, we’re not against looking into new things if it makes the project result better,” said Bouyer.

2. Security precautions

Building with Ionic means that we have to consider both web and native app security problems. But, this hasn’t been an issue for our team.

“When we worked with McDonald’s and Kindle Communications, they had their internal digital safety and security team analyze our application. Minimal gaps in security were found and of the ones identified, we were easily able to find and fix them to make the app perfectly secure and safe,” said Bouyer.

No matter what framework they are built with, apps need to be built secure. Building with a framework, rather than building custom, just means a few more things to consider.

We See Ionic in Our Future

Since our first build with Ionic in 2016, we’ve continued to use it to create applications across industries.

One of our biggest successes? The reason we found Ionic in the first place: our ongoing partnership with McDonald’s and Kindle Communications for the biannual Worldwide Convention. Since our first application, we’ve been their digital partner for the 2018 convention and are starting the strategic planning now for the 2020 Convention.

Ionic makes it possible for us to deliver a high-quality experience over and over again. It provides a powerful tool set of plugins and APIs, enables web engineers to build with one codebase, and allows for more flexibility than ever before. In short, it makes our app builds better.

Oh, and as a bonus, it’s just fun to use.

“Honestly, the best part of my job is when I have to build something in Ionic. It’s very, very fun. Everyone on the team loves to build with it. It’s why I can’t wait for McDonalds 2020,” said Bouyer.