Developing Interactive, Scalable HTML5 Apps on the Cheap: Serverless, Unhosted, No Backend, BAAS, PAAS, Oh My

I’ve written before how HTML5 is the platform of the future for developing interactive educational apps, and you can even develop (code) in your browser (or chromebook) now.  Well, the future is here, and HTML5 is still looking to be the best option, but there are some wrinkles.  One is the slow pace of multimedia support in HTML5, in particular audio (a counterexample is 3D, in the form of WebGL, which is coming along faster than I expected).  Two other things are actually good, but still challenging problems – 1) the explosion of HTML5 and Javascript frameworks: Meteor.js, AngularJS, Ember, Backbone, CanJS, Knockout, yadda yadda yadda (I’m particularly excited about Meteor, but none of these frameworks seem to have “ease of use” in their vocabulary, and accessibility is usually an afterthought, if considered at all – Dojo being one exception), and 2) the explosion of languages that compile to JavaScript: Coffeescript, Dart, TypeScript, yadda yadda yadda (Dart is one that interests me at the moment).

But one problem in particular has been my biggest hurdle, which I discuss more here: the cost of scalable hosting.  With “old-fashioned” desktop apps or single-user applets or web animations or games, you can fire and forget it.  Develop your app or site, slap it up on the web, and people download it or visit it and use it.  Static web hosting is practically free (like this WordPress blog).  However, if you want social features, persistence (database), or other things like that, you need to have a database or other backend at minimum, and it needs to be able to scale.  I’ve always had my hopes up for Drupal – it is still my favorite go-to solution for social but non-interactive web applications, and several folks are using Drupal as a backend for HTML5 or mobile apps, but it is not so easy or so cheap to scale up.  A lighter weight alternative to Drupal, perhaps built on node.js and MongoDB, has not yet emerged.

nobackend logo unhosted logo

The Serverless, Unhosted, No Backend Options

Anyway, so, one hurdle to developing interactive educational HTML5 applications on the web is the cost of scalability.  Web hosting is cheap (or even free) at the beginning, but can quickly spiral out of control and sometimes lock you into a proprietary platform (like google appengine).  I could get a grant, but what about when the funding runs out?  I could beg for money by posting my ugly mug at the top of every page like Jimmy Wales did on Wikipedia, but I’m not a sadist.  I’m not a venture capitalist/entrepreneur, and unfortunately, I’m not at a university that supports or provides web application hosting (I used to be able to just run apps off the computer under my desk as an undergrad, grad, and professor, or by running cheap virtual private servers for as little as $15/year when scaling up wasn’t much of a concern).

Here are some sites that describe lower-cost, open source, and scalable cloud hosting solutions, by either letting visitors host their own data (in their browser’s local cache, or on dropbox or google drive or another site), or by using a cheaper backend-as-a-service that your front-end connects to. [Really, none of these (except WebP2P) are completely “serverless”, and many do not eliminate the costs, either, but it is progress.]  Various terms have been used for some of these concepts: serverless, no backend, unhosted, and there are also new and cheaper cloud hosting services that provide a backend-as-a-service (BAAS) or a platform-as-a-service (PAAS).

  • No Backend – “a new approach to build data driven apps without thinking backend.” See the solutions and examples listed.
    • Firebase and deployd, for example, while not removing cloud hosting costs, make it much easier to develop the backend for web and mobile apps.
  • Unhosted – “freedom from web 2.0’s monopoly platforms” – came before the “No Backend” movement and looks to be completely open source and not tied to one third-party platform. Their site also lists various tools and example apps that let users control their own data.
    • Nimbusbase is an interesting option that uses Google Drive or Dropbox to store your user’s data.
    • And here’s a sample PouchDB & CouchDB-based conference scheduling app that also works offline. (Just as some have stated a mantra that we should develop HTML5 applications “mobile first“, some have also stated that we should try to develop with “offline first” support, too, and to that I would also add “accessibility first“)
  • WebP2P (peer-to-peer) is an effort that builds on top of WebRTC (real-time communication) to allow for truly serverless web apps – apps that connect from browser to browser.  It is still very new, and only supported by bleeding edge versions of Chrome and Firefox (although there is a WebRTC datachannel polyfill to fill in some of the functionality for other browsers).  See the WebP2P mailing list and WebRCT Google+ page for more info and examples.
    • ShareIt, based on DirtyShare, is a proof of concept that allows you to share files from your browser
    • PeerJS wraps the WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer data API.
    • Open Peer is another WebRTC-based P2P Protocol & Specification
    • GrimWire is a RESTful Browser OS that does Peer-to-peer over WebRTC.  It is built on the Local framework, which allows you to securely run user applications on the page using Web Workers.
    • KadOH (Kademlia Over HTTP) is a framework to build P2P applications for browsers and node.js. By implementing the basis of the Kademlia DHT used for decentralized peer-to-peer networks.
    • hackview is a webRTC based multi-person video chat with a collaborative editor
    • There are several other WebRCT based video chat apps and demos: appRTC is a basic demo, veckon is more polished, conversat.io adds a lunar lander game for you to play while waiting for others to join you, and the folks at Mozilla have a widget to embed video chat into your own website.
    • There are various WebRCT SIP/VOIP gateways becoming available.
    • The AirTheremin uses WebRTC and the Web Audio API to let you control sounds using gestures in front of your webcam
  • Data URIs – New browsers support very long URLs, and you can actually store quite a bit of data in it, such as text or even an image.
    • Shortly is a serverless pastebin service that uses this technique
    • Jot is a note-taking app that also lets you encrypt your notes with a password through a client-side javascript encryption library
    • The webSemantics Data to URI Converter will convert your image to a data URL
    • DataURL will similarly convert files or images to data URLs for embedding in HTML or CSS files
  • Back toward more server-centered strategies, the Backend-as-a-Service (BAAS) and Platform-as-a-Service (PAAS) Wikipedia pages list several cloud hosting providers, none of which really solve the cost issue, because you still have to pay for scaling up, but they can be cheaper on the whole than prior solutions.
    • OpenShift by RedHat is an open source PAAS that I have found very interesting, and it appears to be very reasonably priced (and free for the entry level).  You can host anything with it, node.js, Drupal, Java, etc.
    • The BAAS market appears to be a very hot topic at the moment (see this BAAS ecosystem map), especially after one provider, Parse, was bought out by Facebook.  But Apstrata is one that looks interesting, because you only pay by the number of users you have (under 500 is free), and it is made to work with Dojo Toolkit (and other options), which as I mentioned is accessible and also incredibly full-featured.

For an older article that hinted on this “serverless” trend, see Why The Future Of Software And Apps Is Serverless, and a newer article explores the No Backend movement in more detail: NoBackend: Front-End First Web Development.

Tagged with: ,
Posted in drupal, html5, opensource, programming, software, technology
One comment on “Developing Interactive, Scalable HTML5 Apps on the Cheap: Serverless, Unhosted, No Backend, BAAS, PAAS, Oh My
  1. Doug Belshaw says:

    Hi Doug, I just wanted to thank you for flagging this up to me recently. I found it super-helpful in following-up some research as a result of Vinay Gupta and I submitting our ‘Firecloud’ idea to the Mozilla Hatchery.

    More here: http://literaci.es/firecloud

    We heard today that we’ve been given the go-ahead to pursue it further, so looking forward to doing lots more reading!

Comments are closed.

Archives

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 4,340 other followers

%d bloggers like this: