yeoman/generator-angular

Generator Roadmap

eddiemonge opened this issue Β· 99 comments

In an effort to be more transparent about the project, we are creating roadmaps for everything. This is the tentative roadmap for the Angular generator.

Priority 1

  • Refactor all the tests to test everything, including all existing options
  • Make everything configurable. This will include a combination of flags, prompts and a configuration file
    • File casing in both scripts and filenames
    • Paths to where things are located tip
    • Preprocessors declaration
  • Support the project as a sub-generator for other projects (Angular full stack, MEAN stack, etc). This should happen as a side-effect of making everything configurable.
  • Different organization of files. This includes the by module (proposed AngularJS team recommendation), or by function (current). Also where assets go in dev mode (CSS, JS, HTML)

Priority 2

  • Remove minsafe files. Done
  • Consolidate all template files/folders into a central location Done
  • Add gulp as a build tool
  • Add support for JS templates (#277)
  • Add Protractor E2E tests and templates
  • Add option for UI-Router

Priority 3

  • Add support for TypeScript (#313, #539)
  • Add support for BabelJS
  • Add support for Stylus, Less
  • Add support for Jade (#420)
  • Remove heavy reliance on Bootstrap so other frameworks can be used (maybe as a prompt choice)
  • Make vanilla CSS (no framework selected) more visually appealing
  • Add ESLint to the project (probably replaces JSHint)

Priority 4

  • Support for backend implementations, whether that be proxies, rewrite rules, make it more composable for other generators or actually adding a backend REST server (highly unlikely though)
  • uncss? remove css styles

If you think there are other things that should be added to the roadmap, or have questions about any of these, please feel free to comment.

πŸ‘

Add support for JS templates = something like html2js? I was looking at this earlier. Was wondering how to integrate it into the usemin process and it seems like it involves creating a custom "flow" which would merge the templates.js from html2js into the concatinated script generated from the usemin block files.

Excellent! πŸ‘

@passy - from his phone
On Jan 20, 2014 8:00 PM, "Eddie Monge" notifications@github.com wrote:

In an effort to be more transparent about the project, we are creating
roadmaps for everything. This is the tenative roadmap for the Angular
generator.
Priority 1

  • Refactor all the tests to test everything, including all existing
    options
  • Make everything configurable. This will include a combination of
    flags, prompts and a configuration file (yo-rc.json)

Priority 2

  • Remove minsafe files
  • Consolidate all template files/folders into a central location
  • Add support for JS templates

Priority 3

  • Add support for TypeScript
  • Add support for Stylus, Less
  • Add support for Jade
  • Remove Bootstrap from the project (cause a lot of issues but is
    open for discussion/debate)

If you think there are other things that should be added to the roadmap,
or have questions about any of these, please feel free to comment

β€”
Reply to this email directly or view it on GitHubhttps://github.com//issues/553
.

πŸ‘ this looks sharp. Nice work putting this together @eddiemonge.

jjt commented

Bootstrap could be considered orthogonal to the generator, but I think it's better to leave it as the default option.

The Bootstrapped version makes gen-ng look like it's done a much better job than than the plain version, because it looks more like an actual website. I think that users who are new to gen-ng will be more impressed with the BS version and you'll have a higher adoption rate, while veteran users will (hopefully) know what they want and can choose to not install BS.

@jjt The vanilla CSS version needs work. I updated the P3 with a better alternative

jjt commented

@eddiemonge Ah, nice! Was going to say that other frameworks would be a good addition, but didn't want to pile more on. As to a vanilla css look, including normalize.css, centering .content, and making the nav menu inline with no discs would go a long way.

I'd really like to see ui-router an an option. I'm know I'm not alone in preferring ui-router as my go-to over the default ngRouter. Also, I'll second that html2js request, and what ever became of that massive discussion about feature grouping (ngBoilerplate style) vs layer grouping?

+1 for feature grouping

+1 for jade or anything that makes writing HTML more developer friendly. I really don't like HTML syntax (writing opening and closing tag), I prefer HAML.

Does "Support the project as a sub-generator for other projects" mean having the ability to generate sub-modules for larger projects, which are then thankfully separated by feature?

+1 for Jade

  • Jade
  • i18n
  • html2js

-> grunt-jade-i18n + grunt-html2js

Any thoughts on adding proper module structure? Creating controllers/services/directives into respective directories seems like it is encouraging a now-considered poorer practice.

@programbo That could be explored. Would need the configuration done first as that would add exponential more complexity

@ahimta I prefer Jade since its based off Haml but easier to use and pure JS

@irthos Possibly, I think. Not entirely sure about your question

@vdesbarres i18n most likely won't be a part of this. You can easily add that to your own project with something like angular-translate though. html2js also probably won't make it as I am leaning towards (and have been using) the grunt-angular-templates plugin for this functionality

@ProLoser Yup. Updated the milestone with a link to https://github.com/eddiemonge/generator-angular-api/ . Feel free to comment and post issues there until I get that functionality into the generator

+1 currently i've created a /modules dir and inside each one a dir for a
new module, each being a standalone generated app. a few smart grunt tweaks
and all the subapps are sending their js from /dist to the main app. kinda
klonky. wish the generator could be run again from the root directory and
make a new sub.module if there's an app there. then the generator should
register the module and inject it appropriately. tricky stuff, no doubt.

On Thu, Jan 30, 2014 at 3:14 PM, Dean Sofer notifications@github.comwrote:

Any thoughts on adding proper module structure? Creating
controllers/services/directives into respective directories seems like it
is encouraging a now-considered poorer practice.

Reply to this email directly or view it on GitHubhttps://github.com//issues/553#issuecomment-33745539
.

πŸ‘

I would like to see a LESS option since you are already offering bootstrap.
I also second the use of ui router, and while we're at it it would be cool if we prompt them about ui bootstrap if they request bootstrap.
Alternatively, maybe we should start creating a ui sub-generator instead that is designed to go along with this one.

After seeing how Gulp is about streaming, I wouldn't mind seeing a Gulp version of this. I wanted to add html2js and with all of the temporary files and complexity of usemin creating it's own flow, I have no idea where to throw that into.

It would be good to say:
these files I specify (templates): html2js + files found within index.html > concat > uglify

I've not played with it yet, but it looks and sounds good. I really do think the Gruntfile here is a beast.

+1 for adding ui-router.

Edit: I mentioned Protractor but apparently there's already a generator and instructions for using it here: http://www.codeorbits.com/blog/2014/01/26/angularjs-end-to-end-testing-with-protractor-easy-set-up-with-yeoman/

My mistake.

Protractor is great, and whilst it would be a convenience having it as the
default e2e test runner, it's pretty easy to add to generator-angular
projects after they have been created.

On 5 Feb 2014, at 6:18 pm, Jarrett Harris notifications@github.com wrote:

+1 for adding ui-router.

It seems the AngularJS team is moving towards Protractor for testing. Is
adding this feasible over the next year?

Reply to this email directly or view it on
GitHubhttps://github.com//issues/553#issuecomment-34142856
.

My vote to bumping protractor up to top priority group.

Thanks @eddiemonge ! Great work.

+1 for typescript support, Great effort!

+1 for typescript support.

Is this still the 2014 Q1 roadmap ?

Yeah, Im a little behind schedule but trying to catch up.

+1 for submodules

+1 for the module structure.

+1 for adding ui-router as option would be nice

I have made some beginings of ui-router option... can someone review?

https://github.com/gintsgints/generator-angular

+1 for protractor

The first three tasks of Priority 1 are coming along. Late but still chugging. A preview of a new feature for the generator: full configurability (not finished yet) https://www.youtube.com/watch?v=zy33uO1Qf9A

Great to see this.
Any rough timeline of when this will land ?

Looks great! Especially happy to see Protractor in there.

πŸ‘

+1 for Protractor

Ui-router is essential. πŸ‘ 🍺

ruud commented

+1 for Protractor

+1 for protractor.

"Support the project as a sub-generator for other projects (Angular full stack, MEAN stack, etc)."

I would be super interested in this. I usually run https://github.com/yeoman/generator-gulp-webapp then generator-angular on top of whatever generator-gulp-webapp spat out and manually clean up the mess. Very inelegant but it is still faster than manually doing everything.

+1 for ui-router + protractor

Merge generator-angular with another generator project, preferably Cleverstack which, at last count, appears to be the richest. http://dancancro.com/comparison-of-angularjs-application-starters/

Cleverstack has the following benefits missing from generator-angular:

Modular app files organization
Modularized Core
Module manager
Dedicated chatroom
Testing with Protractor
Continuous integration
Code coverage reporting
Server-side tests
Read-eval-print-loop (Repl)
Command-line interface
Build tasks:
...... reload build file upon change
............ change asset references to prevent caching
...... advanced JS analysis
...... coffee files compiled to JS
...... uglification
...... remove unused CSS
...... generate build reports
...... generate docs
Database migration/evolution system
Generator options:
...... Choose client and/or server
...... Choose port numbers
...... Quick install?
...... Options for making subcomponents
...... Authorization as optional
...... Generate routes
...... Choose db: SQL or NoSQL
...... Clustered HTTP sessions
Subgenerators:
...... subgeneration undo
...... config
...... crud-mock
...... modal window
...... model - client side
...... test - client side
...... FEATURE (a.k.a. module, entity)
...... back end
...... controller - server side
...... model - server side
...... route - server side
...... service - server side
...... test - server side
Bells and whistles:
...... Background task runner
...... Form generation
...... Calendar
...... Data tables
...... Browser detection
...... Alert messaging service
...... Functionality modularization
...... Currency list
...... Timezone list
...... File Upload
...... Digital fingerprint
...... Chat
...... Shopping Cart
...... Country list
...... CSV processing
...... Documentation
...... E-Mail system
...... Survey
...... Amazon workflow
Asynchronous module definition (AMD)
Configurable response caching
Source Maps
Verify user registration by email
Oauth
Authorization: Role-based
Authentication with Google services
Serve status codes only as responses
Accept nested, JSON parameters
Add a mutex around requests
Add timer header to requests
Support for signed and encrypted cookies
Serve URLs based on the route definitions
Serve headers only
Object-relational mapping
Object-document mapping

generator-angular has the following benefits missing from Cleverstack:

Build configurations file(s)
Build script:
...... run tasks in parallel to speed it up
............ replace 3rd party deps with CDN versions
............ fill in js tags by searching directories
............ fill in css tags by searching directories
...... add CSS vendor prefixes
...... SASS version of Twitter Bootstrap
Generator option: Optional precompilers
Subgenerators:
...... constant
...... decorator
...... route - client side
...... value
...... view or view partial
Google Analytics
Languages of Generated files:
...... Jade
...... Coffeescript
...... SASS
Run server in debug mode

Let me know if I missed anything.

Better to merge generator-angular features into Cleverstack than the other way around.
generator-angular should be kept simple and "clean". As noted:

"Angular-fullstack-generator 2.0 is due for imminent release"

No reason to make generator-angular into yet another full stack generator.

Better to merge generator-angular features into Cleverstack than the other way around.

This is what I am suggesting. It would be easier.

generator-angular should be kept simple and "clean".

I don't understand your reasoning. Not offering a backend (being "clean") is a strange benefit in my mind. Some of the generators give you a choice to generate the front-end, the back-end, or both. So everybody's happy.

"Angular-fullstack-generator 2.0 is due for imminent release"

No reason to make generator-angular into yet another full stack generator.

My proposal is to reduce the number of generators by merging them. Most people do not want choices. They want excellence.

I agree that it's a mess with all these "half-baked" generators out there. However it is almost impossible to merge all the generators into a "one-size fits all generator" IMHO.
Better to have separate projects for front-end, back-end and then a slim app generator.
This is already in the cleverstack design/architecture as I understand it.

https://github.com/CleverStack/cleverstack-cli (app and CLI)
https://github.com/CleverStack/angular-seed (front-end)
https://github.com/CleverStack/node-seed (back-end)

So I would recommend patching these with features from generator-angular as you see fit.

angular-seed recommendations:

  • replace angular-scenario (deprecated) with protractor for E2E
  • replace angular-route with ui-router
  • jade
  • coffeescript (+ livescript?)
  • sass

NodeJS seed

  • who uses relational DBs these days? unless you have legacy systems?
  • would be nice with more NoSQL options than MongoDB IMO

How tightly is the generated back-end coupled to the front-end?

This should be a discussion outside the issues thread of this project IMO.
For sure we need better generators to get developers up and running and avoid too much maintenance, configuration, boilerplate overhead ;)
Cheers!

However it is almost impossible to merge all the generators into a "one-size fits all generator" IMHO.

If I understand correctly, the question is:

Should we continue to develop all of these generators?

and your logic is:

It is hard to combine everything -> therefore we should continue to develop all of these generators.

I think otherwise. I think

improving the best generator will yield a better generator than improving a lesser generator -> therefore we should spend energy on the best one and not the others

The thing is... generators are by definition, supposed to fit all. They are used to generate applications for everyone. This one is called generator-angular, not generator-angular-realtime-trade-processing or generator-angular-mobile-ecommerce. It is general. So are all of them. They are supposed to fit all, and they can. Until I made this comparison, nobody was able to see this clearly. Generators are just products and products are just collections of enumerable benefits that can be counted, weighted and used to determine a value. Thus a hard choice becomes an easy one. And if we can get people to work together, the hard choice will become a non choice - programming nirvana.

So I would recommend patching these with features from generator-angular as you see fit.

angular-seed recommendations:

replace angular-scenario (deprecated) with protractor for E2E
replace angular-route with ui-router

I'm confused. Cleverstack already uses ui-router and generator-angular does not yet use Protractor. Yes, the other three items are provided by generator-angular and not Cleverstack.

who uses relational DBs these days? unless you have legacy systems?

WIth all due respect, you can't possibly be serious about this. SQL is used by millions. NoSQL and SQL have different benefits and meet different needs. The world needs both and supporting both is not only possible but has been done by both Cleverstack and jhipster.

How tightly is the generated back-end coupled to the front-end?

They shouldn't be at all, and since you can choose what to generate, I gather that the two are not coupled.

This should be a discussion outside the issues thread of this project IMO.

I think this is the right place because in this thread people are talking about duplicating work that has already been done in other generators. The alternative would be to stop working on this generator and instead spend that energy improving the one that already has the most benefits. But I'm curious - is Stackoverflow the official discussion place for this project?

I'm open to ideas but so far nobody has given me a good reason why we need more than one of these things.

I think it would be better to hear what other developers think. I believe that most other MVC frameworks have discussed these issues a lot, such as Django, Rails etc. and never quite resolved it with one standard generator to rule them all...

I had the same idea when I got introduces to Rails, but I later came to learn that it is much harder than you think and that the technologies change to fast that such an effort quickly becomes obsolete and almost impossible to keep sufficiently up to date etc. Of course I (and most other developers) would love if it could become reality instead of having to patch together all these fragments... it is developer hell :P About time that we progress from this patch-work development process.

I honestly don't think anyone has ever analyzed things this way before. It takes a lot of time. So maybe that's why. I'd love to know what other groups have concluded. The walls between Rails, Django and AngularJS are higher than that between generator-angular and Cleverstack. We really need to break these walls down.

If anybody is in Berlin, on Wednesday I'll be presenting this idea to the local AngularJS meetup group. It should be fun!

+1 to adding support for ui-router. Also, if you do choose to deselect the angular-route.js option the app generated is broken so probably shouldn't be an option at all.

(edit) deselecting angular-route.js no longer produces broken app

@craigbeck broken how? please file an issue about it

Oops my bad @eddiemonge I just updated and tried to reproduce it to open an issue and that appears to be fixed

+1 Β«different organization of filesΒ» ==> Enterprise App File Layout!!

+1 for less

+1 for less and ngtemplates

@yidongnan I ended up forking this to add less support and removed jquery/foundation while I was at it.

If you want to check it out https://github.com/pbojinov/generator-gulp-angular-less

+1 for different organization of files.

The current Gruntfile is very lengthy. If you won't be switching over to Gulp anytime soon, it would be extremely helpful to use something like: https://github.com/creynders/load-grunt-configs

This would leave the main Gruntfile for more top-level configuration objects.

+1 for modular organization of files!

+1 modularity, in my opinion it's useful to separate the native (cordova) part from the webapp, in my projects I am using one Gruntfile for the Webapp and one to handle the transition from webapp to native layer, this includes cordova resources, plugins and cordova build process

+1 for the organization of files.

πŸ‘

+1 for Jade

Please consider adding support for angular-material.

With the release of version 1.3.x, angular-seed has since been updated with improved architecture, and project layout adopting best practices.

+1 for "Different organization of files".

πŸ‘ for angular-material and new angular-seed. @AlvonnLimjoco The former looks amazing, I can't believe I hadn't heard of that yet.

I use generator-angular on a daily basis, as do many members of my team. I'm happy to contribute dev time, but am not entirely sure where to jump in. @eddiemonge, have any suggestions? Thanks!

What kind of angular-material support you mean? IMHO it's not yet ready to fully cover all UI needs.

As example how you will implement top menu?

@Aendrew thanks for the offer. At some point very soon I'll make a list of what needs to be done.

+1 Typescript
+1 ui.router

:)

+1 angular-material

@ProLoser +1 Separating module definition from app definition. Submodules are the reason which I didn't choose this generator for large apps yet. Any progress on that? Do you need a hand on building that functionality?

Thanks in advance.

+1 for ui-router!

avdd commented

Can I suggest less stuff and more explanation & composability?

In creating a new project, I'd much rather be adding the things I want than removing the things I don't.

Also, teach to fish, etc.

I disagree. Add all the things.

I actually never use generators or boilerplates, always bloated and out of date lol.

avdd commented

@ProLoser I'm starting to agree with you I think. Bloated, out of date, inscrutable, over-opinionated, brittle and often just broken. They seem to be solving the wrong problem. It seems the only real use case is writing your own generators, at which point you're probably better off just having your own project templates.

Best wishes,
Tony

On 2015Γ„Γͺ1ÔÂ9ΓˆΓ•, at 5:13, Charles Han notifications@github.com wrote:

+1 for ui-route and Protractor

Β‘Βͺ
Reply to this email directly or view it on GitHub.

Is there an example/tutorial of how to integrate ngtemplates in an angular application generated by this generator?

+1 for material support and module file structure

+1 for integrating gulp instead of grunt

+1 for ui-router

+1 angular-material
+1 TypeScript Support

+1 for material support

+1 protractor

+1 material angular
+1 module file structure
+1 gulp
:)

