A Basic Marionette App
Marionette 3 gives more direction for structuring your application than ever before. In this post, I’ll outline a simple structure that I use as a base for creating my applications and a couple of pointers for expanding on this.
Prerequisites
For this, I’m assuming you have a rough handle on the ES6 syntax in JavaScript and know how to compile to an app.js file. The Marionette team maintain a list of integrations over on Github.
The Structure
The way I like to start my application is to think about the high level structure: what information does the user need to see and how will they progress through the application? It’s at this time we’ll need to consider things like what states are visible by loading the URL and how you want to represent that.
Let’s check out this basic structure here. There’s a bit more to it than just some simple views so I’ve highlighted the parts that I’ll be talking about in Red: the Application and your Root View.
The Application is a literal instance of Marionette.Application and contains a single region that you use to display your Root View.
Making it Work
You’ll probably want to see some code now. Fear not, for this is now the time!
Let’s create a simple index.html that contains our app:
Notice the #root identifier — this can be anything but you’ll need to remember what it is for your next bit:
This outline should give you an idea of how a basic application can be built with just an Application object. This will create an initial root and render it. From here, we’d then set up our application with the views we need to display.
What About Routing?
There’s a few different options for routing in Marionette. For this post, I’ll focus on the in-built AppRouter class.
A quick note: make sure all your AppRouters and Routers have been instantiated before you run Backbone.history.start(). Creating new routers when the history is active will result in errors.
You can now see the Application’s sole purpose is to set up our root View and start the routing logic. Once the root view is shown in the DOM, we pass off control to our Controller class. The AppRouter and Controller will now determine, based on the URL path, which view should get displayed.
Next Steps
And that’s our initial skeleton application in place! This is roughly the setup I use for my Marionette applications and I’d recommend it as a good starting point to build your own applications.
Next time around I’ll flesh out some views and server interactions. Keep an eye on this blog as we’ll also be publishing sneak peeks of incoming Marionette features! I’ll see you all then!
