By Matt Netkow February 20, 2019

Understanding the Ionic Development Ecosystem: Part 2

Creating an Ionic app is a rewarding choice. With a foundation based on open web technologies, it consists of simple tools to build amazing cross-platform experiences. As with any software development framework choice, there are a handful of concepts to learn about.

In part one, I walked through the basics and background of the Ionic Framework and company offerings as well as the key web technologies you need to know in order to create successful Ionic apps. Here in part two, I’ll cover the rest of the Ionic ecosystem including environment and build tooling, how to create mobile apps, and additional technology you’ll encounter when working on an Ionic app.

Environment Tooling

In order to work within the Ionic ecosystem, you need to install the long-term support (LTS) version of Node.js. Node is a JavaScript runtime, initially built to bring JavaScript from the frontend to the backend. Today, it’s used all over the place, including desktop applications like the Ionic command line interface (CLI). More on that below.

The Node.js install will include node package manager (npm), a free online repository of JavaScript software libraries. The majority of modern JavaScript projects use npm to install, share, and distribute third-party code. This includes Ionic, Angular, Vue, React, Bootstrap, and the list goes on.

When developing your Ionic app, you’ll want to use a version control system (VCS), the most popular being Git. These systems record changes to files over time, allowing for the retrieval of specific versions later. As you can imagine, there are many key benefits to this, including the ability to revert selected files (or projects) back to a specific state, compare changes over time, and easily recover a project if files are lost.

In the past, programmers might have used a simpler strategy such as copying files into another directory or timestamping them. But, given the complexities of modern web app development, this is a tedious and error-prone process—making a VCS a must-have.

Build Tooling

Installing the Ionic Framework doesn’t result in a traditional desktop application to run. Instead, we install the Ionic CLI via npm, then use it to generate a new Ionic project.

npm install -g ionic

ionic start myApp tabs

CLI tools are small programs that perform various tasks in a way that makes them easy to use together, all without the complexities of having to build visual desktop apps. To use CLI tools, we need to use a Terminal. A Terminal lets us run CLI tools by typing commands and is a popular way developers build web and mobile apps today.

Windows, Mac, and Linux all have different ways to use the Terminal. On Mac and Linux, there’s one installed by default called Terminal. Windows includes cmd.exe and PowerShell, but I recommend Git for Windows for the most modern approach.

The next tool we need may seem obvious, but my recommendation may not be. Use a text editor or integrated development environment (IDE). I recommend Visual Studio Code, whose focus on web development makes it perfect for coding Ionic apps. Among the many useful features it contains, my favorites are support for TypeScript and code auto-completion.

The final build tools we need, required only if you wish to build iOS and Android apps, are Xcode and Android Studio. Xcode is available only on the Mac platform from the Apple App Store. A Mac is required to run Ionic apps on an iOS device and submit them to the App Store. In contrast, Android Studio is available on Windows, Mac, and Linux. Use it to build native Android apps and submit them to Google Play.

Teams managing multiple Ionic apps will find their Appflow Package service useful. It’s designed to help Ionic developers build their app in a stable, cloud-based environment. It works particularly well for teams that are working on an app at the same time and integrates directly with your git repo, including GitHub and Bitbucket.

Creating Mobile Apps

Up until now, we’ve focused entirely on web technologies and tooling. So, let’s pivot to one of the main reasons web developers get excited about building Ionic apps: creating native iOS and Android native apps from their web code.

Traditionally, Ionic has leveraged the open source Cordova project to bring Ionic apps to multiple platforms beyond the web browser. In order to get an Ionic app running “natively,” the web code runs inside of a WebView (an embedded browser) inside of a native app shell. End users can’t tell the difference, as it will look, feel, and act like an app built with native technologies.

By bringing our Ionic apps onto mobile platforms with Cordova, an incredibly powerful feature is unlocked: the ability to access native device functionality via plugins. Plugins provide an interface for Cordova and native components to communicate with each other, allowing Ionic developers to invoke native code from JavaScript.

