node package manager

essence-olive-3-frontend

Olive 3 Frontend

Build Status codecov.io

Install

Docker installation (recommended way)

From the project root, you need:

  • (for Linux) Install docker and docker-compose

  • (for Mac) Install Homebrew , cask and Docker Toolbox:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    brew tap phinze/homebrew-cask && brew install brew-cask
    brew cask install dockertoolbox
  • (for Mac) Create a docker machine:

    docker-machine create --driver virtualbox olive3
    docker-machine start olive3
    eval $(docker-machine env olive3)
  • Set up Olive3 UI dev environment::

    make bootstrap

    This command will build all needed docker images and start the application in background.

  • Connect Olive3 backend Django application:

    API Docs

    1. Make sure that you have cloned backend repository from GitHub:

      git clone git@github.com:essence-tech/essence-olive-3.git
    2. Build and spin-up all needed docker images:

      make bootstrap
  • Now you can access Olive3 UI. Get docker-machine IP address using the following command:

    docker-machine ip olive3
  • Open your browser and go to http://<ip_address_from_previous_command>:7000

  • Use user "user1@essencedigital.com" and password "password" to login.

Tests

Use the following command to run tests inside the docker container:

make test

Update Wiki with ngDocs export

Make sure you have the wiki submodule checked out before you try to release your comments to the github wiki:

git submodule update --init --recursive

Then use the following command to export the ngDocs style in-line code comments to github wiki.

make wiki

Don't forget to commit your changes in the wiki submodule once the export is complete.

cd wiki
git add *
git commit
git push orgin master

Docker HOWTO

  • run bash shell inside the application Docker container:

    docker-compose run --rm app bash
  • run any commands:

    docker-compose run --rm api [command with any options]

Local installation (deprecated, use docker installation)

Installing dependencies

On Ubuntu
sudo apt-get install npm ruby ruby-dev nodejs-legacy

Install

make install
gem install sass compass

Run

make devserver

Use the AngularJS-Batarang[1] chrome extension to help debugging.

[1] https://chrome.google.com/webstore/detail/angularjs-batarang/

Test

Writing and running units tests in Olive3

make test

To run tests inside Docker container run:

make test_docker

Code Style guide

We are using ESLint as linter.

Configuration

Lots of editors and IDEs have one or several great integrations with ESLint, some description you can find on ESLint site.

To check whole project:

make lint

To check a single file:

make lint FILES="path/to/file.js"

To check a batch of files:

make lint FILES="path/to/file.js path/to/file2.js path/to/file3.js"

See additional options in Makefile

To check diff with your changes, to master branch:

make lint_diff

To check changes staged for commit:

make lint_diff ESLINT_FILTER_OPTIONS='-p'

See additional options in eslint_filter.py.

GEMS

Compass Flexbox Gem

https://github.com/timhettler/compass-flexbox Used as global mixin to provide vendor prefixes and legacy Flex properties

Memory Leaks

When a controller or directive is destroyed by angular (a side effect of changing to a different state or closing a panel) the $scope object and any $scope.$on events are .destroy()'ed. Also the jqLite element and any events attached with element.on() are also .remove()'d. This frees up memory to be collected by the garbage collector.

However everything in a controller or directive aside from $scope and element are your responsibility to clean up. You can do this by listening to the $destroy event eg.

$s.$on('$destroy', function() {
    // cleanup code goes here
});

Memory leak checklist

Have you cancelled all $timeout calls? eg.

var myTimeoutRef = $timeout(function() {...}); // returns a reference
$s.$on('$destroy', function() {
    $timeout.cancel(myTimeoutRef);
});

Have you deregistered all $rootScope.$on calls? eg.

var deregisterHandler = $rootScope.$on(..); // returns the function to deregister it
$s.$on('$destroy', function() {
    deregisterHandler(); // simply execute the function in $destroy
});

Have you cancelled all $interval calls? eg.

var myIntervalRef = $interval(function() {...}); // returns a reference
$s.$on('$destroy', function() {
    $interval.cancel(myIntervalRef);
});

Have you removed all jqLite bound elements and events (aside from angular's passed in 'element')? Gotcha: jqLite stores a reference of all bound elements in $cache. Even if they're a local scope variable which gets destroy()'d they continue to hang around in $cache unless explicitely .remove()'d and set to null. eg.

var myjqLiteElement = element.find('ul'); // new jqLite element gets assigned
$s.$on('$destroy', function() {
    myjqLiteElement.remove();
    myjqLiteElement = null; // don't forget to nullify.
});

or

angular.element(window).on('click'...); // new jqLite event is bound
$s.$on('$destroy', function() {
    angular.element(window).off('click');
});