Teams need versatile options to deliver solutions in a variety of diverse situations. The Ionic team released something special last year in 2021 which we were eager to begin working with and excited to share with NativeScript developers.
Ionic Portals provide an easy way for web teams to deliver focused experiences within mobile apps that are entirely self-contained allowing you to blend web views and platform native views in exciting creative ways. Teams can build, test, and ship these embedded micro web experiences in parallel, allowing you more options to scale your NativeScript app development.
Consider a portion of your team iterating on a micro web frontend which is frequently deployed to production. The experience meets a certain objective which you'd like to deliver in your NativeScript app either in a modal, a popup view, a routed detail page, a side drawer, a welcome screen, a purchase experience or as an entirely embeddable experience (the options are unlimited). Ionic Portals will allow you to plug n' play these experiences on demand however you'd like, let's explore how you can do this today with the release of @nativescript/ionic-portals.
An IonicPortal is a view component for NativeScript which is provided via:
npm install @nativescript/ionic-portals
Ionic Portals require a product key to use. Getting a key is easy though, just head to the Ionic Dashboard and click "Get Access".
You can now register and setup all the portals you intend to use within your app's bootstrap file (often app.ts or main.ts):
import { Application } from '@nativescript/core'
import { IonicPortalManager } from '@nativescript/ionic-portals'
Application.on(Application.launchEvent, () => {
// Register IonicPortals
IonicPortalManager.register('<portal-api-key>')
// Create as many Portals as you need to use in your app
// Your app will look for a folder name matching the portal id you use here
// Android: App_Resources/Android/src/main/asssets/webPortal
// iOS: App_Resources/iOS/webPortal
IonicPortalManager.create('webPortal')
})
// bootstrap your app here...
You can now use anywhere in your app, for example with plain markup:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:ionic="@nativescript/ionic-portals">
<StackLayout class="p-20">
<ionic:IonicPortal id="webPortal">
</ionic:IonicPortal>
</StackLayout>
</Page>
Or another flavor like Angular for example:
import { registerElement } from '@nativescript/angular'
import { IonicPortal } from '@nativescript/ionic-portals'
registerElement('IonicPortal', () => IonicPortal)
<!-- use in any component -->
<IonicPortal id="webPortal"></IonicPortal>
They are compatible with all flavors as well (React, Vue, Svelte, etc.)
If you have an existing web frontend you can use it with IonicPortals right away.
For clarity we will discuss creating a micro web frontend with Ionic's toolset.
Ionic consists of a CLI and UI toolkit providing integrations with popular frameworks like Angular, React, and Vue which allows you to build fantastic web experiences perfect for IonicPortals:
npm install -g @ionic/cli
ionic start
// You can choose to use the wizard if you'd like, it is super neat!
// We'll just use command line for this example:
> Use the app creation wizard? n
// You can use any framework you'd like, we'll just use Angular for example:
> Pick a framework! 😁
? Framework: (Use arrow keys)
❯ Angular | https://angular.io
React | https://reactjs.org
Vue | https://vuejs.org
// Use any name you'd like. For simplicity we'll use a name we plan to `id` the portal with in our NativeScrip tapp:
> ? Project name: ionicWebModal
// You can use any starter template you'd like. We'll use
> ? Starter template: (Use arrow keys)
tabs | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with navigation in the content area
blank | A blank starter project
❯ list | A starting project with a list
my-first-app | An example application that builds a camera with gallery
conference | A kitchen-sink application that shows off all Ionic has to offer
cd ionicWebModal
// Ready!
You can now develop this web micro frontend as you ordinarily would, for example:
ionic serve
Depending on which framework you chose to create your Ionic app, the following steps may differ slightly but no matter the framework you will want to get the relative file path location to your NativeScript App_Resources folder.
For example consider the following project folder locations on your system with them parallel to each other:
/Users/me/Documents
> ionicWebModal
> nativescriptApp
Now inside the ionicWebModal project for Angular you can open angular.json and add build configurations for iOS and Android:
"configurations": {
"portal-ios": {
"outputPath": "../nativescriptApp/App_Resources/iOS/ionicWebModal"
},
"portal-android": {
"outputPath": "../nativescriptApp/App_Resources/Android/src/main/assets/ionicWebModal"
},
}
Now just build your web microfrontend with the proper configuration whenever you're ready to deploy or test with your NativeScript app.
npx ng build --configuration portal-ios
npx ng build --configuration portal-android
Wait does this also mean I can livesync develop my IonicPortal alongside live synching my NativeScript app?! Well yeah 😊 ...we'll get into that in a followup post as we'll be celebrating Ionic as our spotlight over next 2 months during our #ItsJustJavaScript event.
There's a lot of ways to handle web assets alongside your NativeScript builds so feel free to explore any direction that works best for your case.
Yes, you will be able to once @nativescript/ionic-portals 1.0.1 is released, which relies on these two pull requests (Please give them a thumbs up):
In a followup post we will show how you can add Capacitor plugins to any of your IonicPortal's.
Just by using @nativescript/ionic-portals you will be blending views together however to illustrate some creative options, let's open an IonicPortal in a modal.
simple modal view setup (using vanilla flavor) - modals/ionic-portals-modal:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="page"
xmlns:ionic="@nativescript/ionic-portals">
<GridLayout>
<ionic:IonicPortal id="ionicWebModal">
</ionic:IonicPortal>
</GridLayout>
</Page>
a view where a tap bound to openModal opens that modal:
openModal() {
this.page.showModal('modals/ionic-portals-modal')
}
|
|
You can play with this demo here on this branch.
Important: You will need to add your own Portal API Key here: https://github.com/NativeScript/plugins/blob/feat/ionic-portal-examples/apps/demo/src/app.ts#L11
To run the demo:
git clone https://github.com/NativeScript/plugins.git
git checkout feat/ionic-portal-examples
npm run setup
npm start
> focus.ionic-portals ENTER
// This will focus the workspace down to only the IonicPortal demo
npm start
> demo.ios
// or...
> demo.android
Absolutely. Do whatever you're most comfortable with and helps you ship deliverables on time.