I’ve amassed quite a few devices over the years, as I usually hold onto any old ones for the sake of testing mobile applications (in the end, nothing beats testing on a real device). I had a plan to build a sort of “mobile wall” to store my old devices, but aside from the potential cool factor, it wouldn’t have been all that useful.
In the past few days, the Ionic team has turned my little project idea into a potential epic development tool. After a little teasing on Twitter, the Ionic team announced the new Ionic DevApp. In short, DevApp will listen for any Ionic applications being served through your WiFi network and instantly display the application being developed on the device running DevApp. As soon as you make any changes, those changes will be immediately reflected on every device you have running DevApp.
No need to have your device plugged into the computer, no need to upload/deploy your application anywhere, just run ionic serve and you’re good to go.
I decided to finish off my “mobile wall” and set up Ionic DevApp, and now this is what my development process looks like:
Using Ionic DevApp
To use the new Ionic DevApp, you will need to download the Ionic DevApp application to any iOS or Android device that you want to test on. You do not need to be subscribed to Ionic Pro to use DevApp (it is free to use for everyone), but you will require an account.
All you will need to do is log in to Ionic DevApp on whatever devices you want to test on, make sure your devices are on the same WiFi network as your computer, and then just run ionic serve. Any applications being served will then pop up in Ionic DevApp.
Limitations of Ionic DevApp
I see Ionic DevApp as an extension to my browser based development workflow, rather than as a substitute for device testing. In that sense, I can’t see any cons to using DevApp – it just adds some extra screens to test your application on instantly.
It may not be what everybody might hope it to be, though. Here are a couple of reasons why Ionic DevApp isn’t going to completely replace testing/debugging on real devices.
- You can’t debug on the device. Since your application will be running inside of Ionic DevApp, and not directly on the device, you won’t be able to remotely debug your application. If you’re running into device specific errors, you are going to have to run the application directly on your device to debug.
- Not all plugins are supported. Ionic DevApp comes prepackaged with a bunch of commonly used plugins, so to some extent you can test native functionality. However, the number of plugins is limited and if you are attempting to use a less common plugin it likely will not be available. For a full list of supported plugins, you can go here.
- It’s running inside of a container. In the end, you should always test your application as it will be on a real device. This doesn’t mean you shouldn’t use DevApp throughout development, just make sure that you do test your application directly on the device at some point as well.
What About Ionic View?
Ionic View and Ionic DevApp are quite similar, but the Ionic team have stated that Ionic View was not really intended to be a development tool. Ionic View serves as a tool to easily demo your application to others, whilst Ionic DevApp will be better suited to viewing your application throughout development.
Summary
The biggest benefit I see to Ionic DevApp, as I mentioned before, is as an extension to a normal browser based development workflow. Generally, when developing an application I will use Chrome’s DevTools to simulate either an iPhone or an Android device. I will spend a lot of my time looking at just one screen size, but whilst the application may work well for that specific size, there may be problems for other device sizes. Using Ionic DevApp, you can quickly see what your application looks like across multiple different devices, and hopefully any obvious problems are going to jump out right away.
I think this tool is going to be a fantastic addition for Ionic developers, so if you haven’t already… go download Ionic DevApp!