Say goodbye to lengthy development build cycles!
Mobile app development with hybrid tools like Cordova/PhoneGap works great, but there is a catch – development turnaround times can kill you. This post will help you preserve your sanity as well as let you do faster prototyping and get more apps done.
What’s the problem?
When developing or prototyping a mobile application, for example, editing a text label in the UI, updating a color value, or making a tweak to the CSS stylesheet – it can take up to a minute to see the result on a mobile device. Alternatively, parts of the application could be developed in a desktop web browser, pressing reload for each update and the result in an instant, as is common practice in web development. But that will neither show the true result on the target device(s), nor give access to any of the native functionality in the application. Traditionally, rebuilding and compiling the app anew has been the only way to see the end-result for real.
JavaScript is a dynamic language, and development of hybrid apps should be more like coding in Smalltalk, Ruby, Python, Lua, Lisp, or whatever favourite dynamic language is used.
Developing in JavaScript should NOT require this lengthy edit-rebuild-deploy-run cycle:
- Edit the code
- Press CTRL+S
- Switch to command line window
- Run command: e.g. cordova build android
- Wait…
- adb install -r platforms\android\ant-build\MyApp-debug.apk
- Wait…
- Manually launch the app on your device
- See the result….er…loop back to edit…
Evothings co-founder Alex being grumpy about lengthy build cycles:
The DIY solution – run a local web server
Hybrid apps run inside a web view component, which is just like a web browser without a user interface. Since reload works in any web browser, we can create a much faster and more fluent development experience for hybrid apps, where changes are reloaded instantly on each update without any need to restart the app.
The most simplistic solution would be to run a web server on the development machine, and put a reload button in the mobile UI. You could even connect multiple devices and see the result at the same time on e.g. an iPad and an Android tablet (you would have to tap Reload on both devices though).
To set this up in a Cordova/PhoneGap environment, make your app connect to your web server when it starts. You can either edit the start page in the config.xml settings file in the Cordova project, making it point to your web server:
Or you can put this code in your index.html page (note that for both methods you will need to use the actual IP-address of your web server):
<script>window.location.assign('http://192.168.0.101/index.html')</script>
And the JavaScript code to go on the reload button is very simple:
<button onclick="window.location.reload(true)">Reload</button>
The parameter value true means that the page reloads without using the browser cache (you might also need the update the web server configuration to turn caching off).
The development cycle is now already faster and have fewer steps:
- Edit the code
- Press CTRL+S
- Tap Reload button on the device
- See the result
Which is much better!
However, there is a major catch in that Cordova JavaScript files (cordova.js and plugins) are stored in a special folder in the Cordova project, and will by default not be found by the web server. These files would have to either be moved to a location where the server can find them, or you could modify the web server to look for them in the proper folder. The situation is complicated by different platforms using different versions of the cordova.js files, so the web server needs to be able to handle that.
So we are not fully happy yet!
An easy, fast and fun solution
Setting up and running a web server can be tricky and require several extra steps before everything is up and running.
To make development faster and easier, we started to develop a server with an easy-to-use user interface that requires zero configuration to get going. In the process, we also investigated ways of taking the concept of live update and short build cycles even further. Our goal was to make the running app instantly reload changes as soon as the code is updated.
Implemented in Evothings Studio the workflow is now faster and more efficient:
- Edit the code
- Press CTRL+S
- Instantly see the result on all devices
The developers at Evothings also thought it was important to be able to use any editor for writing code. And here we are. Regardless of the editor used, the server software detects the updates made, and pushes the updates to each connected mobile device instantly.
In addition, we made the server look for cordova.js files in the Cordova project folders, and serve the correct version depending on the client platform. (As a side note, when running an application using the Evothings Client, the cordova.js files are bundled with the Client app and retrieved locally, so using Evothings Client should work with any web server.)
A happy Alex coding a hybrid app with Evothings Studio:
Alex was so happy he made a video:
How you get started
To get started really quickly, install the Evothings Client app on your mobile device(s). Evothings Client is an app available for iOS and Android that is designed for use with Evothings Workbench. This means you don’t have to mess with building your own Cordova/PhoneGap app to get started. Furthermore, your get a nice Scan button to detect running servers, so you don’t have to figure out and enter the server IP-address manually. Just press Scan and then connect to the detected Workbench server.
Evothings Client comes with a selection of Cordova plugins that make it especially easy to write apps that connect to things, popularly called the Internet of Things (IoT). For example, you can develop apps for Bluetooth Low Energy (BLE), fabulous iBeacon apps, or apps that use true socket networking (not WebSockets) to communicate to e.g. Arduino microcontrollers, all using the fast workflow of Evothings Workbench.
Using Evothings Studio with Cordova/PhoneGap
You can use Evothings Studio directly with your Cordova project. To get started, just drag and drop the index.html file of your project into the Workbench window, then edit config.xml in your Cordova project to connect to the IP-address displayed in Evothings Workbench. Build and run your Cordova app, then press Run in the Workbench and you have live reload enabled! The full process of live-enabling your Cordova project is detailed in the documentation.
Under the hood
The way Evothings Workbench does the reload-on-save trick, is by running a web server that has the following additions:
- A file system monitor that detects any file updates
- A live network channel to all devices connected to the web server
The live channel is used to send the “reload” message to the device(s). For this, the socket.io library is used. When the web view on the device requests a page, the web server inserts a script tag that will load a reloader script. That script opens a socket.io connection to the server, which will listens for reload events. No modifications to the application code are needed to make this work.
If you are curious, or want to tweak the system further, you can look at the source code included in the folder “hyper” of the Evothings Workbench distribution. The Workbench is written using node-webkit.
Visit the Evothings Forum to share experiences, ask questions and find answers related to apps for IoT.
Welcome to the world of snappy hybrid app development!