This application consists of 3 main parts:
Node.js backend server - a light-weight playground for creating rich prototypes
Language: TypeScript
Dependencies: express, expect.js, mocha, node.js
Custom Sass framework + image assets
Language: Sass
Dependencies: image assets in /images
Tailored Front-End framework
Language: TypeScript
Dependencies: Jasmine, jQuery, knockout, lodash, moment, rxjs
Should you consider editing, or contributing to this project, please read the To Contribute section
# Install node, if you don't have it already
brew install node
# Clone repo
git clone https://github.com/hirespace/hirespace-static.git
# cd in and run install script (will prompt for password)
cd hirespace-static
./install.sh
# After setup
gulp
The server runs on port 6065, the tests run on port 6066.
You can change these settings in gulpfile.js and js/test/karma.conf.js.
I recommend using the WebStorm IDE. Please make sure you have the correct code style settings before you contribute in form of a pull request. JSHint will be introduced overtime.
We use git-flow, and so it would be good to try and stick to the convention. Please use the default branch prefixes.
# Install git-flow
brew install git-flow
If possible, development should happen on a separate feature branch named after a JIRA ticket reference (if applicable).
# This will create a new branch called feature/HS-...
git flow feature start HS-...
To finish a feature, run
git flow feature finish HS-...
and then create a pull request (from your develop branch).
To bind a controller to a specific view, bind the name to the body's hs-ctr attribute:
<body hs-ctr="TestController"></body>
Create a new directory in js/components, e.g. Test, in which we'll create a new file called TestController.ts:
module hirespace {
'use strict';
export class TestController {
constructor() {
console.log('Hello, World!');
}
}
// The controller will only be bound if you do the below – explicitly subscribe it under the hirespace module
hirespace.App.subscribe('TestController', TestController);
}
To bind data from controllers, we use the HsBind service.
In the controller:
...
export class TestController {
BookingData: BookingData;
constructor() {
console.log('Hello, World!');
this.BookingData.venueName = 'Test Name';
this.updateView();
}
updateView() {
hirespace.View.updateView(this, 'body');
}
}
class BookingData {
venueName: string;
constructor() {}
}
...
In the HTML:
<elem hs-bind="BookingData.venueName"></elem>
The most powerful part of the application is the ToggleClass model. It enables you to toggle classes on any HTML
element based on rules (or their combinations), the number of which is unlimited.
For example, to toggle class active only when there is an object called bookingData attached to the current
controller, do:
<elem hs-class="active: bookingData"></elem>
Should you wish to add an OR assertion, for example customerData.type == 'admin', you can do:
<elem hs-class="active: bookingData || customerData.role == 'admin'"></elem>
To add a AND assertion, you might do:
<elem hs-class="active: bookingData.venue.manager && bookingData.venue.name"></elem>
The ToggleElem model enables nimble control over toggling elements' visibility. The attribute is a list of id's
to toggle on click on <elem>:
<elem hs-toggle='["elem-id-1"]'></elem>
This will toggle .is-hidden class on #elem-id-1. To toggle more elements, simply add them to the list:
<elem hs-toggle='["elem-id-1", "elem-id-2"]'></elem>
More features to be documented overtime.
There are a couple of things you need to do before you can perform a release. First off, please take a few moments to familiarise yourself with Divshot. Secondly, make sure you have the correct admin rights (can be obtained from slavomir@hirespace.com or will@hirespace.com) and that you have Divshot's CLI installed:
npm install -g divshot-cli
Prior to making a release, ensure your develop branch is up to date and then checkout a new release branch using git-flow. I have set up both bump-version.sh and release.sh scripts so these should be executed while on the (release) branch.
bump-version.sh merely bumps the version number in bower.json and package.json and release.sh does following:
- Runs gulp commands which deploy production-ready assets and runs all tests
- Prompts
divshot login - (Re)creates /dist folder
- Copies all dependencies over to /dist folder
- Pushes the (/dist) folder to staging
- Asks whether you want to promote staging to production
Proxy setup:
# Given Pow is installed
echo 6065 > ~/.pow/static.hirespace