The concrete estimator is a simple application that runs on mobile devices through the power of PhoneGap. The 'real' application is built on top of React and Flux. Sources are written in CoffeeScript and LESS. Bower manages third-party dependencies, and Brunch assembles the sources and dependencies into aggregated and minified scripts. The autoprefixer plugin to Brunch automatically handles vendor-specific CSS differences.
/ - Repository root
|- app/ - Contains original code for the application
|- bower_components/ - Contains third-party UI components (e.g. Bootstrap)
|- hooks/ - Contains addon hooks for PhoneGap
|- node_modules/ - Contains third-party NodeJS scripts
|- platforms/ - Contains platform configurations for PhoneGap
|- plugins/ - Contains addons for PhoneGap
|- screenshots/ - Contains screenshots of the interface with expected styling
|- test/ - Contains test scripts
|- www/ - Generated web app which gets injected into PhoneGap builds
- NodeJS is a requirement for the build tools.
- Bower manages the exteneral UI components.
- Brunch builds a usable application from the sources.
- PhoneGap is used to export the application into a usable mobile application.
tl;dr: Install NodeJS and npm install --global bower brunch phonegap
- Build the HTML: npm start
- A browser-friendly version is available at ./build/www/devel.html
- Build the Android app:
npm run compile - Rebuild the HTML:
npm run rebuild - Rebuild the Android app:
npm run recompile - Start over:
npm run start-over
We are using a mixture of PhantomJS, CasperJS, Mocha, Chai. Each test steps through a process (e.g. creating an estimate), verifying that each step works properly. Additionally, we are using PhantomCSS to catch any style regressions.
Run npm test. PhantomCSS captures are stored in the screenshots
directory.
The logger has several debug levels. Production environments default to warning while dev environments default to info.
Trace: calculations, live changes Debug: form field change Info: navigation events