Using Ionic 4 in Vue applications with BEEP
We are excited to announce the immediate availability of BEEP, a mobile credential security tool on App Store and Google Play. BEEP will let you know if your username, email, or password have been compromised in a data breach by integrating with a 3d-party REST API service.
BEEP is the first production application that combines beautifully themed Ionic 4 web components in a Vue.js application. Modus Create made this Lab experiment publicly available for free on GitHub.
Ionic in Vue
Ionic is a gorgeous UI component library frequently used in Angular applications. The new version 4 has been completely rewritten as framework-agnostic Web Components, which opens up a plethora of opportunities for applications written in other frameworks and libraries.
Ionic 4 immediately became a top-notch option for Vue.JS applications. One of the core values at Modus Labs is giving back to the open source community, and we immediately recognized a wonderful opportunity to help connect two vibrant communities. In an effort to identify where this combo shines and how Modus Create can use it in mission-critical apps, we developed a hybrid PWA application called BEEP.
It took just minutes to start using Ionic components in a Vue application bootstrapped with Vue CLI. Obviously, this was a proof of concept, but we fell in love with it and continued utilizing both Ionic and Vue to deliver even better user experiences.
Integrating Ionic APIs and delegating navigation to Vue Router was instrumental in getting advanced components such as Modals, Menus, Popovers, and hardware back-button to work. To maintain a modular codebase, we decoupled the integration bridge into a separate library. Ionic-Vue library allows developers to get up and running with Ionic in a Vue application in under a minute.
Getting started with Ionic in a Vue application took just two lines of code.
Since the library was developed alongside the BEEP application, we were able to not only achieve feature parity and one-to-one API translation when compared to Angular, but also focus on usability and ease of integration.
Ionic-Vue extends the existing official Vue Router meaning that the developers can leverage prior experience and knowledge without having to learn a new API. The Ionic-Vue Router supports all original functionalities as well as advanced ones like named routes and lazy loading. Custom direction logic enables the app to display platform-specific Ionic transition animations. HTML5 history is fully supported to provide Ionic with custom logic for the display of the back-button within the toolbar component.
By going one step further and utilizing Webpack’s advanced features, developers can pass lazy-loaded components to the Ionic APIs which are handled behind the scenes by the Ionic-Vue library, requiring little to no extra effort while cutting download times significantly.
The current version of BEEP is a full-featured mobile application that showcases a complete solution using Ionic in Vue. We firmly believe that every complete solution or a product requires beautiful custom styling, so we made sure BEEP delivers that too.
Ionic 4 Theming Powered by CSS Variables
If you even scratched the surface with the shiny new Ionic 4, you’ll immediately notice that one of the driving architectural ideas was to eliminate build steps. This also means that Ionic makes use of some of the most powerful features of modern browsers. CSS custom properties (aka CSS variables) is undoubtedly one of the most exciting new features that Ionic banks on heavily.
Developers can theme Ionic components easier than ever. There are no preprocessors like Sass to work with — it’s all in plain CSS which speeds up build times and lowers the number of dependencies. In fact, you can change things up on the fly with your browser’s DevTools.
Ionic automatically detects device environment and flags the HTML document with OS type such as Android (md) or iOS (ios). This simplifies device-specific theming for web deployments and native builds. Speaking of native builds, BEEP works remarkably well in native environments with the help of Capacitor.
Native Mobile Builds with Capacitor
Capacitor is a Cordova-compatible native wrapper for web applications. We fell in love with the simplicity and the level of control it provides over native shells for BEEP.
Capacitor provides our web app access to native SDKs, which we used for cool features such as dynamic styling of the native status bar on Android and iOS. BEEP also ties into native events for a finer control of Android hardware buttons.
Backward compatibility with Cordova was an important factor, given that the Cordova community is so rich with useful plugins. BEEP uses that feature to prompt satisfied users for an app store review.
The Capacitor-generated native code was easy to integrate with Fastlane for simplified manual or CI automated deployments to application stores and testing services such as HockeyApp.
Native users expect rich user interfaces supported with beautiful transitions and animations. Ionic UI components already come with gorgeous transitions which we counted on, but also extended from.
Transitions and Animations Ionic 4 + Lottie
Ionic 4 bundles beautiful platform-specific transitions. However, most views depend on routing and so do transitions.
Ionic-Vue wraps Vue Router with Ionic Router Outlet, which gives Ionic components direct access to routing information. In return, Ionic provided with the eye-pleasing transitions.
Transition capabilities go beyond the built-in features, supporting third-party or custom transitions. BEEP puts that flexibility to the test in the final result view where we alternate transitions for navigating back.
One of our users reported that no other hybrid app looks and feels so native.
As if that wasn’t enough for a fantastic User Experience, our designers came up with a beautiful BEEP animation that we presented with some help from Lottie. You can see that in action with the Bee mascot moving on confirmation screens.
Experimenting with transitions helped capture edge cases in using Ionic with Vue.js, but it also helped us contribute to the global community.
Giving Back to the Open Source
As a reference application, BEEP shows how Ionic 4 apps can be used in Vue, combined with routing capabilities, theming, transitions, third-party API calls, and native integration. This application serves an even greater cause, which is helping the open source community use better software, easier.
As a product of BEEP, Modus Labs created the Ionic-Vue library that helps the community use Ionic in their Vue apps immediately. We were also able to push a number of fixes to several of the technologies mentioned above, which makes us very proud.
If we succeeded in inspiring you to give Ionic and Vue a shot, feel free to try out BEEP and take a peek into the source code. Don’t forget to let us know how it went.
Originally published at moduscreate.com on October 5, 2018.
