Easy start with javascript frameworks using Marionette.js

Published in

Marionette.js blog

2 min readDec 27, 2016

This article is going to be helpful for people who just started learn javascript frameworks. Some of you might be aware about this and other articles which are describing how it’s hard to dive into javascript world. We decided to write this article to make lives easier for people want join javascript community.

There are a lot of libraries, frameworks, tools and other stuff which might confuse javascript newcomer. If you knew something about javascript and want to try some javascript framework then we propose Marionette.js.

In this article we will try to create start page creating html page and writing some javascript code using Marionette.js without any build tools or other stuff which can confuse you.

Note: Marionette.js is build on top of Backbone.js and as Backbone.js can’t work without jQuery, Underscore.js.

Lets write some code! First of all you have to create an html page with all needed dependancies.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>First application with Marionette.js</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.1.0/backbone.marionette.js"></script>
</body>
</html>

Note: Scripts are loaded using cdn, instead of copying files locally.

#app is the main region where all content using Marionette.js will be rendered.

We need to create some javascript file but, before doing that, we should look at the documentation.

So we will extend Marionette.Application class to create our own. We use for this inheritance principle.

var App = Marionette.Application.extend({
  region: '#app'
});

Now, to show something in our region, we need to create a view.

Note: Here docs about views.

var View = Mn.View.extend({
  template: '#template-layout'
});

The template for View is a jQuery selector to a script tag in our HTML body. For this example, we're using Underscore template engine

<script id="template-layout" type="x-template/underscore">
  <div id="content">
    <h1>&nbsp;</h1>
    <h2>Welcome!</h2>
    <ul>
      <li><a href="http://marionettejs.com/">Marionette.js homepage</a></li>
    </ul>
  </div>
</script>

To show View in main region lets use showView method when application starts. Final code of Application Class will be:

var App = Marionette.Application.extend({
  region: '#app',

  onStart: function() {
    this.showView(new View());
  }
});

Lets put all code together in some file, call it app.js and include it in html.

(function() {

  var View = Mn.View.extend({
    template: '#template-layout'
  });

  var App = Mn.Application.extend({
    region: '#app',

    onStart: function() {
      this.showView(new View());
    }
  });

  var app = new App();

  app.start();

})();

Note: All code is put in closure to prevent variables leaking into global scope.

Final working version you can find here.

Note: It uses ES2015 features.

If you got any troubles, just chat with us.

Thanks.

Easy start with javascript frameworks using Marionette.js

Written by Artem Denysov