Generators have been a thing for a while now. Ruby on Rails community has taken this to a whole new level and for a good reason. Generators are a very powerful time saving tool meant to automate repetitive task of setting up the project and dependencies. Yeoman is the most widely used and adopted Node.js generator application, is mature and has a really really large community. This open community makes Yeoman the de facto standard in the area of scaffolding tools.
Take a look at the steadily growing number of Yeoman’s community generators. Overwhelming, isn’t it? This article is a result of crawling the complete list of 800 generator modules and picking out a few that look fun and might not be as well known as others.
If you aren’t familiar with Yeoman, the best place to start is the getting started page. In this article we are going to assume that you have a working knowledge of how to run a generator.
bookmarklet
Have you every written a bookmarklet before? No? Well, then this might be the right time to start. generator-bookmarklet provides you a project structure for getting your hands dirty on those little scripts which users can extend the browser’s functionality with.
The generator’s template utilizes the build system gulp for creating a minified version of your bookmarklet. You will find the distributable version in the dist/ directory after executing the default gulp task.
element
We’re all pretty sure that WebComponents will be THE next big thing. Although it is an interesting concept, the technology has not yet landed in all the browsers. Do you remember the “Dark IE6″ past (some of you might still be in it)? What did we do to use new features in this browser? Correct! We used polyfills. The same is happening today for all the hot new toys, such as WebComponents. Among others, there are three big players at the moment: X-Tag from Mozilla, Polymer from Google and Vanilla JS (okay, okay the last one is not really a polyfill 😉 ). The generator-element by the folks behind webcomponents.org provides a way to quickly scaffold out a boilerplate for developing own custom elements, which will be driven by one of the three (two!) polyfills.
After you’ve executed yo element within the directory where you want to create your new element, you will be presented with a guided assistant that prompts you about which polyfill you want to use, the name of your element and if you want to include lifecyle callbacks.
Easy, isn’t it? Please note that the generator comes with a second, more ambitious, boilerplate approach. If your want to develop a component that will be published later on, you can take advantage of yo element:repo which creates a structure that is meant for publication on GitHub.
firefox-os
If you had a chance to play around with a Firefox OS phone you probably loved the experience (like I did) and see the huge benefit of the platform, which is really (!) open. How about writing an application for it?
As you might expect, there is a Yeoman generator for it, which helps you to overcome the hurdles of setting up a project. Install generator-firefox-os by Zeno Rocha and start contributing to this awesome platform.
Like with all new projects, you have to create a directory first and switch into it. After executing the generator there, you will find a complete application that is runnable on a Firefox OS device right from the start. But that’s not all. The index view of this boilerplate contains an overview of some of the available platform API’s. So if you do not have any experiences with this operating system, this is a really good starting point. Play with those functionalities and spread the word so that the platform gains traction it deserves.
I may have given the impression that you need a device in order to develop applications for this platform. That isn’t so! Check out the Firefox OS Simulator for testing your application on your workstation before deploying it to a device.
hoodie
We lived through the dark epoch of “not-having-always-available” internet connections. But still, we’re facing so many times where we have not a reliable link to the matrix. Especially when you develop or use mobile applications on a regular basis. Anybody who made experiences in this area knows what I’m talking about. What if we build applications without having internet connections in mind at all? That is the idea behind the noBackend paradigm. The awesome folks at The Neighbourhoodie Software GmbH developed a framework for building Offline First applications, called hoodie. This solution persists data locally and syncs them in the background when you’re back online (when you need syncing at all).
If you want to check out the framework (and I can’t encourage you enough to do so), I suggest you use the official Yeoman generator then. generator-hoodie from the same people who also developed the framework, provides you an excellent starting point for your next mobile (web) application. In order to use hoodie, you have to install CouchDB. After that you’re are able to run grunt server which starts a development server or grunt build which will create a deployable version of your application.
flight and flight-package
You may know Twitter’s TweetDeck, don’t you? From a technical point of view, it is a sophisticated single-page application. Nothing new here. But did you know that Twitter built it with the help of their very own framework, called Flight?
Flight, as the name suggests, is a very lightweight piece of software (~5K minified and gzipped), with philosophy is to provide a way to decouple your applications into small, self-contained components (available components). Those will communicate with each other in an event-driven kind of way. Check out the docs, it’s pretty neat.
So ladies and gentlemen, please take your seat, fasten your seat belt and npm install -g generator-flight. generator-flight brings everything you need in order to build Flight-based applications. If you did generate a new application, you can execute npm run server to spin up a static web server that serves your project at http://localhost:8080 for the application part of the framework.
As I said, Flight embraces components. Therefore, if you would like to create a component, which other developers can use in their applications, check generator-flight-package . This generator brings everything you need to create standalone components.
node-webkit
Not so long ago, we saw many large enterprises whose only interest was to sell proprietary software. We couldn’t be happy enough about the fact that this time is over! Now we see companies who have a strong commitment to open source in general. Companies, like Intel, who maintain an Open Source Technology Center (OTC) that gives away awesome tech projects for free.
One project that has been hatched at the OTC is node-webkit. It allows you to build desktop class applications with technologies you already know: HTML, CSS and JavaScript. The last point gets the most attention, because you can write and use CommonJS-based modules which are meant to be used in a Node.js environment and call it directly from your frontend JavaScript code. In other words: node-webkit offers you a runtime with the rendering capabilities of WebKit (Blink) combined with the ecosystem of Node.js and a deployment mechanism to compile your application to the three major desktop platforms (Mac OS X, Windows and GNU/Linux).
You might think: “That’s crazy. I don’t think the deployment process is that easy.” – Don’t want to be rude, but it is! As you may assume, there is a Yeoman generator for it. generator-node-webkit brings not just a clean starting structure for your project but also some Grunt.js tasks to package up your application for the respective operating system. Note that you have to be on the target platform to compile an application for it. So if you are on a Mac and scaffolded a new project, execute grunt dist-mac in order to create a distributable *.app file. You’ll find this file in the dist directory after. Cool, isn’t it? Please make sure to check out the wiki for full details.
bespoke
Do you remember the last time you prepared presentation slides in PowerPoint or Keynote? Not that those two are bad products, but we as (web) developers love to work with tools which are close to our passion. This passion is not to use a GUI in order to build something, it is one level lower, at the “code level” – this is where our GUI is. Therefore, I really like reveal.js by Hakim El Hattab for creating slides. It’s an awesome tool, but as a tech-loving developer I also leave my comfort zone from time to time and try new things – the underdogs you discover by accident. One day I stumbled upon bespoke.js. A “Presentation Micro-Framework” which lives the “modularization dream” (another part I like). The core of the framework is super minimal, sets up the presentation control API and manages events. All other functionality is implemented via plugins.
The generator-bespoke by Mark Dalgleish (who also developed the presentation framework) helps you with setting up your first bespoke.js powered slides. It guides you through the complete initialization process and asks which bespoke.js plugins you want to use. After the presentation has been scaffolded, it comes with a preview server that has LiveReload capabilities, Jade and Stylus compilation (both in gulp serve) and a built-in GitHub Pages deployment with gulp deploy.
As I mentioned before, the whole presentation platform is extendable through plugins and themes. So if you want to join forces, make sure to check the official Yeoman generators for scaffolding plugins and themes.
release
I’m pretty sure that you know which tasks are daunting while developing new software products (beside scaffolding everything out, of course). Yeees! Preparing releases. First of all, you have to check all commits and write a changelog file. Then you you have to bump the version in your package.json, bower.json and whathaveyou.json. Last but not least you will push everything into the upstream repository. Sure, you could automate this with Gulp.js or Grunt.js. But did you know, that there is also a generator for Yeoman that can help you here?
The folks at Walmart Labs developed generator-release to assist you with this tedious task. Please note that you have to create a Personal Access Token on GitHub and configure the generator before using it. After that you create release notes with yo release:notes. This grabs all commit messages since the last release and creates a changelog template file for you. yo release:release [major|minor|patch|prerelease] helps you manage semver version, tagging and pushing to the upstream repository.
Creating a release has never been easier! Sure, you could say that it is still two commands to run. Nope 🙂 Just try yo release as a shorthand for executing both tasks.
What Else?
Have you used any of these or other great generators? Which do you use most often?
