Generator for AngularJS / CoffeeScript / RequireJs / Mocha about generator HOT 15 CLOSED

AngularJS Generator maintainer here. Thanks for the feedback, and you make some good points.

• Is CoffeeScript not working right now? I thought that Yeoman took care of compiling CoffeeScript, but I haven't tested it myself lately.
• I agree that this should be an option, and we already have an adapter for Mocha. Again, this won't be the default, but a prompt for init angular seems like it would be reasonable.
• Not sure about this one. What is your reason for wanting to use Require? There are a few ways to lazy load modules, but I'm still exploring different solutions before we recommend one by including it in the generator.
• Yep, also working on this.

Again, thanks for your thoughts. For the foreseeable future, I will continue to develop and maintain the AngularJS generators, so I hope to address your concerns. Feel free to fork the repo, hack on it, and submit PRs. :)

from generator.

• It's not that Yeoman doesn't support CS, it's that all the templates in the generator are straight-up JS. Correct me if I'm wrong, but Yeoman doesn't have a way to convert to/from a single source of truth for the templates to the preferred source format in the project -- i.e. source templates are coffee, but the project format is set to js, and therefore the template output would be js. I'm talking about the intial scaffolding, and commands like yeoman init angular:route add
• Sounds good on Mocha.
• The big thing around Require support is that the r.js optimizer can be used, which supports fancier dependency chain resolution, etc, etc... and is particularly useful when concatenating the app into a single script. Regular concat can bust when the dependencies are not properly ordered, etc. This however, does complicate things a bit and requires some additional boilerplate -- but I think the generator should be able to take care of this.

from generator.

• Gotcha. Although I considered other options, I think the best way to go about this will be to maintain both CofeeScript and JavaScript templates. I don't use CS much myself, but I'll take care of it unless someone else wants to volunteer.
• AngularJS's DI system takes much of the pain out of this. The only caveat is that the module declaration needs to come before its use; Angular handles instantiating services' dependencies. I don't think that the complication of adding Require and wrapping all your files is worth it for AngularJS apps. If you follow the rule of just declaring your modules first (and it doesn't matter the order of the modules, just that they appear before you add services, directives, etc to them), you should not run into issues. Do you have a specific demo or app where this was an issue for you?

from generator.

Yeah, I do agree that Require-ifying a library that already has a built-in Module / DI system seems... a bit redundant. However, I'm thinking more along the lines of other external libraries which live outside of Angular-land and bringing them in as deps -- jQuery plugins, storage libs like Amplify, yada yada. Let me see if I can come up with a better example of this later. In all honesty, I was hoping to come up with a convenient way to bridge the two systems somehow without having to wrap up everything Angular file in Require. I have to scope out the internals a bit more to understand if that path is even possible.

In the meantime, here's a recent thread on the Angular forum discussing others uses for Require:
https://groups.google.com/forum/?fromgroups=#!topic/angular/na9w48QISr4

from generator.

Ah, I see. I could see that being helpful with third party libraries that have a complicated dependency hierarchy. Depending on how large the library is, it may or may not be reasonable to manually wrap he external packages dependencies with AngularJS's DI system. I'm not sure if this is the ideal solution (I need to do some exploratory work on it), but if we decide that's the way to go then maybe Yeoman can do this automatically.

from generator.

Sounds like a plan...

I'm not sure of the ideal one either at the moment. I def don't like the way it has been implemented in AngularFun -- way too much ceremony, and tighter-coupling to Require than I'd like to see IMHO. But I am following that pattern at the moment in an internal app -- will let you know if I can come up with something simpler.

from generator.

Hey, Iristyle, I resemble that remark. :)

Admittedly there is certainly ceremony in AngularFun. My team needed a solid and maintainable way of managing dependencies, and RequireJS has fit the bill nicely. Combined with AngularJS, however, it seems as if there is some duplication of effort, but there is a distinction with a difference.

RequireJS is purely managing dependencies. It makes sure modules are loaded in the proper sequence and provides a handle to their public APIs.
AngularJS doesn't help with loading the dependencies or making sure they are loaded in the correct order. But it does manage its modules once they are loaded.

I created AngularFun as a playground for the needs of my team. They are:

• Use AngularJS (we looked at several libraries and frameworks before selecting AngularJS)
• Use with 3rd party libraries (this creates a greater need for dependency management external to AngularJS)
• Write modules in CoffeeScript
• Write unit-testable modules
• Use Bootstrap by Twitter
• Write styles using LESS
• Mange dependencies with RequireJS
• Use grunt to build, watch for changes, and build on-the-fly
• Use non-minified CSS and JavaScript during development
• Use minified CSS and JavaScript for production
• Others I cannot remember

