permalink

48

Improved Developer Tooling and Yeoman

Read Later submit to reddit

Did you guys enjoy Paul Irish’s talk at Google I/O?

In case you missed it, yesterday we announced Yeoman – a project we’ve been working on to greatly help improve developer workflow, spanning everything from a comprehensive build process to package management. If you’d like to read more about it’s features, check out Yeoman.io.

How does Yeoman build upon Grunt?:

One common question we’ve been asked if how Yeoman differs from Grunt. Ben Alman’s Grunt is an excellent baseline and with this project we wanted to build on it, addressing:

  • An opinionated workflow we feel will simplify achieving common tasks more quickly
  • Improved scaffolding (our most basic scaffolding supports stripped HTML5 Boilerplate, Twitter Bootstrap (with Compass support) and AMD). We’re working on improving this further. You easily kick this off with yeoman init
  • Integrated package management – on the front-end this is huge. No more having to manually go opening up your browser or GitHub to find dependencies like jQuery or Backbone. Just do yeoman install jquery or upgrade using yeoman update
  • Wiring and integration of a number of commonly used grunt tasks (getting these to play nicely is not always straightforward)
  • Experimental support for EcmaScript 6 module syntax (works with CoffeeScript, vanilla JS, AMD)
  • An improved watch process – Yeoman has LiveReload support and falls back to a simple watch/reloader if you aren’t using LR. We also automagically compile your CoffeeScript and Compass files whenever you change them.
  • A comprehensive build process including benchmarked Image optimization, app cache manifest generation and a bunch of other pieces we think you’ll find very useful

Tooling tips and Yeoman Screencast (18 mins):

In this supplemental video, I discuss some more tips for developer tooling and ways in which Yeoman (and related projects) help us spend less time on process and more time building more awesome applications.

tl;dr: do what you can to automate as much of your workflow as possible. 

We’re looking at a number of additions we might make to Yeoman in the future, but we’re aiming to get a release out the door in the next month or so.

(Special thanks to Grunt, HTML5 Boilerplate and more without whom this project wouldn’t have been possible)

Video notes and further recommendations:

Editor

Scaffolding

Watch process

  • Are you still manually refreshing your apps/pages on every change? Still having to compile CoffeeScript etc. each time too? Get a file watcher in place to automatically reload for you.

  • LiveReload, CodeKit, Brunch and Grunt also do this well:

  • Grunt Reload tries to offer a better watch process for Grunt and also has some basic support for the LiveReload extension

Testing

Build process

  • We all need a solid build process for production

  • The basics (which Grunt covers very well):

    • Linting
    • Unit testing
    • Concatenation
    • Minification
    • Optimization

  • These days there are a few more steps worth considering:

Extra

Interested in automated distributed CI for JS? Checkout this guide from the jQuery project.

Thoughts?

We’ve had a great response to Yeoman since we announced it yesterday and would love to hear more about what you guys think of the idea. Do you see yourself using it based on the feature list and teaser? Anything else you wish it could try addressing?.

