Two weeks ago, Matt Netkow introduced Ionic React in an online presentation of the Ionic Zürich Meetup.
After a couple of minutes he displayed a features I never ever had thought about before: he showcased in his presentation an interactive embedded apps 🤯.
This literally let me speachless. What if anybody would be able to embed any interactive applications and websites easily in any slides?
I was convinced as soon as his idea hit my brain and that’s why I am happy to share with you this new feature of DeckDeckGo, our web editor for presentations, and per extension, the new Web Component we are open sourcing!
Credits
It is not the first time Matt inspired me a feature. If the landing page of our project is also a presentation itself, it is also because once he said that he found the idea interesting. Definitely Matt, thank you for the inspiration!
If you are familiar with the Ionic ecosystem, you may already have noticed that the device’s frame showcased and used in the above example really looks like the one used in their documentation. I can’t argue about that and you are totally right. Instead of reinventing the wheel, we used the style code they published under MIT license. Thank you Ionic for everything you do for the web 🙏.
Installation
We are providing some guidance in our documentation and Stencil is also displaying how any components can be installed in with any frameworks.
Install From A CDN
To fetch the component from a CDN, as for example Unpkg, add the following to the header of your HTML.
<script type="module" src="https://unpkg.com/@deckdeckgo/demo@latest/dist/deckdeckgo-demo/deckdeckgo-demo.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@deckdeckgo/demo@latest/dist/deckdeckgo-demo/deckdeckgo-demo.js"></script>
Install From NPM
To install the project from npm, run the following command in your terminal:
npm install @deckdeckgo/demo
According to your need, either import it:
import "@deckdeckgo/demo";
Or use a custom loader:
import { defineCustomElements as deckDeckGoElement } from "@deckdeckgo/demo/dist/loader";
deckDeckGoElement();
Showcase Your Applications
To use the component and showcase your applications, use it as following where the property src is the URI of your Progressive Web Apps or website.
Note that we are also setting the property instant to true to render instantly the content as the default behavior of the component is set to be lazy loaded. In case of DeckDeckGo, to maximize the load performances, only the current and next slides’ assets, and therefore iframe too, are loaded iteratively.
<deckgo-demo src="https://deckdeckgo.app" instant="true"> </deckgo-demo>
That’s it, you are showcasing your application 🎉.
Sizing
The component will automatically calculate the size of its content according the host available size.
private async initSize() {
const style: CSSStyleDeclaration | undefined = window ? window.getComputedStyle(this.el) : undefined;
const width: number = style && parseInt(style.width) > 0 ?
parseInt(style.width) : this.el.offsetWidth;
const height: number = style && parseInt(style.height) > 0 ?
parseInt(style.height) : this.el.offsetHeight;
const deviceHeight: number = (width * 704) / 304;
this.width = deviceHeight > height ? (height * 304) / 704 : width;
this.height = deviceHeight > height ? height : deviceHeight;
}
That’s why, you can either encapsulate it in a container and make it responsive or assign it a size using styling.
<deckgo-demo
src="https://deckdeckgo.app"
instant="true"
style="width: 40vw; height: 90vh;"
></deckgo-demo>
Note also that the component will listen to resizing of the browser. Therefore, each time its size will change, it will resize itself automatically.
window.removeEventListener('resize',
debounce(this.onResizeContent, 500));
private onResizeContent = async () => {
await this.initSize();
await this.updateIFrameSizeReload();
};
Worth to notice too that in order to be sure that the content of your integrated app fits correctly, on each resize of the browser, it will be reloaded too. This is achieved with the following ugly beautiful hack to reload cross-domain iframe .
iframe.src = iframe.src;
Summary
Moreover than in slides, in which I definitely see a use case for such components because I am already looking forward to use it for my personal talks, I think it might be useful too, if for example, you are displaying a showcase of your realization in your website.
I also hope it made you eager to give DeckDeckGo a try for your next presentations 😊.
To infinity and beyond!
David