ember-cli

formalizing your ember workflow

@jason_madsen / github: knomedia

what the what?

building production ember

ember-cli

"Ember command line utility for ambitious web applications."

http://iamstef.net/ember-cli

Pros

  • Project structure
  • Formalized build w/ Broccoli
  • ES6 Module Transpiler
  • Bower and NPM integration
  • Testing (QUnit, Ember Testing, ember-qunit) out of the box
  • Lots of work going into it

Cons

Lots of work going into it [wip] work in progress

Getting Started - Hello Ember!


$ npm install -g phantomjs

$ npm install -g ember-cli

$ npm install -g bower

$ ember new my-app

$ cd my-app

$ npm link ember-cli

$ ember server

Working off Master

Did you not see the [wip] thing earlier? 


$ git clone git@github.com:stefanpenner/ember-cli.git

$ cd ember-cli

$ npm link


// go build a project using ember new ...


$ cd your-ember-app

$ npm link ember-cli

Front End Application

Handles all front end concerns... js, styles, etc.

Consider your front-end app as its own app that communicates with an API server

Assets



public/

put fonts, images etc in public

they'll get copied over during your build / server

Styles


app/styles/app.css

  => assets/application-name.css

CSS via Bower



$ bower install --save foundation

Then `import` it in your Broccoli.js file



app.import('vendor/foundation/css/foundation.css');

SCSS support



$ npm install --save-dev broccoli-sass

$ bower install --save foundation

$ mv app/styles/app.css app/styles/app.scss

Then use an scss import in app.scss



@import 'vendor/foundation/scss/foundation';

Other JS Libs

Ember-Cli Addons

Pretender Addon

Libs with Globals



bower install --save moment

            


app.import('vendor/moment/moment.js');

            


.jshintrc => predef

Proxy API calls in development



$ ember server --proxy http://localhost:3000

Build for environment



$ ember build --environment production

Shameless Plug

Using Ember-cli and Sinon
Ember-Cli with Rails

Thanks

Jason | knomedia.com