The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.
html5 hybrid applications
HTML5 hybrid applications
This article is Ready to Use.
What is a hybrid mobile app?
Why does building a hybrid app makes sense?
There are many reasons why building a hybrid application makes sense, such as native app store distribution, or access to native APIs that aren’t available to mobile web apps.
- Use the skills you know and have today - If you’re already an accomplished web developer, building a hybrid app requires a short and easy-to-achieve learning curve, and there are no new languages to learn.
- Distribution through native app stores - Because hybrid apps use the native SDK to wrap the web app, they can be distributed through the native app store, making discovery and distribution easier for users.
- Fast development time - If you already have an existing web app, or code base that is built on the web platform, building a hybrid app is typically faster than writing an app using the native SDK, and because of the ability to share code between platforms, significant time is saved through code reuse.
What are the drawbacks of building a hybrid app?
Hybrid apps do have some drawbacks compared to native apps or web apps, and you must decide if those drawbacks outweigh the benefits of writing a native app.
- Differences in platforms - Like mobile web apps, hybrid apps use the native web rendering engine on the device, which means that there may be subtle differences between the way content is rendered. For example, when editing an <input type="date">, the native date-picker may be provided by one device, but not by another.
- Creating consistent user interfaces - Every platform has its own look and feel, and offers a set of pre-styled controls that developers can easily take advantage of. Mimicking those controls is exceedingly difficult.
- Distributing an update - Updating a mobile web app has a nearly instant return, once your app is uploaded, anyone using it is using the latest version. With hybrid apps, you must upload your app to the app store, wait for it to be approved and then wait as users upgrade from their current version to the newest version.
- Instant access to new platform features - Native apps will typically have access to new SDK features faster than what’s available to hybrid apps. It takes some time for the abstraction layer to be written and made available to developers to use.
How to get started building a hybrid app
- Choose the hybrid framework that works best for you - There are several framework choices available, the most popular is Cordova. It’s an open source project with a strong community and plenty of resources available to help get you going. Porting an existing mobile web app to a hybrid app with Cordova is pretty straightforward. Other frameworks like Titanium may require significant rewriting, but will provide a more native feel.
- Write your app - Whichever framework you choose to use, writing a hybrid app isn’t much different than writing a mobile web app. You should use all of the best practices for building mobile web apps, including CSS3 transitions, transforms and animations for any animations you plan on doing. One strategy is to provide both a native app experience and a web experience for those who cannot install the app.
- Optimize and test your app for each platform you plan to ship on - Making your app look and feel like a true native app is difficult, but optimizing your app for each platform you plan to ship on will help to improve the user experience. Just like you would never deploy your web app without testing it on the major platforms, you should do the same for your hybrid app. Beyond testing different devices, be sure you test all of the different operating system versions as well.
- Upload the app to the app store - Once you’ve tested your app and you’re ready to distribute it, upload it to the app store. Each store has a different process to upload, review and make your app available to users.