yoscrum

scrumboard app created with the yeoman angular-fullstack generator

Link: https://yoscrum.herokuapp.com/task

intro

I decided to use the great yeoman angular-fullstack generator, whose purpose it is to create MEAN stack applications, using MongoDB, Express, AngularJS, and Node. It's also capable of scaffolding lots of boilerplate code, which saves time and resources at the development.

architecture

technologies

Web Server: node.js
REST API: node.js
Frontend Application: Jade, AngularJs, Materialize
Websockets: socket.io
Persistence: mongoDB
Testing: Jasmine, PhantomJs, Karma

frontent framework

The main reasons I prefered AngularJs over BackboneJs are:

it provides two-way data binding

traditional way without two-way data binding

<div id="greet-form">
    <input type="text" class="user-name" />
    <div class="user-name"></div>
</div>
<script>
    $('#greet-form input.user-name').on('value', function() { 
        $('#greet-form div.user-name').text('Hello ' + this.val() + '!'); 
    });
</script>

with two-way data binding and AngularJs

<input ng-model="user.name" type="text" />
Hello {{user.name}}!

bigger popularity & community

cleaner & slimer markup

AngularJs

<ul> 
    <li ng-repeat="framework in frameworks" title="{{framework.description}}">
      {{framework.name}} 
    </li> 
</ul>

BackboneJs

<ul> 
    <% _.each(frameworks, function(framework) { %> 
        <li title="<%- framework.description %>"> 
            <%- framework.name %> 
        </li> 
    <% }); %> 
</ul>

steps taken

install yeoman & generator

install yeoman npm install -g yo
install angular-fullstack generator npm install -g generator-angular-fullstack

scaffold the app

Make a new directory, and cd into it: mkdir scrumseraya && cd $_
Scaffold the base app yo angular-fullstack scrumseraya
Interactively choose the technologies you want to use. I decided to use

Client
- Scripts: JavaScript
- Markup: Jade
- Stylesheets: CSS
- Angular Router: ui-router
Server
- Database: MongoDB
- Authentication boilerplate: Yes
- oAuth integrations: Facebook Twitter Google
- Socket.io integration: Yes

Scaffold the Endpoint yo angular-fullstack:endpoint task

This will create the model and API on the server:

server/api/task/index.js
server/api/task/task.spec.js
server/api/task/task.controller.js
server/api/task/task.model.js  (optional)
server/api/task/task.socket.js (optional)

Scaffold the route yo angular-fullstack:route task

This will create the client files:

client/app/task/task.js
client/app/task/task.controller.js
client/app/task/task.controller.spec.js
client/app/task/task.jade
client/app/task/task.css

Extend the schema by editing the /server/api/task/task.model.js file

var TaskSchema = new Schema({
  name: String,
  info: String,
  estimation: Number,
  status: String,
  personResponsible: String,
  active: Boolean
});

Add to the controller on the client client/app/task/task.controller.js

populate $scope.tasks = []; array by consuming the /api/tasks api
methods for CRUD functionality

Complete by implementing the view client/app/task/task.jade and stylesheets

deployment

clone yoscrum and cd into it:

git clone https://github.com/takahser/yoscrum && cd yoscrum
scaffold a heroku app:

yo angular-fullstack:heroku

As we are using mongodb, add an addon that provides a mongodb. Instead of the mongohq addon mentioned in the documentation we use mongolab as it provides a free plan.

add the mongolab heroku addon that provides mongodb by changing into the dist/ directory and running

heroku addons:add mongolab:sandbox
change back to the root of the yoscrum application folder and run

grunt build

to build the app to the dist/ directory

deploy the app using

grunt buildcontrol:heroku

takahser / yoscrum