Tools for building Hybrid Apps
Building hybrid apps is easier with the right set of development tools. Hybrid apps provide a greater range of capability than is possible through a mobile browser alone. And while the features and user interaction may be more limited than with native apps, the board platform reach that hybrid apps offer may provide significant business value at lower cost than numerous native applications. However, to get the most benefit requires an efficient toolset to create and maintain apps.
When it comes to hybrid development, Apache Cordova is an effective platform choice for building mobile applications using HTML, CSS and JavaScript. There are a number of tools for developing mobile apps using Cordova, but one I’ve found particularly effective is WebStorm.
Before you start on a new Cordova project using WebStorm, you’ll need to make sure you have Node.js installed so you can use Node Package Manager (npm). Next you’ll need to install the Cordova package, if you haven’t already. The easiest way I’ve found is to install from the command line:
$ sudo npm install --global cordova
Using the global option makes Cordova accessible from any WebStorm project. With Cordova installed you can now easily create a new hybrid app project by specifying PhoneGap/Cordova App project type when you create new project from within WebStorm. This will create a “shell” project with the Cordova web files and libraries added, and you can use that as the starting point for your hybrid app. More detail on how to use Cordova (as well as the popular PhoneGap and Ionic frameworks) with WebStorm, can be found in this WebStorm help documentation.
When targeting multiple mobile platforms, you can spend considerable effort creating graphics resources. A couple of utilities that help with this are cordova-icon and cordova-splash, which automate the creation of app icons and splash/loading screens, respectively. Both of these utilities require ImageMagick, which can be installed on a Mac using Brew package manager:
$ brew install imagemagick
Then cordova-icon and cordova-splash are installed using npm:
$ sudo npm install cordova-icon -g $ sudo npm install cordova-splash -g
With these utilities you’ll create a single App icon graphic and a single splash screen, and execute the following commands to create the image assets for your target platforms, with variations for device sizes and screen resolutions generated automatically:
$ cordova-splash $ cordova-icon
For you app release, you may want to tailor your icons and loading screens for specific devices, but these utilities provide a quick and easy way to get started.
The debate about native vs. web vs. hybrid approaches for mobile app development will continue to rage on for the foreseeable future, and I don’t think there’s a one-approach-fits-all answer. It’s really about making choices that consider the capabilities required, the audience you want to reach, and cost of developing and maintaining the solutions. Whichever technical approach you choose, having an effective and efficient set of tools helps to maximize business benefits.
