Ionic: Bringing Us Closer

Tools, tools and tools

It's good to have different tools to solve different problems or build different types of web applications and websites. This gives developers a lot of power, flexibility, and ability to really squeeze all of the power and potential out of the web platform. Today, we have many tools for that, which is an entire topic in and of itself. The three that I want to highlight today are Angular, React and Ionic. You may be a bit surprised to see Ionic included in this list – they play a VERY important part of the web development picture today and that's what I want to illustrate with this post.

Background

Ionic was seemingly born to solve one problem: make it easier to use web technology to build phone applications. Interestingly enough, they weren't the originators of this idea. Going back in time a bit, 2009, according to Wikipedia, existed a framework that allowed you do to this very thing! If you've heard of or used Ionic now or in the past, you've undoubtedly heard about, or even directly used, Cordova. Cordova was originally called PhoneGap, but changed when bought by Apache, and was revolutionary for web developers who then could use their existing skills and technologies to write native-like mobile applications! This was huge! You didn't have to learn the native programming languages or tools that Cordova targets (Android, iOS, Windows Phone) AT ALL. That is, that's how it was, and still is, advertised.

The reality is a little more native heavy when you have to actually use native features of a phone (weird, huh?). Now, I don't want to discredit anything that Cordova did to make that process MUCH easier and more accessible for web developers, but, you just couldn't fully get away from native technologies. This has caused some pain for those developers (myself included) who didn't know those languages and / or weren't interested in learning another framework or skill set that they may not use more than once every full moon, on Wednesday, during leap year and high tide. Ok, that was a little exaggerated; hopefully you got the point. Enter: Ionic.

New in Town

Ionic can be referred to as many different things in different contexts. The Ionic company, changed the game of mobile development when they released their framework. It was built on top of Cordova to make it easier to build those applications with a LOT of very helpful utilities addressing some of the pain points of making a Cordova application. Nothing is perfect the first time around. They originally integrated with AngularJS, which, if you haven't seen the code or used the framework, was a pain point itself for some. At this point in time, front end frameworks were not brand new (see EmberJS). It did, however, introduce new concepts that, I personally, had never had to think about before that point. Things like two-way data binding, the way that data was passed from the controller to the view, they way they handled dependency management, and much, much more.

As AngularJS grew and eventually tured in to the Angular we're referring to today, Ionic grew with them. The team of awesome people that run the Ionic product did, and still do today, a phenominal job keeping up with the technologies, libraries, and frameworks that they personally are dependent on, which, sadly, isn't always the case. Being tied to and depenedent on has some negatives amongst all of the positives. Developers may not even like any of the Angular frameworks. What then? Those developers just lose out on all of the Ionic awesome-ness? Forunately for us, that couldn't be more far from the truth.

Innovate, Update, Profit

Keeping up with the web and all of the technologies that are constantly evolving is a daunting and difficult task. For example: all of the Ionic components today are Web Components built with another tool from Ionic, StencilJS. This is a great change to not only keep up with the standards of the web but help to push it in the right direction. Another big win Ionic decided to do: they tore off of the (permanent) Angular shackles! I just want to clarify, I love Angular. It's a great, highly productive framework and you can still use Angular with Ionic. With all that Ionic can be, and are striving hard to be, they have a lot of offer.

Capacitor

Cordova paved the way for what we have today. That being said, there are always room for improvements. Sometimes, those improvements are small and incremental (see iPhones in recent years). Other times, they are huge and change how we work and think about how we solve problems. Capacitor is a literal game changer to the mobile hybrid application space. Built to work with Ionic out of the box, it bridges the gap between web and mobile development, completely separated from Cordova. When I first saw the Capacitor project, I was a little confused. Cordova was released in 2009 and is still being used to create mobile; culminating in years and years of hard work from a lot of developers around the world!

As I said, things could always be better. Wouldn't it be going REALLY far backwards to forgo all of that work for all of those years? Could you really replace something so interegal to keeping the mobile hybrid app space around? We, the lucky consumers, are very fortunate that Ionic is filled with a lot of very smart people; they thought about that. Their response to that is: keep using your Cordova plugins – Capacitor is backwards compatible! The backwards compatibility isn't 100% and there are some incompatibilities, but it's probably as close as you can get with an initial release of a new product. Capactior also gives you a lot of benefits that just aren't available by using Cordova. To break those down a little:

  • Capacitor gives you native Android (Android Studio), iOS (Xcode) projects where Cordova configures those projects for you based on your configuration. This gives you the ability to highly customize the native features to your liking, granted you have the skills or a team to do that.
  • It works for web, too. I know that Cordova works with web today, however, this is where I believe Capacitor is better. They can generate a fully Progressive Web Application, out of the box. So, not only can you build Android and iOS apps with one codebase but a web application, too?! You betcha!
  • Along with the PWAs, you can also use Electron as a build target to make cross platform, hybrid desktop applications.
  • It provides a lot of the most common native features like, Camera, Clipboard, Phone Storage, and much more.

That is by no means an exhaustive list of features of what Capacitor offers. Check out the Capacitor website to learn more.

Enterprise Level Changes

If you're anything like me, you use Ionic to build mobile apps. Those that aren't built for clients are just built for fun. Whether to learn something new or experiment with new app ideas, most of my apps don't get to the app stores. When you don't publish to stores like Gooogle Play or the Apple App Store on a regular enough basis, it can be a whole to-do to learn how to do that over and over again which uses a lot of time and sometimes, a lot of money. Did you forget your certificates? Did you check the documentation to make sure that your app passes all of their checks to be accepted? There are so many little details when submitting that it's easy to lose sight of easy-to-miss but very important details. Naturally, Ionic thought of this. I can't even begin to imagine the wealth of knowledge they must posses about the different app stores and how they work. So why not use their knowledge?

Ionic Enterprise can give you the hands on help and confidence that your app will make it to the app store: seamless and painless. If it's not ready or if you've missed a detail, they are ready to dive in and help. The great thing about the Enterprise services is that they cover a lot of ground. Do you need to add rock solid Security & Authentication to your application? How about Mobile Payments? They offer top-in-the-industry solutions to solve problems apps commonly need to employ. They are trusted by a lot of big companies, so why not check it out for yourself?

Reacting to Change

As an avid Angular user, I want a full framework to build my web applications. When I took a look at React in the past, I wasn't really a big fan. I could appreciate the problems they are solving across many applications, it just wasn't my preferred way to solve those problems. That being said, I'm so appreciative that the Ionic team branched out to offcially supporting React components. Having great tools like Ionic shouldn't be constrained to a particular framework or set way of using their tools. Because Ionic has shifted from being an Angular-flavored application to being web component based, it opens the entirety of the web into your Ionic applications! This is bringing communities together in a big way!

Collaboration Nation

Being a trusted Ionic developer has personally given me even more excitement and motivation around helping others with their Ionic projects. I am still loving to use all of the tools that Ionic is offering and can't wait to talk to more developers about it! The best part about that is it doesn't matter which framework you use, Ionic developers can help each other with solving the hybrid problems the need to solve within their applications. I can't think of any other framework or tool that can bring drastically different developer communities together like that. Those who only used Ionic with Angular suddenly have a whole new demographic of developers that are also trying to make hybrid mobile applications. Allowing all of us to learn from one another from a common ground: Ionic. They even have a place where people can collaborate or ask questions about their framework, the Ionic Forum.

Let's go out and build some Ionic apps!


Category: Development
Tags: Ionic, Angular, React