From the experience that I have gathered to this date as a web developer, working and playing with stuff like ASP.NET MVC, RoR, node.js, knockout, angular, etc, I have found that Yeoman – the web scaffolding tool for modern web apps – provides the most awesome front-end web development experience from anything I have ever seen or used by far.
I haven’t worked with it as much as I would’ve liked, nor as deep as I would’ve enjoyed, so I thought it was about time to do something to correct that. You are more than welcome to join me: Let’s improve our front-end development FU and kick some ass with the Yeoman.
I have divided these series in the following articles. The idea is to start with a brief introduction to the whole Yeoman workflow, I will then continue investigating each particular tool of the stack in more depth, to finally wrap it all up with how you can integrate the workflow with Visual Studio. Hope you like it!!
- Introduction to Yeoman: Yo, Grunt, Gulp, Bower and npm
- Yo, scaffolding the boilerplate for you
- Bower, NuGet for the Front-end
- Grunt, front-end dev ops
- Gulp, like Grunt but different
- Yeoman and Visual Studio
What is Yeoman?
Yeoman is a set of tools that aim to make your life easier as a web developer by automating every possible tedious step and creating a friction-free development environment so that you can focus in what’s important: developing your web app. These steps comprise for instance:
- Creating a whole new project from scratch in seconds
- Live reloading the browser whenever you change your code
- Installing and managing dependencies to third-party libraries and wiring them in your application for you
- Running your tests automagically when you change your code
- Creating components of a web application and wiring them inside your app
- Creating distribution packages with minification, uglifying, image compression, etc
Yeoman itself is compounded by three set of tools:
- yo, the scaffolding tool, helps you create apps from scratch and scaffold – generate code for – other web application components, such as directives in angular or components in knockout.
- bower and npm, the package managers help you install and maintain the libraries you cannot live without. Bower takes care of your front-end libraries while npm focuses on backend and dev tools.
- grunt or gulp the task running tools manage the automation of daily tasks such as building, running tests, hosting a web server so you can preview your web app, etc.
Ok, and now let’s see this in action with a preview of what we will be learning in these articles:
Setting Up Yeoman
Beware!! The yeoman workflow makes heavy use of a command line. I recommend you to take a look at cmder and PowerShell.
- Get chocolatey, the Windows package manager
- Open your PowerShell console and install node with chocolatey
- Install yeoman: yo, bower, grunt
If you are a Mac user you are probably familiar with the terminal. If you haven’t heard about tmux, take a look at it, it is a pretty good way to manage several terminals at once.
- Get homebrew, the Mac package manager
- On your terminal (bash, zsh, etc)
- Install yeoman:
Creating Some Apps
Ok, so now that we have installed yeoman, let’s create some web apps! During these series I will create a couple of applications with angular.js and knockout.js and you and I will go learning more interesting stuff about yeoman as we go developing them further on each article.
Let’s start with angular.
Creating an Angular App
To create a new angular application with yeoman start by getting the angular generator – a generator is something like a recipe that tells yo how to create a new project (note that there are a lot of generators available for creating different types of applications).
Now you can use yo to create a new angular project (say Yes to everything during the installation):
1 2 3
This will create a angular project with the following structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
You can now preview your application in the browser by using the following command which will essentially start a node.js server and open your browser:
And that’s it for now, you got yourself a basic angular app to start working on. If you want to stop the server you can just click
C on the command line window.
Creating a Knockout.js App
1 2 3 4
And then create your new app:
1 2 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
The generator is configured to help you create a knockout SPA based on knockout components using require.js as module library. You can preview the app in your browser by using the
http-server tool and pointing it to the
1 2 3
This time you’ll need to open a browser yourself (by default
In this article I have introduced yeoman, the superwonderfullytastic web’s scaffolding tool for modern web apps. I hoped you liked it, or found it a little bit interesting and intriguing. Stay tuned if you want to learn some more…
… And if you cannot wait, don’t let me stop you, go on and check these articles:
- Awesome yeoman tutorial
- Getting Started with yeoman
- Getting Started with Bower
- Getting Started with Grunt
- Getting Started with Gulp
- Task Runner Explorer For Visual Studio
More Articles in These Series
- Object Oriented Programming
- White Tower Summoning Enhanced: The Marvels of ES6 Classes
- Black Tower Summoning: Object Composition with Mixins
- Data Structures
- Functional Programming
- And more stuff to be shaped out:
- Asynchronous Programming