Creating mobile web apps with Framework7 and Marionette.js

Framework7 is a HTML/CSS/JavaScript framework to build mobile web applications featuring close to native look and feel. Its programming model is similar to the one used in the jQuery ecosystem: markup annotated with specific classes is augmented to match the desired visual and behavior. Reinforcing the resemblance, the DOM manipulation and event handling are done through Dom7, a library that implements a subset of jQuery methods. I would say that Framework7 is jQuery Mobile done right.

While it is perfectly possible to create fully functional applications using only Framework7, it can be problematic for large projects. That’s where integration with libraries / frameworks like Marionette.js plays a role, providing the primitives to create structured applications.

Getting started

This is what is needed to get Framework7 working with Marionette.js (see pen):

All Framework7 features can be used without an additional layer reducing code payload size and complexity. This characteristic also makes it easier to update to a new version since there’s no need to wait for the bridge code be updated.

A better demo

Let’s see how a more complete demo can be created with marionette.f7, a package that provides a few convenience functions to, for example, push pages or switch between navigation stacks.

The createApp function configures the application. A hash is passed with options key holding the application configuration and views key that defines the Framework7 views

In Framework7 parlance, view is a ”separate visual part of app with its own settings, navigation and history” which can contains one or more pages. Not to confuse with Marionette.js View.

The home page is a basic Marionette View that renders a Framework7 page template. In the click events new pages are created and pushed and navigated to each with a different configuration: the SingleView is pushed into the current navigation stack, the LoginView is pushed into ‘login’ view and PopupView is show as a popup.

The complete code can be found here and a live demo here.

Final notes

Marionette.js integrates seamlessly with Framework7 opening the doors to easily create well structured mobile apps. The down side is that both frameworks comes with their own dom manipulation library (jQuery and Dom7) increasing code size needlessly. This can be overcome by dropping the jQuery dependency with something like marionette.native.

BTW: Framework7 v2 is coming and can also be integrated easily.