mesosphere-manager-frontend

React + Backbone <3 Broccoli

This is threesome between the view and presenter, React and Backbone models who loves the client-side asset builder, Broccoli. WOAH! The name dropping!

So what is this about?

This is a minimal skeleton, scaffolding setup and developer environment to get these delicious technologies to work well together, in an easy to setup frontend workflow and distribution. This is for you if you want to build fast client side frontend applications that uses a REST API.

Setup development environment

Run the following commands install dependencies for setting up the Broccoli development environment (1):

npm install
npm install -g broccoli-cli

npm run serve

Open up a browser on localhost:4200 and watch the magic!

Build and release

Run the following command to distribute the project into the target/app folder (1):

npm run test
npm run clean
npm run build

A target/app folder will be created with minimized content.

Test

Run the unit tests (1):

npm test

See test folder for examples.

You can also run the following command to watch for changes, though it only works for .js files (1):

npm run test-watch

Development Setup (Sublime Text)

• Add the following to your Sublime Text User Settings

   {
   	...
   	"rulers": [80], // lines no longer than 80 chars
   	"tab_size": 2, // use two spaces for indentation
   	"translate_tabs_to_spaces": true, // use spaces for indentation
   	"ensure_newline_at_eof_on_save": true, // add newline on save
   	"trim_trailing_white_space_on_save": true, // trim trailing white space on save
   	"default_line_ending": "unix"
   }
  

• Add Sublime-linter with jshint & jsxhint

  • Make sure to follow installation instructions for all packages, or they won't work:

  • Installing SublimeLinter is straightforward using Sublime Package Manager, see instructions

  • SublimeLinter-jshint needs a global jshint in your system, see instructions

  • SublimeLinter-jsxhint needs a global jsxhint in your system, as well as JavaScript (JSX) bundle inside Packages/JavaScript, see instructions

  • SublimeLinter-csslint needs a global csslint in your system, see instructions

Footnotes

(1) Look into package.json/"scripts" to see the bash commands.