guest post: build for devices

We’re happy to welcome Microsoft to the npm blog for a series of how-to’s targeted at npm Windows users. More than 40% of visitors to the npmjs.com website arrive using the Windows operating system, making Microsoft developers a key audience for npm. Today’s post by Jeff Burtoft highlights tactics and best practices in building web apps, including npm packages to help with developing effective device-specific web applications. In future posts, we’ll cover browser compatibility, resilience in web development, and other topics, all with an eye to improving the workflow for the Windows JavaScript developer.

Maybe you already have a successful web app, or you’re starting a new app from scratch, but your goal is the same: you want to reach users. The web is powerful, and has an unparalleled reach since it can be accessed from any device on any platform — however there are a growing number of users who are turning to “apps” to find solutions, and the first place they go to find these apps isn’t the web, it’s the app stores.

Companies are turning to the web as a tool for cross device development. With the powerful, modern tools available to web developers today, it’s no surprise why. Let’s look at some of the most popular of these tools and find what’s best suited to help you accomplish your goals.

Two Approaches to App Construction

When building for devices, your options fall within two main application architectures: packaged content or hosted content. Although there are many “hybrid” options of web apps which blend the hosted and the packaged — as well as the web app with native code — we’re going to look at the tooling to get you going in the right direction. Which architecture do you choose? Look at these descriptions to choose what looks closest to the type of app you want to build.

Hosted Web Apps

Hosted web apps are web apps submitted to app markets that point to web content that remains on the webserver as opposed to being packaged and submitted to the store. Hosted apps have these characteristics:

An app package with minimal code, often just containing store images and offline messaging;
No limitation on the language or frameworks you use to write your app; since it remains on the web server, you can write you code in PHP, Java, ASP, Node.js, or others;
By default, no functionality when device is offline (just like web);
Can share resources with a browser-accessible web app.

This is the most popular type of web app in the Chrome App Market, and a growing trend in many other markets. Hosted apps bring a lot of benefit for companies that already have a fully featured web app and don’t want to start from scratch with native code. This approach also allows web developers not only to continue using their skill sets and frameworks, but to continue using the same workflow they use for the web.

Another benefit of hosted web apps is that you don’t need to push a new version to the store every time you need to update your app.

_{Sway is a Hosted Web App in the Windows Store. It’s indistinguishable from a native store app}

_{Yeti Bowl Is a Hosted Web App In the Chrome OS market}

Many platforms can support hosted web apps, but the process for developing for each of those platforms is different, for now: the W3C Manifest for Web Apps will standardize web apps in the future. When targeting users across devices, you’ll want to try this tool for building hosted web apps:

ManifoldJS

How to install: npm install manifoldjs -g

External requirements: to test in emulators, the appropriate platform emulator may need to be installed:
iOS: Xcode
Android: Android APK
Windows: phone emulator (optional, can be tested direclty in Windows 10)
Chrome: Chrome browser
FireFox OS: Firefox Browser

What it does: ManifoldJS puts the focus on the W3C Manifest for Web Apps — a standards-driven, open source approach for creating apps — and then uses that metadata to create a hosted native app on each platform. When a platform supports hosted apps, they build it natively and then use Cordova to polyfill the platforms that don’t have native support.

More info at https://www.manifoldjs.com

Hosted apps provide you with new and interesting opportunities not possible in browsers through platform APIs. iOS and Android apps can be configured to access Cordova APIs like media capture and contacts and for Windows 10 you get access to all those APIs plus the entire Windows Universal API set. New features can be added to your existing app (by simply feature-detecting the APIs) or you can build a new app with all the same features and advantages of a native app.

The Packaged App

The is a type of web app distributed in its entirety to a user through a single download. Generally, we see packaged apps within app markets. Packaged apps share these characteristics:

Downloaded in their entirety through a store or market;
Generally offline by default, as all the code is living on the user’s device;
Retrieve data from the Internet via services similar to native apps, generally called via Ajax.

_{Vector Runner by TreSensa is a packaged web app in the Firefox App Store. In runs offline just like any other game.}

Although some markets, such as Windows Store and the Amazon Appstore, enable you to submit packaged apps directly to the market without the need of any external packaging tools, if you’re trying to reach a cross-platform user base, you might consider a tool that allows you to submit to multiple markets. These markets also expose additional APIs for packaged apps that aren’t available to apps via the browser.

Cordova

How to install: npm install cordova -g

External requirements: to test in emulators, the appropriate platform emulator may need to be installed:
iOS: Xcode
Android: Android APK
Windows: Visual Studio (optional)

What it does: Installs the Cordova CLI, which will generate the base packages for each of the targeted platform. Cordova also has tools that help you test and package for each platform.

More info at http://cordova.apache.org

One of the benefits of building a store app above that of a native app is the ability to access exciting platform features. Within Cordova, you can add plugins to provide that functionality, and Cordova normalizes the API so that the web code you write can be the same on every platform.

Cordova Barcode Scanner

How to install: cordova plugin add phonegap-plugin-barcodescanner (it uses npm!)

External requirements: this plugin works with Cordova, so you must first install Cordova

What it does: provides a full fledged bar code scanner for your cross-platform packaged app, UI and all.

More info at https://www.npmjs.com/package/phonegap-plugin-barcodescanner

Cordova Push Plugin

How to install: cordova plugin add phonegap-plugin-push (it uses npm!)

External requirements: this plugin works with Cordova, so you must first install Cordova

What it does: provides push notifications for iOS, Android and Windows Universal apps

More info at https://www.npmjs.com/package/phonegap-plugin-push

To learn more about web apps for stores and how they are built, check out these resources: