MarionetteJS + Brunch

This is actually funny, I was on my way to write a medium article on how to best (in my opinion) structure a MarionetteJS Skeleton when some time later I found out an incredible tool that solved not only that problem but also a ton of others.

First off all, I understand that Backbone is not famous as it used to be since there are other options like React or Vue, still to be frank, I love Backbone the most out of all frameworks out there, it may have its defects and may not have as much visibility as the other ones, but I loved how Backbone works from day one and its still my preferable choice. Its true that Backbone is very lightweight and that translates as not having a lot of things out of the box, but that’s where MarionetteJS shines, as it took the greatness of Backbone and made it better :D

But out with that :P Like I said before, I was on my way to make a medium article about how to structure a MarionetteJS skeleton when I found out this awesome tool called Brunch. Brunch is essentially a Task Runner like other ones that you may have heard before like Gulp or Grunt but in my opinion so much better. Remember those gigantic config files that you had to create so gulp&grunt could run their tasks? forget about that :D Brunch simplifies all those default processes like bundling, serving, watching, uglify lessify, … in just a couple of lines. Here’s an example code from their website:

Brunch can have such a short config file because it assumes certain things in your project, like css being in a folder called styles, or your project code being in a folder called app (note, you can change this if you want). Most of the tasks (bundling, minification, …) are done via plugins and the incredible things is that you don’t need to instantiate them anywhere in your brunch config file, as long as brunch plugins are saved in the package.json, Brunch will assume that you want to use them and will load them automatically, SO AWESOME :D. The only time you need to put those plugins into the config file is if you want to specify custom rules to them, and in most cases you wont.

Another think I love in Brunch (and really the thing that made me know Brunch in the first place) is the Skeletons, YES! Brunch comes with the option to download skeletons that are already prepared to be served, begone with the tedious job of making the boilerplate of your project, you can simply download a skeleton project, modify it as you need and you are good to go. There are already tons of skeletons with tons of different dependencies and if for some reason there’s not a skeleton that suits your needs, you can just make one and upload it to their list.

As for MarionetteJS, there’s a really good skeleton already listed and which I really recommend to use, created by #denar90 at github. (Kudos for you man ;D )

As my future MarionetteJS articles are going to use Brunch + based #denar90’s skeleton, I wanted to let you know about both of them.

But even tho I really like Brunch, I highly advise you to go into their website and take your own conclusions, as that will also make you better understand the Brunch ecosystem and how it operates. In my next article I’ll create/explain a simple MarionetteJS project using #denar90’s skeleton so it would be cool if you already had some notions of them.

Hope you enjoyed the article and until next time ;)