Congratulations! You’ve decided to learn how to build apps with Ionic Framework. And you’ve made a great decision, given that the web is the most trusted universal runtime in the world.
Backed by a huge developer community, Ionic gives you simple tools to build amazing cross-platform experiences, from award-winning App Store apps like Sworkit to mission-critical enterprise apps.
After reading this two-part guide, you’ll feel confident understanding each piece of technology as well as the appropriate learning path based on your web development background. In part one, I’ll cover the basics of Ionic Framework and the web technologies it’s built on.
What Is Ionic?
Before we go any further, let’s start with a brief introduction. Ionic Framework is the free, open source mobile user interface (UI) toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase.
The Ionic Framework has gained tremendous popularity since it was first released in 2012 and has grown to a community of about 5M developers worldwide. It’s fully backed by Ionic the Company, which offers more than just the Framework, including products like a mobile DevOps solution for teams building multiple Ionic apps, a large suite of third-party integrations, and enterprise support and advisory services.
First, let’s take a look at the basis of all Ionic apps: web fundamentals.
I recommend glancing at these concepts at first and then reviewing as needed when building your Ionic app. The best part of these changes is cleaner, easier-to-read code.
The Greeter function’s single parameter, person, must be a string. If we execute this code while passing in an array, an error will be generated.
error TS2345: Argument of type ‘number' is not assignable to parameter of type ‘string.'
While this example is very simple, this built-in error checking feature is incredibly useful for complex web applications because they prevent a lot of bugs over the lifetime of a software project.
Fortunately, Ionic does all of this for us, but it’s useful to understand this concept to know what is happening behind the scenes.
Back to Ionic
With the fundamentals of various web technologies defined, we can turn our attention back over to Ionic Framework. It’s a library of reusable UI components that serve as building blocks for an application. Although pre-built, they’re designed from the ground up to be highly customizable, allowing each app to have its own look and feel.
Additionally, Ionic provides the UI/UX elements of an app—controls, interactions, gestures, and animations—out of the box. This allows you to focus on building your app’s unique functionality and business logic.
In addition to being a great UI toolkit, Ionic Framework offers “platform continuity,” meaning every Ionic component adapts its look to the platform upon which the app is running.
For example, on Apple devices Ionic uses the iOS design language, while using Google’s Material Design on Android devices. As a result, app developers can use the same codebase to target multiple platforms.
Ionic is first and foremost a UI framework. While you can build an app without one, most Ionic developers pair their app with another web development framework such as Angular. By doing so, they get the best possible app development experience: a beautiful UI toolkit coupled with tooling for building, bundling, routing, and business logic.
Ionic 4 UI components are built on open web standards, so they generally work out of the box with all major frontend frameworks (official support for Vue and React is coming soon).
You now have an understanding of what Ionic is and the web technologies you need to know in order to build a successful app. 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.
Can’t wait to get started? Build an Ionic app today!