MarionetteJS + Brunch Part 1 — First Steps

This article is part of a series about MarionetteJS and Brunch.io. While I try to keep the articles as abstract as possible so they wont depend too much on previous ones, I would encourage you guys to read all the previous articles as I go about explaining tons of concepts that may help you understand the articles better.

< Previous
Next >

Hey there!

So, I previously wrote an article about Brunch and how I would start writing MarionetteJS articles using it, so if you want to have a better insight you can read all about it in here. In this article we will start small, installing all the software we need, understanding how Brunch works and clone our boilerplate project. So lets get going!

Attention! I will assume you already have the basic knowledge about Javascript, ES6 & NodeJS, if not please go look for some information about them as this articles will heavily use all of those three and I wont go in detail about them since its out of scope. (Maybe in future articles :D)

Requirements:

• IDE/Editor (whatever you use to code your projects)
• Git/bash console
• NodeJS (ships with npm)
• Brunch

Installing nodejs its relatively simple, if you are on windows you can simply download the latest version from their website, and if not I would highly recommend you to download n (a Node version management), that can simplify your life when you want to do something like removing node versions and downloading new ones.

Also, if you are a windows user, you will need a bash console -the most common its Git-Bash - in order to run some specific console commands (And lets be fair, nothing beats a bash console), so if not for this project alone you should use a bash console for development purposes every time.

Brunch

Brunch is a very cool and lightweight task manager for your projects, it takes all those painful tasks of bundling, minifing, unglifying, placing watchdogs, and so on and so on. Yes there’s already tools for that like Grunt, Gulp, Webpack, you name it, and chances are you already used at least one of them, but if so you know how learning them can be a pain in the ass, especially if you move from one to another as you have to learn the config file structure and new commands to make it work.

Also, the config file of those task managers can become very extensive and difficult to maintain. With Brunch all that is simplified :D It terms of commands, there’s only three you have to learn:

• brunch new to create a new project
• brunch watch to live-compile
• brunch build to build
• --production flag used to build a production environment

That’s it! Those are all the commands you will ever need to know in order to work with Brunch, and they are all intuitive so you can guess what they do even without someone explaining them to you.

The config file is also ridiculously small! Brunch assumes certain things about your project structure and if you stick with the defaults, you won’t need to setup almost anything in the Brunch config file!

But what about plugins? Frankly what makes all those other task managers config files that big is the config parameters we need to set so the plugins know what to do!

Well, Brunch also has defaults for plugins!!!! Seriously, you don’t even need to place the plugins at the config file, as long as you have them saved at package.json, Brunch will assume you want to use them and will load them automatically. Imagine you download a lessify-brunch plugin, so long as you follow Brunch conventions and have all your .less files at the styles folder, the lessify-plugin will look in there and do its job. Done! It just works, and you wrote 0 code lines to make it happen!

The only time you have to setup plugins into the config file is when you want to specify specific behaviours to them in order to overwrite the default ones, but even if you need to do so, the config file will still be very clean.

Please keep in mind, there’s obviously limitations to Brunch, its not the Holy-Grail as none of the others are either, there are things that probably something like webpack is better at doing like Hot Reload but ultimately is up to you to decide whats better for your case, I personally like the simplicity and efficiency of Brunch and I'll keep with it for the time being.

Clone Skeleton

Now that we have both Node and NPM installed, we can download Brunch. We will do it at a global scope so it can be accessed anywhere in your machine. To do so, simply open the console and type:

$ npm i -g brunch

Now we need to clone our project skeleton from brunch repo, to do so open a terminal in wherever folder you want to keep the project and type:

$ brunch new [name_of_the_project] -s marionettejs

(Note: replace [name_of_the_project] with the actual name you want to give to the project)

This will automatically clone the marionettejs skeleton from denar90 and install all the dependencies needed from package.json.

That’s it, we have our boilerplate project working, all you have to do is type in $ npm start at the project folder and it will compile and be available through localhost, its as simple as that.

Next article I will start to focus more on MarionetteJS so stay tuned and I really hope this articles help you in any way :)

Peace.