Yeoman First Impressions

I've been looking for a quick way to put together a web stack for some time now.

There are a lot of common tools (backbone, requirejs, bootstrap to name a few) that I use in every project and sometimes it gets quite tedious to setup.

Enter Yeoman.

What is it?

A command line tool that helps create "modern workflows for modern webapps".

The Yeoman Website

They have a bash script to check dependencies and help install it. The script itself has nice looking output with checkmarks, crosses and ascii art as well as simple instructions to help get you running.

It has many features and tools that have been developed over time by a large community, borrowing from many projects and best practices, and is maintained by some pretty famous people in the web world.

For a more in depth description, you can visit their FAQ page.

Baby steps

Obviously, the first thing I did was install Yeoman.

$ curl -L get.yeoman.io | bash

For my particular system, I had to install 4 things:

  1. compass
  2. optipng
  3. phantomjs
  4. yeoman

I'm not quite sure why it requires compass to setup the tool. I thought it was something you used with sass to preprocess CSS.

It also told me to install like this:

$ sudo gem install compass

I ended up installing compass without sudo and then got the rest of the dependencies in place.

Tracking?!

At some point, I got a prompt asking to track my activity.

I was kind of caught off guard by this but they were very transparent about how they will track you and what they wanted to do with the data.

They even went on to explain how it all works and encourage you to have a look at the code if you're interested.

My first project!!11

The next thing I did was create a folder and ran yeoman install. Again, I was prompted for things such as compass, bootstrap, requirejs and maybe a couple of other things.

First thing I noticed was it didn't ask me about backbone.js at all. In the documentation, there were some lines after yeoman init.

I tried running yeoman init backbone. It did some stuff and overwrote some files.

That didn't seem right so I read on.

Apparently, you can add backbone to your project by running yeoman install. I did that and it was installed as what they call a "component".

At this point, I was a little confused.

My second project...

I decided to see what an AngularJS project looked like because one of my co-workers was pretty excited about it.

$ yeoman init angular
$ yeoman server

Their server is pretty nice. As soon as I ran yeoman server, it opened up my browser to localhost:3501 and showed me the app.

I proceeded to edit the app/views/main.html file and watched Yeoman reload the page (uses LiveReload.js) in my browser for me, sweet!

At this point, I remember Yeoman requiring PhantomJS for headless browser tests.

$ yeoman test
Running "test" task
<WARN> Command failed: /bin/sh: testacular: command not found
 Use --force to continue. </WARN>

 Aborted due to warnings.

D'oh.

Around this point I decided to end my trial run with Yeoman.

My thoughts

These are my personal opinions about the short experience I had with Yeoman.

What I liked

  • the server watches files for you and...
    • recompiles them (.sass, .coffee)
    • refreshes the browser when a page changes (using LiveReload.js)
  • build process involving: minification, concatenation, image optimization, and more...
  • sets up a test with Mocha and a headless browser test (PhantomJS)
  • the giant Yeoman ascii art when you install it

What made me sad

  • the documentation was not quite there yet (yeoman init vs yeoman init backbone vs yeoman install backbone confused me a bit)
  • Yeoman claims to help manage dependencies for you but you have to manually insert the script tag (had to visit documentation)
  • yeoman init ... base projects seemed inconsistent
    • i.e. yeoman init angular asked me if I wanted to use bootstrap but yeoman init backbone did not

Some issues I encountered

  • yeoman install ... created 2 components directories:
    • in the root of the project: /components/<plugin>
    • and in the app folder: /app/components/<plugin>
  • during the initial install of Yeoman, it prompted me to sudo gem install compass
  • yeoman test threw testacular errors (in an angular project)

Improvements

  • minimize dependencies
    • the toolset requires: Ruby, node.js, Compass, PhantomJS, ...
    • it should be possible to omit Compass, for example (not every project will want it)
  • improve documentation in regards to initializing a project (putting a bunch of init lines one after another is a little confusing)
  • I would have liked to see a sample workflow using yeoman after step 2
    • something like this would have been nice:
      1. yeoman init
      2. yeoman server
      3. edit some files and watch the server do some magic (recompile/reload pages)
      4. writes some tests & yeoman test
      5. yeoman build
      6. yeoman deploy <-- why not? :p
  • consistent generator experience
    • mainline generators should ask the same questions: do you want bootstrap? do you want compass?
    • have some way of marking other generators (why two backbone generators? bbb vs. backbone)

Conclusion

I really like the stack and the goals of the project. It is pretty up-to-date with all the tools it uses.

It's still a very young project (v0.9.6 as of this writing) but looks very promising. The current build status is failing but I'm sure that'll be taken care of in the near future.

It's fun to see where the project is going and I plan to keep playing with it to see how I can fit it into my own workflow.

I actually tried it a few months ago but I can't remember what I thought of it at the time...which prompted me to write this post :)

If you want to be on the bleeding edge, play with the newest tools and see the future of the web, I urge you to give Yeoman a try.

©2018 Donald Chea, Pyjama Coder