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.
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.
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.
As you can see, the most exciting line above is the reference to “this.camera.getPicture( ).” 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
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.
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.
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.
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.
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 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.
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!