Directory Structure

[adamdbradley]

Thinking about not placing the source module and sass files within www. Once we get offline template compiling, which should be landing soon, even source HTML files are compiled. So all output that gets transpiled/compiled goes in bundle (or whatever), and normal static files like images go in www/img or whatever they want. Thoughts?

- app
  - components
    - my-component.js
    - my-other-component.js
  - directives
    - my-directive.js
    - my-other-directive.js
  - pages
    - about
      - about.js
      - about.scss
      - about.html
    - contact
      - contact.js
      - contact.scss
      - contact.html
  - providers
    - my-provider.js
    - my-other-provider.js
  - app.core.scss
  - app.html
  - app.ios.scss
  - app.md.scss
  - app.js
  - app.variables.scss

- www
  - bundle
    - app.bundle.js (webpack build)
    - app.md.css (sass build)
    - app.ios.css (sass build)
    - (offline template compiling code/data would go here, not HTML files)
    - about.html (until offline template compiling is available)
    - contact.html
  - img
    - logo.svg
    - kittens.gif
  - index.html

- config.xml
- gulpfile.js
- package.json
- tsconfig.json
- webpack.config.js

@mlynch @tlancina @brandyscarney @mhartington

Resources:

https://github.com/AngularClass/angular2-webpack-starter
https://github.com/DanWahlin/Angular2-JumpStart
https://github.com/mgechev/angular2-seed
https://github.com/valor-software/ng2-bootstrap

[mlynch]

I like it, just can't swallow pushing providers. I don't see a reason to stop anyone from doing that, but I don't know if we should push that concept ourselves. They're just plain utility classes and services. providers is way too angulary

[mhartington]

All for building outside www/

[brandyscarney]

I'm fine with it, but I think having the img/ folder outside of the working directory may be confusing.

[trakhimenok]

- www
  - bundle
    - about.html (until offline template compiling is available)
    - contact.html

What about components & pages directory? For example if I have:

- app
  - components
    - about
      - about.html
  - pages
    - about
      - about.html
    - something
      - about.html

[tlancina]

What about just a directives directory for components and directives? Components are technically directives as well, and I don't think they're so different that we need separate directories for them, but maybe that would be confusing.

I'm fine with provider if that's what angular is calling it, services makes a lot of sense to me as well (esp. coming from ng1).

Everything else LGTM, having app outside of www brings the Cordova build size down (no duplication of source files) and I think the template path issue is no longer relevant because of angular/angular@28860d3 👍

[mlynch]

@tlancina I'd prefer components then, since a directive is kind of a "component" and that concept is the one most people are using in and out of angular...

[tlancina]

Yeah I agree with @brandyscarney as well, having to map your asset paths in your head to where your build is going to be might be confusing.

I think we can easily add a gulp task/CLI config glob for paths to copy into www.

[tlancina]

@mlynch I believe it's the other way around, components are directives, but directives are not components.

I was also thinking coming from ng1 directives is a familiar concept.

[mlynch]

Yes, "technically" but no one uses directives except Angular. Directive directives could still be considered "components" that enhance elements.

[brandyscarney]

@tlancina Could we copy the directory over and have it ignored by git so they can still put assets in their working directory?

[adamdbradley]

Really the images stuff if what tripped us up before and why it is the way it is now. But if you look at what we've done with the conf app already is that the images are already outside of the www/app directory: https://github.com/driftyco/ionic-conference-app/tree/master/www/img So we're not even using it like we thought we would.

So all things considered, I think I like having static assets like images managed outside of the /app directory, and users can place and organize their assets in the /www directory however they like. If we were to get into automatically copying certain files into www, I think we'd always miss different crazy file types, and might be even more confusing for them to figure out their static asset's file path.

Also, yeah I agree we can go with just components for both our directives and components. It's what we'll do, but there's nothing stopping them from breaking it down even further if they'd like.

@astec Are you saying the problem would be that there could be multiple about.html files in the bundle folder? If so that's a good point, I think we'll have to keep the folder structure of all the html files within the bundle folder so that doesn't happen. We'll also look into using moduleId so we can keep relative paths to the HTML. But also, I'm hoping a lot of these worries will go away with the offline template compiling.

[tlancina]

@brandyscarney good point, what if we had a root level assets/ directory that the default config copies into www and would be .gitignore'd in all the starters? Then:

app -> www/build
assets -> www/assets

[tlancina]

Yeah I get the components argument I think, it's easier to reason about things like pages and components as the building blocks of an app.

@adamdbradley I see your point about paths confusion, I was thinking it would be easier to have www be more of a build target only directory, but index.html is already in there and will need to have the correct paths to the built bundles, so I guess it's not that crazy to expect people to be able to figure out the build paths. I'm fine with either way.

[tlancina]

WWECD (what would ember cli do)

[adamdbradley]

- app
  - components
    - my-component.js
    - my-other-component.js
    - my-directive.js
    - my-other-directive.js
  - pages
    - about
      - about.js
      - about.scss
      - about.html
    - contact
      - contact.js
      - contact.scss
      - contact.html
  - providers
    - my-provider.js
    - my-other-provider.js
  - app.core.scss
  - app.html
  - app.ios.scss
  - app.md.scss
  - app.js
  - app.variables.scss

- www
  - build (can be safely deleted and rebuilt)
    - app.bundle.js (webpack build)
    - app.md.css (sass build)
    - app.ios.css (sass build)
    - (offline template compiling code/data would go here, not HTML files)
    - pages
      - about  
        - about.html (until offline template compiling is available)
      - contact
        - contact.html
  - img
    - logo.svg
    - kittens.gif
  - index.html

- config.xml
- gulpfile.js
- package.json
- tsconfig.json
- webpack.config.js

[brandyscarney]

Is this good to close now?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the Ionic Conference App, please create a new issue and ensure the template is fully filled out.