Opinions on best Ember Workflow

Design
1

Hello Ember Community!

I am trying to gather a few opinions (and perhaps some hard facts) about common Ember workflow, methodology, practices etc. and hopefully some of you can chime in with your thoughts.

My background is Vanilla HTML, Vanilla CSS, Vanilla JavaScript, so my head is spinning with all these fancy new pre-processors, CLI build tools, and JS Frameworks.

Fortunately, I am no technophobe and have already been, learning Ember, learning Sass, running node, bower, grunt, brunch, yeoman… just to figure out how to use them all.

I know how to install some app environments, like Ember App Kit, Foundation, Bootstrap for Ember, etc.

I am still fuzzy on how to put them all together and start developing efficiently though from design to development to production.

Should I be starting out by building full static web pages and then slicing them up manually into separate template files and components? Or should I be somehow designing everything in modules from the get-go, in one environment?

Does it make sense to have a “Design” environment, which has all my design/layout frameworks (like, Brunch, Bootstrap, Foundation, sass, compass, etc) which I can make all my page designs… and then a separate “Development” environment (Grunt, Ember App Kit, etc) where I break down the final design into handlebars, components, views, controllers, and such?

It seems like in that case there would be two separate workflows with a bottleneck where I am manually slicing things up and transferring them… unless there is something in between that I am missing?

I am still new to the whole methodology. I have read and followed through the “Getting Started” tutorial on Ember homepage, but that tutorial starts with a HTML file and CSS file already finalized and just jumps in to the “ember-izing” steps.

Do you all have any thoughts about a proper workflow from design to production? can it all be done in one automated environment?

Feel free to mention your favorite tools and methods :slight_smile:

2

Seth,

Take a look at ember-cli (https://github.com/stefanpenner/ember-cli). It is leading the way in building an Ember application. ember-cli is still very much a work in progress, but it is looking to address a lot of the issues you mentioned.

3

Ok, that sounds like a good option for setting up a project.

Do you have any thoughts about the separation of Design and Development?

I currently have a separate environment where I do a bunch of static designs, where I prototype (non functional) components and page layouts and such… but then I need to manually move them over to ember app structure, break them apart, add the functionality and whatnot.

Is that really the way it needs to be though?

4

Honestly I do not have a good answer on this front. I do a bit of this myself, and then I usually find via experience that my design fights me when I try to implement it. Namely due to the fact that Ember apps need to be thought about more like desktop applications, and less like websites. I guess it’s hard to teach an old dog new tricks sometimes; but if you come to some good insights on this I’d love to hear it.

5

Ember is very good for prototyping. I don’t see why you’d really need to separate design and development. A lot of my design stage markup is just done with basic ember templates with link-to’s and then I add in data, more complex routing, componentize things after.

6

Yeah I can see the value there. I come from a graphic design background so I have a bad habit of seeing a finished design up front before I break it all apart. Thanks for the input.