Cordova application architecture,

With hundreds of free, open source plugins available (such as Camera, Bluetooth, and GPS), web developers don’t need to learn native programming languages to succeed in building a great app. Instead, the native side is abstracted away via a defined JavaScript API. My favorite way to demonstrate how powerful this is, is with the Camera plugin.

As you can see, the most exciting line above is the reference to “ ).” Notice something? There is no reference to iOS, Android, or the web! The Cordova plugin identifies the platform this code is running on and executes the corresponding native code to open the camera hardware on the mobile device.

When beginning to incorporate your first Cordova plugin in your Ionic app, I recommend taking a look at Ionic Native. Ionic Native “wraps” Cordova plugins in a “promise” or “observable,” thus providing a common interface for all plugins and better support for Angular’s change detection. This doesn’t change the overall functionality but rather makes them easier to work with.

To install an Ionic Native plugin, you first add the Cordova plugin (native code) to your project:

ionic cordova plugin add cordova-plugin-camera

Then add the Ionic Native portion (JavaScript code):

npm install @ionic-native/camera

Finally, use the functionality, as seen in the camera code snippet above, when needed.

Worth a special mention is Capacitor, Ionic’s newest open source tool. Think of it as a “spiritual successor” to Cordova. It fulfills a similar role as Cordova but extends it in new and unique ways.

Capacitor: Native Progressive Web Apps

Some of these novel ways include:

  • Progressive Web App (PWA) Support: PWAs are admittedly a bit of marketing hype. They are simply web apps focused on features such as offline support, excellent performance, and more. Unfortunately, Cordova only supports iOS and Android apps, meaning native device plugin functionality doesn’t work in web browsers. This makes it difficult to maintain a project with a single codebase that can be distributed both as a native application and as a web app. Fortunately, web browsers are increasingly adding support for device functionality APIs, which Capacitor integrates into its APIs.
  • Redesigned Plugins: The Capacitor team has taken a fresh approach to all of the core Cordova plugins by simplifying their APIs, making them easier than ever to use.
  • Native Code Projects as First-Class Citizens: Native iOS and Android projects now sit alongside your Ionic app (they are destroyed and recreated in Cordova projects, making it difficult to make changes to or add your own custom native code). This has several benefits, including easier integration of native controls and the ability for your native mobile developers to work alongside your web developers.

Capacitor supports the majority of existing Cordova plugins, so I recommend using it when starting a new Ionic project.

Special Mentions

You will encounter additional technology tools when developing Ionic apps. It’s good to be aware of them, but understanding them in-depth isn’t necessary.

The first one is web components, a suite of browser technologies used to create custom reusable UI elements. Complex HTML, CSS, and JavaScript is encapsulated within custom markup tags, allowing for maximum code reuse across web applications. The exciting thing about Ionic 4 is that its components are now web components, but you wouldn’t necessarily know that as an Ionic developer because their HTML markup looks the same as previous versions of Ionic.

By building Ionic 4 on top of web component technology, Ionic is no longer tightly tied to Angular, which means virtually any JavaScript framework is supported. The Ionic team can now innovate faster, and Ionic developers can rest assured knowing that Ionic will be a great long-term investment.

Next up, the Stencil compiler tool helps make the process of creating Ionic 4 web components faster and easier for the Ionic team. It’s open-source, so other developers are welcome to use it to create their own web components, whether used in an Ionic app or not. To be perfectly clear though, Ionic developers do not need to know Stencil to build Ionic apps.

Using Stencil and web components together, the Ionic team packages up the Ionic Framework into a core set of UI library controls (buttons, tabs, sliders, etc.) called Ionic Core (aka @ionic/core on npm). This bundle can be used with or without a JavaScript framework.

Most developers, however, will leverage one of several web framework-specific building blocks. Right now, this is Ionic/Angular (aka @ionic/angular on npm) with additional options such as Ionic/Vue and Ionic/React coming spring 2019.

Beyond Mobile Apps

