Creating mobile web apps with Framework7 and Marionette.js
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.
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.
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.
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.