With a little bit of research, you will quickly discover that the Ionic Framework is a framework for building cross-platform applications using web technology. What might be less obvious is exactly what it is that Ionic provides, and what using Ionic might look like for you.
This is especially the case today. The current generation of Ionic has opened the door for Ionic to be used in a myriad of different circumstances and in conjunction with different frameworks. This is great in the way that it provides developers with even more opportunities, but it can also make the Ionic ecosystem a little more confusing for newcomers.
The goal of this article is to provide a concise breakdown of what Ionic is and the options you have for using it. I will be addressing each of the following questions:
- What exactly is Ionic?
- How do you build Ionic applications?
- What is StencilJS and how does it relate to Ionic?
- What role does Angular, React, and Vue play in Ionic applications?
- What approach should you use when building Ionic applications?
What is Ionic?
At its core Ionic is a set of mobile-focused UI components that can be used to build applications that run anywhere the web does (which includes native iOS and Android). However, Ionic in its entirety is much more than just a set of components.
The UI components that Ionic provides are built using web components. Web components allow developers to create their own custom elements that can be reused in any web application. Just as we have an <input> or <button> element that we can use by default with HTML, web components allow us to create custom elements like <my-timer> or <my-photo-viewer> that can be dropped in just like normal HTML.
In the case of Ionic, the set of web components that are provided to us to use in our applications look like this:
<ion-list><ion-item><ion-button><ion-header><ion-card>
Each of the Ionic web components is prefixed with ion indicating that these are Ionic web components (this naming convention is typical when creating web components). If we ignore the ion- prefix, we can see that these are examples of the following user interface (UI) components:
- List
- Item
- Button
- Header
- Card
The goal of the web components that Ionic provides is to supply us with all of the elements we would need to create a mobile application. This means we can easily implement common mobile patterns like scrolling lists, side menus, tabs and more just by dropping in some simple HTML syntax. There are many more components available than the ones I have listed here.
A typical page in an Ionic application might look like this:
<ion-header>
<ion-title>My Shopping List</ion-title>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Bread</ion-item>
<ion-item>Iced Coffee</ion-item>
<ion-item>Pasty</ion-item>
</ion-list>
</ion-content>With just a few web components, the example above will create a user interface that looks and behaves like a typical native mobile app page with a scrolling list.
The components that Ionic provide are also typically more complex than simple HTML elements. Web components allow us to build complex logic into the elements. Sometimes an Ionic component that we use might just provide some simple styling to match what you would expect to see in an iOS/Android application (like an <ion-button>) and sometimes the components will also have complex Javascript embedded into them (like the <ion-datetime> component that provides a mobile style scrolling date picker).
Although Ionic’s web components are specifically designed to work well on mobile devices, they can also be used in desktop applications.
Using Ionic
When building applications with Ionic, we don’t typically only use the web components that Ionic provides. We can’t really just drop these web components into an index.html file and build an entire application (we can, it would just be unnecessarily difficult).
There is more to an application than just the user interface. We need to handle routing/navigation, data, logic, events, dynamic templates, and more. You could implement your own methods to achieve these aspects of your application just by using plain Javascript, but typically people will use an additional framework like Angular, React, or Vue in conjunction with Ionic to handle these aspects of the application. We will discuss frameworks more in the next section.
As well as the web components themselves, Ionic also provides some additional tooling to help build applications.
Ionic CLI
The Ionic CLI (Command Line Interface) is a command line tool that is used to manage Ionic applications. It allows you to easily create an Ionic application, and provides tooling for serving your application throughout development, and building your application for production.
Capacitor
Capacitor is a separate project to Ionic (it is still created by the Ionic team), but it is used in conjunction with Ionic. Capacitor provides a common API for accessing native functionality across different platforms. This means that if you want to access functionality like the camera, you can use the same code for iOS and Android without having to worry about the underlying native implementation on each platform.
Capacitor also allows you to build your Ionic application as a native application for iOS/Android/Desktop. The Ionic CLI will allow you to create a build that can be deployed to the web, but to deploy to native devices you will need to use a solution like Capacitor.
Capacitor fulfills a similar role to the popular Cordova.
Appflow
Ionic Appflow is an optional platform (also provided by the Ionic team) that you can use in conjunction with your Ionic applications. This is a paid solution that provides functionality like continuous deployment and automatic application builds.
Angular, React, and Vue
As I mentioned, you don’t need to use an additional framework to build an application using Ionic’s web components, but most people do choose to use a framework to build applications today.
To put it simply, Ionic provides the user interface and the framework you are using with Ionic will provide the application logic. Since Ionic uses web components, there is no real limitation to what frameworks you can use - as long as the framework plays nicely with web components, you can use it.
Although you could use Ionic with other frameworks, Ionic also provides specific support for the three most popular Javascript application frameworks today: Angular, React, and Vue. You will find that - as well as the set of web components Ionic supplies through the @ionic/core package - they also supply @ionic/angular, @ionic/react, and @ionic/vue packages. These packages just make it a little easier to use Ionic out of the box with these frameworks.
At the end of this article, I will provide my thoughts on which framework you should use when building Ionic applications. But first, there is one more piece of the puzzle we need to discuss.
The Role of StencilJS
StencilJS is the tool that the Ionic team uses to build their web components. StencilJS is a web component compiler, not a framework. In short, StencilJS just makes it easier to create web components. Although Stencil syntax is used to build the web components, the end result that is built is just a generic web component with nothing to do with Stencil - this is why it is a compiler and not a framework.
StencilJS is also available for you to use to build your own web components. It is in no way required that you use or understand Stencil in order to build Ionic applications, but it serves an interesting niche as a bit of a middle ground option between using a framework with Ionic and not using one.
Although StencilJS is not a framework, you can kind of use it as one to build Ionic applications. Ionic provides a StencilJS starter project called the Ionic PWA Toolkit which is mostly just a StencilJS application with the Ionic web components included by default and a basic project structure set up.
Instead of using a framework, we can use StencilJS to build out a bunch of web components that represent the various pages/components in our application. The toolkit then also provides some basic routing/navigation to switch between displaying those web components, and since we can handle the logic in the web components themselves, we kind of have this “pseudo-framework” that provides us with a lot of the functionality of a typical modern framework, without actually having to use one.
Personally, I think going this route is a little trickier than the other options currently, but there are some strong benefits to using StencilJS to build an Ionic application:
- StencilJS is not a framework, it just helps you build web components, so your resulting application does not need to include any framework libraries that will need to be loaded
- The work you put into building your application’s components is not tied to any specific framework, since they are just web components. You could reuse those components in other applications and other frameworks, and you never have to worry about the framework you decided to base your application on “falling out of favour”. It’s just generic web tech.
Which Option is Best?
Deciding on an approach to use in such a complex space can be hard, and this is one of those “it depends” kind of questions (isn’t it always?). Although there are no clear cut answers here, I will give my thoughts on which approach might suit you best.
- If you already have a preference for Angular, React, or Vue use Ionic with the framework you are comfortable with.
- If you do not have a preference for a particular framework (but want to use one), use Angular. Since Ionic has historically used Angular, most of the community uses it, so there are far better resources/documentation/tutorials available.
- If the concept of keeping things agnostic and not using a framework appeals to you, and you are reasonably comfortable with web development, use StencilJS.
If you’re still not sure which approach to use, I think Angular is a good default, but it doesn’t matter too much. Just start learning and start getting experience and then you will have a better basis for determining which approach suits you best. You don’t have to stick with your initial choice forever.