Marionette Tools

A set of tools that you can use in your marionette applications.

Why

Marionette is not as popular as React, but it works. Anyway, my company still use it for a lot of projects and sometimes there is a lot of code that repeats itself. In this way the project drives me nuts and the developer experience sucks.

Also, when you start a brand new project, you have to recreate all your libraries or copy all the code from a project to another. And when you find a bug? You should update all the libraries in all the projects and it could take a very long time.

For these reasons I decide to create this module. For the sake of my company, the Marionette Community and, mostly, the sake of my own developer experience.

The purpouse of this module, is to makes the life easier when developing with MarionetteJS.

How

The idea is to create some Marionette Components ready to use. Just like in React, import the component that you need and use it, like this:

import { List } from 'marionette-tools';

const list = new List({
  el: '#app',
  collection: [1, 2, 3]
});

list.render();

No more repeated code, no more lots and lots of views to create a CollectionView. As you can see you can pass a simple array as collection parameter, the backbone collection will be created inside the component.

Requirements

Font-awesome@5 and bootstrap@4 css are required. Make sure to install them in your project or use a CDN like this:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

Documentation

You can read the documentation here