We are writing a very large application using AngularJS and the aforementioned technologies and are tweaking our techniques as we go.
It's working very well for us so far.
Type grunt prod at the command line, and you'll get a compiled (CoffeeScript -> JavaScript, LESS -> CSS) version of the application output into a dist folder. RequireJS works beautifully for the production build too as it snakes through the dependency tree, minifying and concatenating in the correct order.

In practice, RequireJS is working very well and addresses the needs of our project and team. But YMMV, and your team and project may have different needs.

I'm always on the lookout for ways to improve the developer workflow and enjoy reading all of the remarks.

Yeoman may be really promising for all of this.

Thanks,
Cary

from generator.

@CaryLandholt thanks for jumping in on this.

Your goals are essentially identical to mine (with the exception that I'm just starting and you've clearly been at this for a while -- so I defer to your experience here). I have looked extensively at your project as mentioned, and I'm using some of the concepts in it as the basis for our build -- though I'm using Grunt 0.4.0a / Gruntfile.js, the various grunt-contrib-* plugins rather than your grunt-hustler, and eventually intend to kick off bunyip through grunt to test against Browserstack.

As mentioned, the only thing that I'm not keen on is wrapping everything Angular inside of a Require style define. I wish that there were a way to wildcard shim (for lack of a better term) the Angular controllers, services, filters, directives, etc through a Require plugin or similar, without having to edit all the code files. I totally agree with your points on the benefits of Require, but the implementation is very intrusive at the moment. What happens if Require dies and Fubar3000 takes over? (I know this is a bit of a YAGNI argument, but we do know that ES Harmony will eventually be here with a proper module spec)

Obviously for any external dependency that Require exported and an Angular service/controller/directive needed, there would have to be a bridge that would inject the dependency into Angular so a constructor function could consume it.

This seems to me that it's something that could be done. Am I making sense?

from generator.

Yep - you make complete sense.

Until ES Harmony with significant adoption, we needed a solution now.
The require and define wrappers do add some noise to every module; however, we're not finding it to be a distraction in heavy use.

It also helps to enforce our requirement of one module per file. It's easier to manage, test, and reuse IMO.

But I would argue - if you don't need it, don't use it. :)

If your needs don't move beyond AngularJS, I think their DI system will work fine.

@Iristyle I'd love to hear more about your project.

By the way, grunt-hustler now has 153 unit tests. :)

Cheers!

from generator.

@CaryLandholt If I can get this thing cleaned up and doc'd I'll probably surface it. I've incorporated some of the pieces of lineman in to my build as well, rather than just using jasmine/mocha and a static HTML page like you have in AngularFun. Of course, now I'm trying to get mocha running off of a runner that's been require'ified, so that I can run tests under Jenkins and produce TAP output... and then at some point, as mentioned, I want to launch bunyip / browserstack.

I stole and tweaked some of the concepts from lineman - check out the testacular spec runner

from generator.

Hi Brian,

AngularJS's DI system takes much of the pain out of this. The only caveat is that the module declaration needs to come before its use; Angular handles instantiating services' dependencies. I don't think that the complication of adding Require and wrapping all your files is worth it for AngularJS apps. If you follow the rule of just declaring your modules first (and it doesn't matter the order of the modules, just that they appear before you add services, directives, etc to them), you should not run into issues. Do you have a specific demo or app where this was an issue for you?

What about the use case where you want a single script tag for both the non concatenated development version that also works with concatenated production version of your code? I've used requirejs and almond for this previously. Is there a way to do this without require/almond in angular with yeoman or even angular alone? Perhaps a better approach in general?

Thanks!

from generator.

@btford If this is not solved, can you move it over to the angular generator?

from generator.

Sure. I think we have all of this addressed. We've decided (at least for now):

• Not to support Require.js in the generators for now (but if someone wants/needs it, feel free to file an issue)
• Mocha is a maybe, see: yeoman/generator-angular#51
• Coffeescript support has been implemented
• Bower support has long since been implemented

from generator.

Whoa -- revived from the dead!

After spending much more time with RequireJS and integrating it into builds and making it work with other tooling like Grunt and Karma... it's way more trouble than it's worth, and mostly unnecessary ;0

We're doing something kinda / sorta like https://github.com/OpenWebStack/structure ... and FWIW, we ended up not using Yeoman b/c it didn't fit our needs.

from generator.

Thanks for the follow-up, @Iristyle.

If you think there's something we can do to better fit your needs in the future, feel free to file issues (but they probably should be on yeoman/generator-angular rather than this repo).

Also worth a look if you haven't seen it is this proposal: yeoman/generator-angular#109

Cheers!

from generator.