You can see the application here - http://github.way2day.ru/

This application represents a example of Marionette application. The app works with GitHub, using API v3. It showes two lists: contributers and forks of "backbone.marionette" repository (https://github.com/marionettejs/backbone.marionette). Users are able to switch between the lists using simple menu in sidebar.

List of contributers displays nice pictures of the people who comunicate in the repo. In a top of the picture you can see their nicknames. Also you are able to open the person's personal page by clicking on the avatar.

List of froks showes repositories which were branched from this one. You can see simple cards in a list with some information. By clicking on a fork's name, opens fork's page. You are also able to star/unstar the particular fork by clicking on a star icon in a right of the card.

#Marionette MVC

The applisation has been built on a Backbone.Marionette framework. I've used classical MVC structure for UI logic. Getting data from Github API is located in Models, biseness logic, connecting data and markup is located in Controllers, and in Views described mapping of the data to the html DOM.

Sourses of the project are placed in js/dev foulder. There are coffeescript for logic and sass for markup. For compiled files I remined the structure, to be able to see the structure using devtool of browser.

I've used one main scope for the application - GithhubApp scope in which have been added scopes of all needed classes within the app. Main application is defined in app.js.

All static data for authorisation and some app setting are located in config.js file

I've used GithubAPI plugin (https://github.com/michael/github) for this. Finding, that is can't work with starring of repositories, I've desided to extend it. So, now the plugin connects user, gets repo, and does work with starring of forks. Preparing pull request for the master repo.

#CoffeeScript

Coffeescript is powerful and pleasure tool for development, in my opinion. I used it for describing of javascript login of a site.

Result:

I didn't thought a lot about markup. I've used Bootstrap for this. It is fast, crossbrowsery and multydevicing. I used bootstrap-theme.css for main markup and http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css for specific simbols like star and etc.

#Styles

Sass allows to create awesome logic constructions within the front-end applications. It is very handy, but in this particular applicaton it wasn't necessary to use it. Here it's like an area for extensibility.

#Unit testing

I created a structure for covering the javascript logic by Unit Tests and simple examples of using it. Has been used Jasmin framework to describing of test's logic and PhantomJS for running it in console. The tests are located in js/tests foulder.

The results looks like following

Actually the PhantomeJS is able to create super nice html reports. It'll be added in a next version (:

#Grunt

Grunt is an instrument alowes to make a plan of tasks and walk through it automatically. My Gruntfile.js does following:

1. runs COFFEE compiler in order to create .js files form .coffee files
2. runs SASS compiler in order to create .css files form .SCSS files
3. run Jasmin unit tests

Also the application is able to concatinate all javascript files and minimise it, but I didn't do that in order to save visibility