Using Ionic without any framework
While I was preparing my last talk about Web Components and Ionic v4, I noticed that I was using none of these to actually build my slides š¤ Thatās why I published this week DeckDeckGo, the new tool to create lightweight presentation using HTML and Ionic components š
To follow-up what I learned while wrapping up together this new pet project, I thought it would be maybe interesting to wrote a brief article about how to use Ionic without any framework or with any framework, as you rather likeš
Importing Ionic
The goal of this article is to describe how to use Ionic in a simple index.html therefore we wonāt rely on NPM and we are going to import Ionic from a CDN, most particularly from Unpkg. To do so we are just then going to add the following lines to the <head/> of your HTML page:
<!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet"><!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script><!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
And thatās it, thatās all you need to import Ionic in any web applications š
A basic usage
Well, I could stop the article here, itās super easy and straight forward, but I thought it would be good to display some example of usages too. In this first example, I just gonna showcase a button which should trigger an alert.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Ionic without any framework</title>
<!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet"><!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script><!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script></head>
<body>
<!-- We create a vanilla Javascript function to call the alert -->
<script>
hello = async function () {
alert('Hello World!');
};
</script>
<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
<!-- Cool thing, the Ionic CSS utilities could be used too -->
<ion-content text-center>
<h1>Basic usage</h1>
<!-- We add an ion-button with an onclick event -->
<ion-button onclick="hello()">Click me</ion-button>
</ion-content>
</ion-app>
</body>
</html>
Codepen example
Because we use Ionic in an index.html without any framework, it gives the ability to create really easily Codepen examples. You could check this particular one at the following address: https://codepen.io/peterpeterparker/pen/YJLvQq
A bit more tricky usage
The previous example is really straight forward, but what about more ācomplexā components, like creating and using modals or a popovers?
Modals
To be honest, describing how to implement a modal would just be a rip off of the documentation. Therefore, if you would like to implement an Ionic modal in a project without or with an frameworks, just visit the modal documentation, go to chapter āUsageā , toggle to āJavascriptā the example, copy/paste the code in your project and voilĆ , it just gonna works out of the box š
Popovers
I found the implementation of a popover a bit more tricky (to some extension, itās still super easy š). We will try now to move the button of the previous example, which trigger the alert, from the main page to a popover.
First thing first, to implement such a component, we have to add a new<ion-popover-controller/> element to our HTML page. I personally understand this as an anchor for the element we are about to add, which will, btw. only be added to the DOM once called and not before.
The second step is to to create a custom element which will be in charge to parse the content of our popover.
Finally, as we would do in a classic Ionic Angular application, we will use the PopoverController to create and present it.
Wrapped up together, the index.html page would now looks like the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Ionic without any framework</title>
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" media="screen">
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body><script>
hello = async function () {
alert('Hello World!');
};
// Our custom element
class MyPopover extends HTMLElement {
constructor() {
super();
}
async connectedCallback() {
// Here we parse the content of the popover
this.innerHTML = '<ion-content><ion-button onclick="hello()">Click me</ion-button></ion-content>';
}
}
// We define our custom element
customElements.define('my-popover', MyPopover);
// The function to bring the pieces together
presentMyPopover = async function() {
// We get the anchor
const popoverController = document.querySelector('ion-popover-controller');
await popoverController.componentOnReady();
// We create the popover for our custom element
const popover = await popoverController.create({
component: 'my-popover',
translucent: true
});
// We present the popover
return await popover.present();
};
</script>
<ion-app>
<ion-content text-center>
<h1>Popover usage</h1>
<!-- On click we call the function to open the popover -->
<ion-button onclick="presentMyPopover()">Open</ion-button>
</ion-content>
<!-- Our popover anchor -->
<ion-popover-controller></ion-popover-controller>
</ion-app>
</body>
</html>
Codepen
You could check this second example at the following address: https://codepen.io/peterpeterparker/pen/JmvZLo
Custom elements and browser compatibility
Custom elements are now natively supported by Chrome and Safari but are not yet supported per default in Firefox < v63. To overcome this problem we could add a the custom elements Polyfill in the header of our HTML page:
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>Cherry on the cake šš
As I said in my introduction, I have published my new pet project DeckDeckGo , where I used these components, this week. But, what I didnāt mentioned so far is, that this project is free and open source š Therefore you could find a practical implementation of everything I tried to display above in my DeckDeckGo repo: https://github.com/fluster/deckdeckgo
To infinity and beyond š
David
