ember-cli – formalizing your ember workflow – Pros

View Github Repository Open presentation in a new window

knomedia

See all presentation from knomedia

ember-cli – formalizing your ember workflow – Pros

0 0

ember-cli_emberjs_slc_6-26

Presentation from Ember.js SLC meetup on ember-cli

On Github knomedia / ember-cli_emberjs_slc_6-26

ember-cli

formalizing your ember workflow

@jason_madsen / github: knomedia

what the what?

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]

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

Thanks

Jason | knomedia.com