Last week, I released an article that discussed Stencil and the impact that it will have on the Ionic framework. The key point is that Stencil is being used to rebuild all of Ionic’s components as web components, which will remove Ionic’s dependence on Angular.
This does not mean that Ionic is moving away from Angular, in fact, when these changes are implemented it will likely go unnoticed by a lot of people. There will be some performance improvements, but any changes that need to be made to the way applications are built with Ionic and Angular today will be minimal.
The big difference is that since Ionic’s components will just be generic web components, they can be used anywhere. You could use them with Angular, React, Vue, jQuery, that new framework that was just released, or you could use them with absolutely no framework at all.
What exactly would that look like, though? The details are still a little up in there and it can be a little hard to grasp exactly what a framework agnostic Ionic would look like. Once again, thanks to Ionic’s Justin Willis, I’ve had the chance to clarify a few concepts that I think will help people understand how this will all work.
Using Ionic Without a Framework
Perhaps the coolest thing about this move to web components is that all you need to do to start using Ionic’s robust component library is to include the following script on your page:
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>This is an early alpha version, but there are already components available right now that you can use. You don’t need to use any build processes or spin up any development servers, you could just create a simple index.html file that looks like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Ionic App</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<ion-app>
<ion-header>
<ion-navbar>
<ion-title>Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Just like normal!</p>
</ion-content>
</ion-app>
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>
</body>
</html>and run it directly through your browser using the file:// protocol. If you were to run this example, you would see that the application looks the same as if we had set it up within an Angular environment – we’ve just embedded the web components directly into the index file.
Using Ionic with Other Frameworks
Does this mean that building with Ionic just got a whole lot simpler – can we ditch build processes and big project structures now? You could, but it’s probably not a great idea. There’s a lot more that goes into build an application than putting some UI components on the screen, and frameworks like Angular are designed to make the process of building an application easier.
There may be circumstances where using Ionic components in an application without a framework will be useful, but most of the time you would be using Ionic in conjunction with another framework (for the same reason that most applications are built using some kind of framework today).
If that framework is Angular then what that would look like is already pretty well documented. But what about other frameworks? The basic idea will mostly remain the same, all you would need to do is include the following script:
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>inside of the framework that you are using, and you could begin using Ionic’s components directly in that framework (assuming that support for custom elements is enabled). Paul Halliday released an excellent video on what Ionic might look like inside of a Vue application.
It’s reasonably easy to get Ionic set up anywhere and then start using the UI components, but what about the non-UI parts of Ionic? Ionic does more than just provide user interface components like <ion-list> and <ion-card>. When we use Ionic now, a big part of what it provides is navigation through the NavController. Our application is encapsulated inside of an:
<ion-nav></ion-nav>and we switch between pages using methods like this.navCtrl.push(SomePage), this.navCtrl.pop(), and this.navCtrl.setRoot(SomePage). The NavController is imported from the ionic-angular package, which of course we do not have for Vue, or React, or anything else. So how do we handle navigation between pages?
As of right now, the recommended way is to use the routing of whatever framework it is that you are using. This does mean that you wouldn’t be using the Ionic style push/pop navigation that you may be used to (and Ionic won’t be handling the screen transitions), but it will allow Ionic to work more naturally with whatever framework it is that you are using.
The Ionic team are building NavController as a web component as well, so you could also use that same push/pop style navigation in frameworks other that Angular in the future (what this will look like exactly has not yet been determined), but it will likely be easier rely on the routing of the framework you are using instead.
Summary
The introduction of Stencil and the move to web components is really a win-win situation for all developers. For the people who want to continue using Angular next to nothing will change except some extra performance, and for the people who prefer to use frameworks other than Angular they will now be able to use Ionic components as well.