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.
app.js file. The Marionette team maintain a list of integrations over on Github.
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.
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:
#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
A quick note: make sure all your
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
Controller will now determine, based on the URL path, which view should get displayed.
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!