+1 for adding ui-router

protractor - already done
ui-router - already done

Please check real status before posting ideas here.

Also, send a message to support@github.com requesting that the feature voting feature be added to github so that people don't have to use "+1" comments.

Everyone wants this and the only way it's going to happen is if GitHub support gets flooded with requests.

+1 for ui-router.

+1 - less
+1 - uncss
+1 - materializecss

Waiting for this project to update more than an year now 😞

Is any of this even relevant anymore? I've been using Swiip/generator-gulp-angular lately, and it's fantastic, and is basically everything this issue is wanting to go for. The only downside is I've had to use doronsever/gulp-angular-subtask for the sub-generators, and it seems out of date and using a different directory structure than gulp-angular.

Perhaps a better use of time would be to create configuration for generator-angular so its sub-generators could more seamlessly be used with projects like gulp-angular and DaftMonk/generator-angular-fullstack. Although I'd really like to see a first-party Yeoman Angular release using Gulp, and ui-router, and E2E testing, and all the radness rolled into, well, gulp-angular, it would also be really good to realise that these other projects have grown in its absence, and figuring out how this ecosystem can work better together might ultimately be more effective.

I like fact that angular-fullstack generates also server side stuff.

Implement the use of ui-router as an alternative to the native ngRoute!
@gintsgints it's not implemented yet as far as I know, then how can I change my app to use ui-router instead?

You can create new app with ui-router.

+1 for adding ui-router

Support for backend implementations, whether that be proxies, rewrite rules, make it more composable for other generators or actually adding a backend REST server (highly unlikely though)

have you considered using webpack? You can use its dev server, webpack-dev-server as a development server that can proxy all urls that match a path to another url. Also would serve well as a build step and allows for using CommonJS require in the browser

@DanPantry I've been investigating using Webpack with Angular the last two days, have been fairly impressed so far. This generator looks really cool, despite it being Grunt-based.

Have you seen the generator-gulp-angular ? What do you think of it?

A long time it has support for several things that have not been started here. eg jade, angularMaterial , typescript , protractor ...

So, what do you recommend?

@AbraaoAlves I mentioned that above, am really impressed by it so far.

@eddiemonge Add an option to chose Angular-Ui-Router instead of the default router.

πŸ‘ angular-material and angular-ui-router instead of default router.

@eddiemonge rather than livereload ,why can't move to "browsersync"....highly powerful one.

Do you think to update all dependency to the last version on package.json? because the generator is using https://github.com/gruntjs/grunt-contrib-livereload and it is deprecated.