48 Comments

  1. Pipo June 28, 2012 at 7:51 am Reply

    Hi Addy,

    Yeoman looks really great. Is it build up on grunt (so it can use custom grunt tasks) or is it a complete different tool with the same approach? Does Yeoman rely on SublimeText to get all features? Can I create custom scaffolding templates (or plugins in general like with grunt)?

    Thank you very much,
    Pipo :)

    • Addy June 28, 2012 at 7:56 am Reply

      Hey Pipo,

      Yeoman is build upon grunt and so you should still be able to use custom grunt tasks. We don’t rely on SublimeText for any of our features, but for the first release might be putting out a Sublime plugin (or setup) that integrates with its build system. Anything you can do with grunt should be possible with Yeoman. In fact, our custom scaffolding tasks can probably be customized to match your own needs without too much effort.

      Addy

  4. asciidisco June 28, 2012 at 10:32 am Reply

    Looks really promising.
    A lot of stuff seems to be based on h5bp current node build script.
    What still grinds my gears, will the dependency tracking & fetching mechanism be based on Volo? I read that James Burke is also thinking about getting Volo & Grunt working together, so, join forces?

    • Addy June 28, 2012 at 11:08 am Reply

      The dependency fetching (package management) is based on Bower (a Twitter project). We initially reviewed Volo and had many discussions with James about it but decided that there were some design decisions we wanted to go with which were incompatible with the direction Volo was taking. That said, it remains a solution we’re reviewing.

      • Addy June 28, 2012 at 11:11 am Reply

        Mickael Daniels (who worked on the Node build script) is also on the Yeoman team. He’s been an awesome source of inspiration for some of our internal plumbing : )

        • Addy June 28, 2012 at 5:02 pm Reply

          Bower is currently not a public project on GitHub but will be released sometime soon as open-source. Watch this space : )

  5. Jamison June 28, 2012 at 10:41 am Reply

    Addy, you da man for posting this, so very informative. I’m afraid that I’m still in the dark ages of web development. I thought I knew a lot, but I’ve never heard of some of these libraries (e.g. Mocha, CoffeeScript, Jasmit). Can you point me towards a resource where I can learn about these new tools, or provide me with a list so I can research them myself? Would appreciate it *SO* much.

  6. Lars June 28, 2012 at 10:56 am Reply

    Hi Addy,

    sounds and looks great! Looking forward to test it.. Is there a release date?

    One more thing: will scaffolding support customized folder layouts (will it be configurable)?

  12. Mohamed Chorfa June 29, 2012 at 1:34 pm Reply

    Hi Addy,
    very lovely project. I would love to see a way to get up a prototyper ready to go.
    I mean a complete package of single webapp for just prototyping. ?

    thank you again for this huge amount of information.

    Very Inspirational.

  13. Tyll June 29, 2012 at 1:56 pm Reply

    Looks really awesome,

    but I have a question about the setup process in yeoman. I really like stripped-html5bp and bootstrap, but for most of my projects, I use my own modified base with the best of both builds. So is there an option to get user builds aside of these two?

    Thank you in advance!

  14. James Van Dyke June 29, 2012 at 6:06 pm Reply

    Will this be a front-end framework that I can use within a PHP, Ruby, etc. project? I want to use all these tools without writing the integrations myself, but my applications tend to be written in PHP using some other RESTful framework.

    It would be nice if this project could be restricted to a single directory within another framework’s directory, not think that it’s running off of a NodeJS server, and just let me optimize my scripts and create a thick-client that will communicate with my PHP app.

  16. Joe Snell June 30, 2012 at 3:21 pm Reply

    I can’t wait for the release of yeoman! I’m been working with my own parallel scaffolding, but I think this will bring everything into greater focus, clarity and way more streamlined. Definitely looking forward to it!

    • Addy July 2, 2012 at 7:11 am Reply

      As Yeoman comes with it’s own end to end stack for scaffolding and building apps, it removes the need to use Maven or Ant. You should be able to replace your existing Ant-based build process with it.

  25. Thijs August 17, 2012 at 3:04 pm Reply

    Looks very good, we’re (some friends and I) are actually starting a new project and this really seems to be fitting (it’ll be a location-based game written in Node on Android).

    Any chance when I’d be able to try it out? (github user: puredevotion, but it’s practically empty)

  27. Pingback: The Best Mac Web Development Tools | Montes' coding blog

  28. Pingback: Workflow и инструменты frontend-разработки

  29. Pingback: Workflow and Frontend Development Tools

  30. Kpym January 23, 2013 at 2:41 pm Reply

    I love Sublime Text 2 !

    I think that Google should buy it and open source it.
    When you buy ST2, you can hire Jon Skinner at the same time ;)
    This will be a win-win transaction !
    Please, do this !!!

    Thanks for your video.

Leave a Reply

Required fields are marked *.

*