Main Git commands

											git clone [remote_URL]
										

											git pull origin [branch_Name]
										

											git checkout -b [branch_name]
										

											git checkout [branch_name]
										

											git status
										

											git add/rm [file_path]
										

											git commit -am [Message]
										

											git push origin [branch_name]
										

											git reset --hard
										

Another useful Git commands

											git log
										

											git diff [commit_hash] [commit_hash]
										

											git stash
										

											git stash pop
										

											git checkout -t [branch_name]
										

											git branch -d [branch_name]
										

											git checkout [commit_hash] [file_path]
										

											git tag -a [tag_version] -m [tag_message]
										

											git push origin [tag_name]
										

                                                                                        git checkout [branch] -- [filepath]
                                                                                

Why use Backbone?

• We really need MVC for the front end. Traditional methods leave us with code that's too coupled, messy and incredibly hard to maintain.
• Storing data and state in the DOM is a bad idea. This started making more sense after creating apps that needed different parts of the app to be updated with the same data.
• Fat models and skinny controllers are the way to go. Workflow is simplified when business logic is taken care of by models.
• Templating is an absolute necessity. Putting HTML inside your JavaScript gives you bad karma.

1 - Intro to Backbone

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

1.1 - Backbone essentials

Backbone's core consists of four major classes:

• Model
• Collection
• View
• Controller

1.1.1 - Model

In Backbone, a model represents a singular entity -- a record in a database if you will. But there are no hard and fast rules here. From the Backbone website: Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. The model merely gives you a way to read and write arbitrary properties or attributes on a data set.

1.1.2 - Collection

Collections in Backbone are essentially just a collection of models. Going with our database analogy from earlier, collections are the results of a query where the results consists of a number of records [models].

1.1.3 - View

A view handles two duties fundamentally:

• Listen to events thrown by the DOM and models/collections.
• Represent the application's state and data model to the user.

Why use Sass?

Sass is a preprocessor a meta-language on top of CSS that both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Features

• Syntax
• Compass
• Variables
• Mixins
• Extends

Why use Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests

Why use Grunt?

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Struct

From now on, we are going to try a new struct to develope new backbone apps like could be catalitycs or trends

1 - src/test

test folder has been created to store Jasmine tests

1 - src/main/Resources

resources folder has been created to store documentation and style preprocess files

Contain:
• Documentation generated with Yuidoc
• Style Sass files (not Css)

1 - src/main/Webapp/js/apps

apps folder has been created to store Backbone applications

Backbone App

In order to create or check a new Backbone application, creator must take the following steps:

• Router
• Create Struct
• BaseView
• Check Require

1 - Router

inside js/router.js file, must appear URL and METHOD

								"url":"method"
							

Important! About notation:
• URL: must be lowercase, as specific as could be, and use underscore (_) for composite words.
• Methods & Backbone Apps: must be using camelCase notation

2 - Struct

Every Backbone App must contain the following folders:
• entities: models and collections are placed here
• templates: every Jade/Handlebars must be here
• views: every view must be here ATENTION! inside this folder must appear always a yourappnameBaseView.js

3 - BaseView

In order to simplify create Backbone apps, inside 'router.js' there is a method called 'load backbone' that search inside 'apps/yourBackboneApp/views/yourBackboneAppBaseView.js to init the app, thats why must exist a BaseView.js file.

4 - RequireJs

When maven production task start, uglify every Js code, and use requireJs to avoid ask server multiple times for the same file. To do that, require.js needs a dependencies map, wich is located on 'js/config.js' and contain every dependencies that the app needs.

Style

							grunt style
						

In order to create or check a style file, creator must take the following steps:

• Check deps
• Create a file inside '/custom'
• Link to init file

1 - Check deps

Inside 'resources/stylesheets' folder there are two folders:
• custom : wich are located every style file made by us
• vendors : wich are located every external css lib that our code need

So, if you have to import external css, place it into resources/stylesheets/vendors

2 - Create a file inside /custom

Create a file inside 'resources/stylesheets/custom' folder and wrap it using a div

3 - Link to init file

Inside resources/stylesheets folder there are two files:
• new_sytle : listed some scss file located on custom folder and use BOOTSTRAP v3 to generate new_style.css
• old_sytle: listed some scss file located on custom folder and use BOOTSTRAP v2 to generate old_style.css

Why testing code?

							grunt test
						

• It is our proof/evidence that our code works properly
• Also, is a way to avoid future unexpected problems
• It runs in a controlled environment

Generating a Spec

Inside 'test/spec' are listed all tthe backbone applications that right now exist, just create another folder and using require call your new aplication and start to add tests!

Generating a Spec

Using grunt many important task has been created

• Download external deps/libs using Bower
• Genarting Html files from jade/handlebars
• Generating style files from scss (sass)
• Evaluating JS code syntax using JsHint
• Evaluating JS code works using Jasmine
• Compress and uglify every js files in order to generate main-built using requireJs
• Generating documentation using Yuidoc
• Clean workspace

Main tasks

											grunt production
										

											grunt bower
										

											grunt init
										

											grunt
										

											grunt fast
										

											grunt test
										

											grunt style
										

											grunt notest
										

Documentation

Inside 'resources/js-documentation' exist a file named 'index.html' where you could see every comment that appears on js files.