Man, I've been wanting to write this post for a while now because of how awesome this yeoman generator really is! In a magical twist of fate I started using the Gulp-Angular generator simply because it ranked highly on the yeoman.io search page for "angular", but later I learned that this generator would be the one recommended by my Angular 102 instructor, George Dagher, and in fact the whole NYCDA. I'm fully on board with them on choosing this generator, and in this post I'll try to explain why I think it's so great.
It goes without saying that AngularJS is the new hotness in front-end web frameworks (ok I'm probably just biased since I'm surrounded by people who love angular!). So suppose you're an Angular dev, and you want to begin a new project. How do you start? In my opinion (and I'm sure I'm not alone here), the best way to start is with a yeoman generator. Yeoman is an npm command line tool that allows you to instantly create all the boilerplate folders and files for a new project, and the specifics of what files and folders it creates are defined by the generator that you tell yeoman to use. There are a few options out there, but here I'll give my reasons why I like Gulp-Angular more than any other angular generator you might choose. I had stumbled upon it and poked around a few weeks before learning about it in class, and that class really solidified some things for me (mostly around how gulp worked) that allowed me to take advantage of the different things that it could do for me and truly brought me to the next level as a front-end Angular developer.
* Note: This generator is for Angular 1.4 or 1.3*
Lost?
If you have no idea what a yeoman generator even is, check out my other post, Realizing the Awesome Powers of Yeoman. If you already know the ropes, then let's get on with the list!
|
I <3 Gulp-Angular Because...
8. It Builds a Starter Project With Good Coding Practices.
(Once you become familiar with AngularJS you might make the decision that you want your code not just to work, but to follow best practices. If you've never seen them before, check out this style guide by John Papa or this one by Todd Motto. I like this generator because it follows many (if not all) of the generally excepted best practices. For example, it has a components folder and starts you off with a few component subfolders that include all the files for that particular piece of your application (this is pretty much always recommended over of the more noob-ish directory structure with one giant controllers folder, a views folder, etc). I also like how they use Controller as style in the markup and refer to the controller as vm in the js code. I like how they break up certain config settings into 6 different index files (7 if you include index.html), each with it's own purpose. I like how they set up the index.html file in a way where you rarely even need to touch it. It's body has a single div with the ui-view attribute, this uses ui routers routing to display your views (in this case, everything you see on the screen is defined in main.html).
Component-based file structure.
|
The 6 index files.
|
Controller referring to itself as "vm".
7. It Makes Dependency Management a Breeze.
If you are an beginner-intermediate javascript programmer still working with external libraries by including a <script> with a src attribute pointing to a CDN location, then this will blow your mind! Gulp-angular will set up all the dependencies for you when you initially scaffold the project. It will automatically inject bower/npm dependencies as can determine the proper order on it's own if some scripts depend on others. Very nice! If you ever need to add or remove dependencies, just use bower or npm. For example, if you wanted to add the greensock tweening library (instead of css animation? *gasp*), you could flip over to your command line into the project's root directory and run this:
bower install gsap --save
6. It Sets You Up with Sass or Less.
Css can be painful to write for beginners, and you end up repeating yourself a lot, especially on large projects. One of the questions when you are running the generator is "Which CSS preprocessor do you want?". I personally prefer Sass, but the differences between the two are almost pedantic (I prefer Sass so for the rest of this post I'll assume we're using Sass, but you can almost always read the sentence with "Less" instead if that's what you're using). If you find yourself using the same colors, margins, font settings, etc. over and over in different places then you will really be doing your future self (or the lucky soul that gets to maintain your code) a favor by avoiding duplication in your css! An excellent way to do this is to define these common values as Sass @variables, and if you have groups of them that seem to always go together create a mixin that can be defined in one place and used in style classes elsewhere. Gulp-Angular takes all the setup out of getting started with Sass. As soon as your project is scaffolded, you're good to go. Gulp will pick up new .scss files automatically so all you need to do is create a scss files and start writing some styles!
5. It Nudges You Towards NgResource and UI-Router.
You might be perfectly happy with the built-in services from the Angular team, but there are actually two services in particular where you may want to use the alternative instead. NgResoruce and UI Router are improvements on built-in services $http and ngRoute, respectively. We talked about these services in my Angular 102 class, and the George recommends using these newer services over the default ones. The differences between the Angular team's services and the ones I'm recommending is beyond the scope of this blog post, but just know that they give you more control and flexibility than you would otherwise have with $http and ngRoute. Also, you should realize that you don't need to choose these for the generator's questions in order to use them. You could pretty easily install them later using bower although you may need to reconfigure your index.route file a bit if you are changing the routing. I give kudos to gulp-angular for not forcing you to use them if you don't want to, but it recognizes that you will probably want to use these two third-party components and lists them both as the first answer for their respective generator questions.
4. It Starts You Off With a Factory, Service and Custom Directive.
Getting deep into the advanced parts of Angular can be a little daunting at first. All these buzz words may start to seem like they are just there to confuse you! Well, in reality they are there to help you, and the whole point is to bring ideas of OOP to javascript (and html). Remember the style guides? Don't have fat controllers! Extract helper methods into services and use factories for object instantiation. Instead of putting your view in one huge html file, break it up into self-contained directives. It can be nice sometimes after starting a fresh project to have an example to look at when creating a new factory, service, or directive. This generator starts you off very nicely by providing a factory: githubContributor.js, a service: webDevTec.service.js, and two directives: navbar.directive.js and malarkey.directive.js.
3. It Let's You Pick Your Favorite Flavor of Javascript.
With the speed everything in moving these days, I feel like I'm working in code from the stone ages using good old es5 Javascript! It's good to know though that if you did want create your Angular projects in ES6 or Typescript then it's a very easy thing to do- just answer this yeoman generator question with the flavor you want to use. It's interesting that they list CoffeeScript as an option as well. I've dabbled in CoffeeScript, but I feel that it was more popular when Typescript wasn't as solid as it is today, and I see more strict-type js developers using Typescript. Also, Angular 2 pushes Typescript pretty heavily so it might make sense to get into the habit of coding Angular 1 in Typescript even if it's only to get familiar with it before moving to Angular 2.However, all my personal and work production apps have been written in ES5.
2. It Sets You Up Great For Unit Testing and E2E Testing
I've recently been reading a lot about unit testing and TDD. Although writing Jasmine tests can seem a bit boring and hard sometimes, having a solid suite of tests in place can really give you the confidence that it's ready-to-ship when the day comes. I think it is really awesome that Angular was from the beginning built with unit testing in mind. A lot of people mention that the dependency injection makes testing easier. Well, after getting dirty and doing it myself I can say that yes, DI does make unit testing much easier! Why is this? It's because when you include your services, factories, etc with DI then you can just inject into your a mock object instead! (ok, it's not always that simple, but a lot of times DI can help make creating your unit tests work out very nicely, and you can always keep in mind that these injected things are usually good candidates for things to be mocked up). Gulp-Angular makes it incredibly easy to test by setting up all the necessary plumbing for both classic Jasmine unit tests and e2e protractor tests, and all you have to worry about is flipping over to your command line to run "gulp test" and "gulp protractor", respectively. And that's a great segue into the #1 reason why I love gulp-angular so much...
1. Amazing Gulp Scripts Completely Written For You
Gulp is an amazing command line tool that will make you way more efficient in your font-end web development if you aren't currently using it (or something similar). You can easily run your project on a localhost server with just one command- gulp serve. With this you also get BrowserSync, possibly the main thing that draws people in to try it for the first time. Browsersync updates the browser automatically when you save a project file that's been modified. It allows you to test on multiple browsers, clicking something in one browser triggers the effect on all browsers running it- hence the "sync" in the name BrowserSync. As I mentioned before, gulp has a watch task will not only detect changes in files, but it will also automatically pick up on new files that you have created (no script tags needed!). With each build using the lone gulp command, it does a lot of work behind the scenes- translating your Sass to css, minifying the code, and injecting the dependencies just to name a few. Running unit tests is cake with gulp as well. I know- you keep hearing people (including me) harp on how important it is to have unit tests in your code, but how do you really do it? All you have to do is run gulp test. Gulp will automatically pick up on all of the **.spec.js files in your project and try to run the contained unit tests. The command line will then quickly and clearly show you if your tests passed and the reasons for any failures. I know someone will ultimately say, "What about Grunt?". Grunt can do basically the exact same thing, but if you want to modify, for example, the build task to me it is much easier to edit and extend gulp scripts than grunt files (Also, there is no grunt-angular generator, but this begs the question of why the generator creators chose gulp over grunt). There is a reason why gulp in the new hotness in task-runner land, and that reason is because it's really, really awesome to use. With gulp-angular you don't even need to waste precious time setting up gulp and creating the basic tasks for it to run. Simply scaffold your project, and let the awesomeness begin...
Gulp scripts generated by gulp-angular.
The Time to Start is Now!
Hopefully by now I don't have to convince you how awesome AngularJS 1.4 is and how much fun is it to use if you really understand it. As of the time of this writing Angular 2 is still in beta, and I'd say 95% of the production web apps I've seen are in Angular 1 so starting a new project right now with Angular 1 is still a good decision in my opinion. I've heard of some speed improvements and other benefits to using Angular 2, but we'll cross that bridge when we come to it. For now, 1.4 is the stable release of AngularJS. If you want a great generator that will scaffold out your project and create some pretty legit gulp scripts then look no further than gulp-angular. The image below shows how I like to answer this generator's questions, but feel free to answer them differently if you prefer it another way. Work faster, smarter, and show the haters that Javascript really can be a language for building serious software. Happy coding!
Want to Add to This Generator?
I'm really just jumping on the bandwagon for this generator now at version 1.0.15, and I haven't actually made any pull requests to the project. There are a few things I would possibly change, though. I usually add my own zipping output pipe onto the end of the gulp build task just because it's something I commonly need to do after running gulp. I also prefer a different style for the syntax of a factory than the one they use. It would be nice also to see a small example of a provider being used, and possibly even the value and/or constant services as well. I know it adds a little to the package size, but my reasoning is the same as why I like the factory, service, and custom directive in it now- it's much easier to see a provider in front of you and then repurpose it for the new problem rather than trying to write it from scratch each time. Anyway, if you are interested in collaborating to make a fork off of this generator reach out in the comments!
Thanks to the Original Authors
I think all of us users of this generator owe a huge thanks to the original creators, Matthieu Lux & Mehdy Dara and the other eighty-something contributors on github. Thanks guys!!
RSS Feed