Building Ionic DevApp with Ionic
Earlier this week we took the wraps off our new developer-productivity app: Ionic DevApp. Ionic DevApp helps Ionic developers test immediately on an iOS or Android device, without installing Native SDKs or managing device profiles. Read more about the announcement on the blog and we hope you find the app a useful addition to your workflow.
DevApp was built with Ionic, and I’d like to talk a bit about how the app was built and how we used Ionic and our new Ionic Pro services to quickly iterate and ship on iOS and Android.
Early Motivation
The DevApp was initially built in-house to solve one of our own problems: we needed to move more quickly with testing some complicated native changes we were making to Ionic’s keyboard support. Considering the device environment is not the same as just testing in a simulator or a browser on device, the work had to be done through the slow process of rebuilding and deploying to device.
The DevApp was built to make our own testing in a real native device context much faster and easier. Once we got the app working for our own needs, we realized it’d be useful for everyone else, too.
Building the UI
DevApp is an Ionic Angular app using version 3.x of ionic-angular and version 4.x of Angular (at the time of this writing).
The app utilizes a split-pane UI at the core with a side menu that turns into a drawer on smaller screens, and expands to stay fixed on larger screens:
This design is achieved using this pseudo-markup:
Beyond the split pane UI, the app has a pretty simple UI based around a list of discovered services that launches in a new webview instance for each app loaded.
Fixing Launch Issues in real-time
At Ionic, we use our own products to build all of our apps, and DevApp is no exception. In fact, DevApp is one of the first to use Ionic Pro, our new service that enables Ionic developers to push updates in real-time (without needing to re-publish to the app store), track runtime errors back to TypeScript, and more.
When we pushed the big red button and published DevApp to the app store, we were faced with everyone’s worst nightmare: a fairly serious post-production bug in the app. With Pro Monitoring, we were able to track the error and, with Pro Deploy, immediately push a fix for the bug.
We’re now actively tracking issues with Monitoring and if anything comes up, pushing an update is as easy as doing a deploy in Pro.
Learn more about Ionic Pro and the Deploy and Monitoring features.
Enabling Native Support
To enable native feature support, DevApp ships with a large number of Cordova plugins (over 70, in fact, see the full list). This means that the app will only support native features that are available in the DevApp binary we ship to the app store, so we try to include a wide variety.
Ionic DevApp shares a decent amount of functionality with Ionic View, now Ionic’s external beta testing app (the original app forked into two new apps). Both apps work by providing a Cordova runtime layer to an Ionic app running in a browser environment. That means we have to do some work to enable the opened app to have access to Cordova.
On Android we proxy requests to cordova.js and the related plugin scripts to files in the DevApp bundle and stream them back. To the end-user app, it looks and feels like a full Cordova environment, but it’s proxied through our DevApp. The iOS approach isn’t quite as straightforward (relies on injecting a script at runtime) but achieves the same purpose.
Open Sourcing Ionic Discovery
One of the key pieces of DevApp is the ability to automatically detect ionic serve instances on the network. This functionality relies on a networking technique known as Service Discovery.
There are a few ways to implement Service Discovery, including Bonjour, Multicast DNS (mDNS), and UDP broadcast. While the first two techniques work really well on OS X, we failed to use them reliably on Windows, either through existing libraries or a custom implementation. Additionally, libraries available for Bonjour in particular rely on native libraries that didn’t consistently compile on certain platforms.
Fortunately, UDP Broadcast, while a bit simplistic, works reliably on all platforms and can be implemented through a pure JavaScript node library and does not rely on custom native code.
UDP Broadcast works by sending a UDP packet to a network’s broadcast address, a special address that enables a packet to be received by all network hosts on the same subnet. This is why devices using DevApp must be on the same network and the same subnet as the machine running ionic serve.
We’ve implemented this design into an open source Node library called Ionic Discover.
Dogfood Grows on You
We believe that the best way to build a great developer experience with Ionic is to dogfood it for serious projects, and be hyper critical about it in the process. The DevApp has led to a number of immediate changes, and some long term changes we can make to Ionic and the tooling around it to make it easier and more powerful to use.
Additionally, we think Ionic Pro gives developers some key benefits on top of the traditional mobile development lifecycle, and by using it ourselves we were able to fix and improve a number of parts of the service.
Please give DevApp a try, and we hope you enjoy the app!
