Friday, December 20, 2013

Changing my webapps development workflow

A few months ago, I though I was running a pretty good setup for doing web application development. It was built around Netbeans, auto-compiles (for Less, Sass or Coffeescript) and CDNs. I did chug out a lot of code and with a "run test" code bind, it worked out pretty good. This was until I started to get tired of tracking my JavaScript dependencies and that my Internet was acting iffy (F*** Y** PLDT).

Enter Yeoman. Yeoman is described as a bunch of tools that "improve your productivity and satisfaction" as web developer. I'd buy that. Nothing is more satisfying that looking at the text output of a console with a success message at the end.

Getting started with Yeoman is surprising easy since at minimum you only need Node.js. Node.js has an automated installer for Windows which makes is near stupid-proof. The Linux people, I don't have to worry. The details can be found at Yeoman's website.

To succeed with Yeoman, you need to understand the 3 core tools:
  1. yo - tool to create (or scaffold) your app. If you're like me that tries out a lot of "flavor of the month" JS libs and whatnot, you'll like yo, a lot.
  2. bower - script/lib gopher or dependency manager. That cool library needing "other" libraries? bower will get those and that cool library. 
  3. grunt - is used to build, preview and test your project. You don't really have to config it since yo will already config grunt for your project. You just basically need to write the test. 
As for your workflow with Yeoman, it's quite simple:
  1. Make folder -> go to folder
  2. yo webapp
  3. bower install library_name -> for example: bower install angular to install the latest angularJS
  4. Repeat #3 until you have everything you need.
  5. grunt server -> runs web server to preview your app
  6. Write code, write, test fresh browser -> you don't have to stop, start the server to see changes
  7. Repeat #6 unless you want to run test
    • grunt test -> test runner
    • Go to #5 if the tests fails or you want to tweak something
    • Go to #8 if everything is A OK
  8. grunt -> deployment
I'm using Netbeans with this workflow.

Merry Christmas everyone and happy coding.