Urbini: mobile web apps alliance builder - taking the web back

[urbien]

This is an abstract for an article on open source project Urbini that is a wordpress for mobile web apps. HTML5rocks is a great help for developers, but geeks-that-do-not-code are left out. Urbini allows users to fork existing apps, tweak their [MVC] models in a smartphone browser and publish. How many geeks are there who can't code? I think a lot, may be 100M. Imagine that many people building HTML5 apps on their phone and tablets.

Apps by everyone, y tu mama tambien

• Published app features social login for main social networks, FB Timeline integration, friend invite, profile, push notifications, gamification, wiki-style data editing, search, and lots more. Library of addons provides local, maps, virtual currency, p2p, b2c commerce, etc.
• Urbini extended requirejs AMD loader with a mix of appchache, LocalStorage, and dynamic asset bundles. It makes offline support, versioning and upgrades of models, views, templates, css, third-party libraries, images and fonts totally hidden from the app maker.
• Urbini makes offline apps work by painting from IndexedDB or WebSQL. Local DB auto sync with the cloud database and auto-conflict resolution requires zero effort from the app maker.
• Urbini builds UI 100% automatically from the user-defined models. It employs for that Jquery Mobile with a set of OSS plugins/widgets and backbonejs. Urbini will allow to choose between JQM and Twitter Bootstrap in the future.

  App network, all together now

Yet, Urbini's most important capability is that the final app is able to work together with other apps, using a shared graph. Sharing between apps requires no API and allows to copy-paste [MVC] models to exchange data between apps, in a style somewhat resembling IFTTT. What does this mean for the future of apps? Facebook demonstrated that a shared cloud database makes for a much simpler third-party app creation and information dissemination. But Facebook allows only a limited amount of built-in types. Urbien, company behind Urbini, created a similar graph of unlimited custom types, Mary Meeker from KPCB thinks it is a big deal.

See sample Urbini apps, screenshots and live demo on Urbien.

[cwilso]

We don't generally post articles such as this, unless they are deep dives into specific new HTML5 functionality areas.

[urbien]

@cwilso Sorry if I have not indicated in the abstract my intention to dive deep. I am planning to describe how we used offline storage as a combination of appcache, LocalStorage and IndexedDB. We had to overcome problems with appcache (oh boy, but can't live without it either). We used requirejs, communicated with its creator James Burke's on how to augment it with the offline storage for modules, and per his suggestion had to use undocumented api in requirejs to make it work. But performance was lagging, so we ate the bullet and ended up writing our own AMD loader, based on jquery deferreds, which uses a combination of appcache, LocalStorage, with the overflow going to IndexedDB. We also used IndexedDB for automatic syncing with server-side database. We can describe the algorithm we developed for a sync, which supports both structured data and media files (video recording) and conflict resolution, etc.

Video recording in HTML5 is a hack at this point, as the only way to do it is by putting frames in canvas, getting them as webp images and combining into webm movie. Unfortunately works only in Chrome, as Firefox has not yet added support for webp image format.

As a base layer for sync, video and AMD module storage IndexedDB was unstable (especially in Chrome), so we had to develop a queueing system to separate DDL operations from the regular transactions. I have seen developers complain about the problems we had with IndexedDB but have not found any solution on the web. The problem occurs if you want to dynamically change the DB structure (add columns, indexes or object stores). It is a timing issue, so it is damn hard to catch.

We recently focused on WebRTC and have working live video calls peer-to-peer and call-center style, text chat, file exchange, and later screensharing. Also had to overcome many problems with signalling and browser mismatches. We are continuing with WebRTC and are now working on Firefox push notifications, and later will work on Chrome's. Testing on Firefox for Android and FirefoxOS and getting help from Mozilla and Telefonica developers. Push notifications is probably the most important HTML5 development to close the gap with the native apps, as web app can now run as a service. Or rather not run at all, but get woken up on a notification from the server, so essentially act like a service.

The biggest area of performance problems we have left is with jQuery Mobile. The many optimizations we had to add helped a lot, but the gap with the native apps is still too wide.

If any of the topics above explored in depth is of interest, please let me know.

[cwilso]

@urbien I think an article around offline storage as combination could be interesting; WebRTC article could definitely be interesting.