As previously mentioned, many web developers become interested in Ionic because of its ability to create a web app that runs as a native mobile app. Mobile apps are still a compelling use case, but Ionic has several other platform targets: PWAs and Electron.

Progressive web apps use modern web capabilities to deliver an app-like user experience. While appearing to some as merely a technology buzzword, their benefits should be taken seriously. PWAs bring features that are common to native apps to the mobile-web browser in a secure, standards-based manner. Among their exciting functionality is push notifications, improved offline support, native app look and feel, and the ability to save them to the home screen.

Unsurprisingly, Ionic are big fans of PWAs. Ionic starter apps created from the Ionic CLI come PWA-ready with best practices already built in. Additionally, their PWA toolkit offers an opinionated starter app perfect for developers needing to squeeze in as much performance as possible.

If mobile-web, desktop-web, and native-mobile apps aren’t enough, you can deploy an Ionic app as a native-desktop app on MacOS or Windows using Electron. An Electron app is essentially a Node.js application embedded in a native shell. As Cordova does for mobile apps, Electron apps have access to native device features like the camera and push notifications. And it’s a more popular solution than you may think with Visual Studio Code, Slack, and Microsoft Teams being well-known, native-desktop apps built with the web.

Wait, Aren’t We Missing Something?

Thus far, we’ve covered lots of frontend concepts, but no mention of any backend technology. That’s on purpose, because Ionic is backend agnostic! It works with any backend, typically communicating over HTTP with application programming interfaces (APIs) to retrieve, create, update, and delete data. This is not unique to Ionic; rather, all major web frameworks use APIs to access data.

How to Get Started With Ionic

With the plethora of technologies used to create Ionic apps now defined, you’re likely wondering “How do I get started?” Here are some strategies based on your web development experience.

If you are new to web development, start with the basics. Learning the foundational technologies (HTML, CSS, JavaScript) first is crucial—not only for creating Ionic apps but also since knowing them will serve you well throughout your developer career.

If you skip these in favor of jumping right to a higher level framework such as Angular, Vue, or React, you will struggle unnecessarily and never truly understand what is going on behind the scenes. Yes, this path is the longest time investment, but there is an endless amount of information available online. I recommend either free courses, like Codeacademy, or paid services, such as Pluralsight’s HTML5 or JavaScript learning paths, which combine specific courses and tools into a complete learning experience.

If you are a web developer with some experience, I recommend learning Angular before diving into Ionic. Ionic 4 embraces your framework of choice’s tooling (such as the CLI and routing), so you’ll be working with both of these technologies constantly while developing an app. The Angular docs are also a great reference point.

Lastly, if you’re a seasoned web veteran, I expect you’ll be comfortable jumping right into Ionic Framework and creating an app.

Some of you will share my background—a backend developer (.NET in my case) moving to the frontend. While this may seem daunting, many will enjoy the challenge, as modern JavaScript is much easier to learn than in previous years. .NET developers will particularly like Angular, as many of its programming paradigms are similar to ASP.NET MVC. Regardless of your preferred backend stack, expanding your skills to frontend technologies is a great investment in your career.

Ready, Set, Build!

The Ionic Framework is a powerful open source UI toolkit for building apps that can be deployed virtually anywhere. By embracing the Ionic ecosystem, you will not only be able to create a beautiful cross-platform app based on a single codebase but also will make your web development skills more valuable.

Now, go get after it and start building amazing Ionic apps today!

About the author

    Matt Netkow

    Matt Netkow is a full stack developer, product marketer, and hobbyist entrepreneur, specializing in .NET enterprise solutions and cross-platform web-based application development. He writes about full stack and Ionic/Cordova mobile application development on his blog. His Pluralsight course, PhoneGap Build Fundamentals, introduces developers to the cross-platform development approach using a web-based technology stack. It covers everything needed to go from zero to app store, including in-depth coverage of native plugins, testing and debugging on mobile devices, and app store submission. When not engulfed in technology, he enjoys heavy metal, hiking, cooking, and reading.