According to yeoman.io, “Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.” Let’s dig in and see exactly what this means!
Yeoman
_ .--------------------------. _|o|_ | Welcome to Yeoman, | |_| | ladies and gentlemen! | / \Y/ \ o_________________________| || : |// o/ --- \ _\ /_
A great deal of work goes into building web apps these days. There’s countless libraries out there to use, patterns, styles, grids, boilerplates, bootstraps…the list goes on! Yeoman is an answer to some of these issues. Rather than having to waste a bunch of time getting an application up and running, Yeoman does the brunt of the work for you – only requiring a few commands.
Before we move forward, we have to install it!
The fastest way to begin using Yeoman is by running the following script.
curl -L get.yeoman.io | shNote: Yeoman is supported by OSX, Linux, and Windows. This process clocks in around 10 minutes. In a future update, this installation process will be modified, however.
So, that was easy. What just happened? Lots of things! The install.sh file off ,get.yeoman.io, has a header that describes exactly what occurred.
# * Detect Mac or Linux, pick which package manager to use # * On Mac, install homebrew if it's not present # * Then install these: git optipng jpeg-turbo phantomjs # * Make sure Ruby >= 1.8.7 is around, install if not (for Compass) # * Install the latest NodeJS package # * Install Compass # * Download Yeoman zip to a temporary folder # * Install it as a global node module
And there ya have it!
Use it
Yeoman is installed as a global Node module, so pop open your TOC (Terminal of Choice), and run yeoman.
The first time this runs, it will enquire if you want to allow them to keep stats on your Yeoman usage. They actually have a Google Analytics account setup to track all kinds of interesting usage statistics.
Simply running yeoman from now on will print out a list of the commands that are available to execute.
yeoman init
This is where the scaffolding magic happens. Run the following command for a basic scaffolded app.
yeoman init
This command will ask five questions:
Out of the box, running init will include HTML5 Boilerplate, and jQuery and Modernizr. Here’s a more expanded list.
- HTML5 Boilerplate for the main base
- Compass Twitter Bootstrap for the SASS files as the CSS files are authored in SASS
- Twitter Bootstrap for the optional list of JavaScript plugins (optional)
- RequireJS for AMD module and script loading support (optional)
- RequireHM for experimental EcmaScript 6 module syntax support on top of RequireJS (optional)
It will also compile CoffeeScript and Compass files right out of the box!
Generators are the magic behind all of the scaffolding. The init command, itself, is based on a generator. There is a separate repository for them. There are many available already, including Backbone, Ember, and Angular to name just a few of them. To view a list of all them, simply run…
yeoman init --help
Generators are a huge part of Yeoman, and are meant to be modified and added to.
Tip: For help on creating your own generator, refer to the generators area of the documentation.If you want to create your own Backbone.js application, you could simply run:
mkdir backboneapp && cd backboneapp yeoman init backbone
This will build a project with several boilerplate models, views, collections, preloaded with Lodash, Mocha, jQuery and HTML5 boilerplate.
You can do the same with angular and ember as mentioned previously.
There are various sub generators as well, which allow you to do things, like:
yeoman init backbone:view awesomeView yeoman init backbone:model awesomeModel yeoman init backbone:collection awesomeCollection yeoman init backbone:router awesomeRouter
Then BAM, you’ll have some new codez to work with, rather than wasting a bunch of time rewriting boilerplate code!
yeoman build
Under the covers, you’ll find Grunt, which a popular framework, created by Ben Alman (Cowboy), for building JavaScript applications. It relies on a grunt file of configuration options that configure tasks to perform various operations, such as linting, combining, minifying, etc.
Yeoman is built on top of Grunt, but extends it to provide some new modifications and features. These include:
- JSHint
- Compiling CoffeeScript and SASS
- Building RequireJS applications, using
r.js - Concatenating, minifying, and compressing PNGs and JPEGS
- Running tests with PhantomJS
- Building an application cache manifest
- And a few others.
The configuration will be placed within a gruntfile.js file in the generated app. When you’re finished developing, run the following to build the app.
yeoman build
Your newly built app will be placed within a dist/ folder. One cool feature is how Yeoman will take script references, such as:
<!-- build:js scripts/scripts.js --> <script src="scripts/vendor/jquery.min.js"></script> <script src="scripts/vendor/lodash.min.js"></script> <script src="scripts/vendor/backbone-min.js"></script> <script src="scripts/main.js"></script> <script src="scripts/views/application-view.js"></script> <script src="scripts/models/application-model.js"></script> <script src="scripts/collections/application-collection.js"></script> <script src="scripts/routes/app-router.js"></script> <script src="scripts/models/photo-model.js"></script> <script src="scripts/collections/photos-collection.js"></script> <script src="scripts/views/flickr-view.js"></script> <script src="scripts/views/photoItem-view.js"></script> <!-- endbuild -->
And, after running the build, concat and minify those files down to a single script reference. That’s twelve HTTP requests down to one!
<script src="scripts/47ce0679.scripts.js"></script>
Each of the steps for the build process can be found in gruntfile.js, which is generated when the app is created. There are several build target options as well.
yeoman server
Yeoman also offers a built-in hosting server to test your app locally. LiveReload or simple file watching if you don’t have LiveReload also ensures that, when running the server, any changes to files in the app will automatically reload the browser with the new changes. By default, the port that it will run on is 3051. By running the following…
# Run this for the non-built version yeoman server # Or this for the built version yeoman server:dist
A new browswer window will pop up with your app running. The server will also compile Coffee and Sass assets, and place them within a temp directory. So you don’t have to worry about compiling! There are several other server targets; be sure to check them out.
yeoman test
Mocha is a popular unit testing framework and is built into Yeoman. When a project is scaffolded, a test folder with an index.html file is created with Mocha and Chai for assertions. Simply run:
yeoman test
Yeoman will then run Mocha against PhantomJS, which is a headless webkit browser that runs inside of Node.js. Then, you can feel free to add new tests into the index.html file. Unit testing can greatly enhance any application, and Yeoman makes the process as easy as possible. So there’s no excuses anymore! You can also use Jasmine, if you prefer, by passing --test-framework jasmine to the yeoman init command.
yeoman install
To install new client libraries into your application, Yeoman uses a library, called Bower which is developed by some of the folks at Twitter.
Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.
Yeoman allows for the following commands:
# Install any package(s) space delimited yeoman install jquery # Uninstall things yeoman uninstall jquery # Update things yeoman update jquery # Installs underscore also since backbone depends on it yeoman install backbone # List out all of the installed things yeoman list # Go find stuff specifically based on a name yeoman lookup mocha # Go find stuff based on a keyword yeoman lookup underscore
Bower is an excellent addition to Yeoman, and solves the workflow issue of having to constantly retrieve libraries, when building apps. It also ensures that they are up to date. Here’s an example of how you could use Bower.
bower install jquery bower install git://github.com/maccman/package-jquery.git bower install http://code.jquery.com/jquery-1.7.2.js bower install ./repos/jquery
The apps installed with bower will be stored in a component.json file at the root of the application.
Put it All Together
Let’s create a simple Backbone application from start to finish.
# Create a new app yeoman init backbone # Create a new model and collection yeoman init backbone:model photo yeoman init backbone:collection photos # Create a some new views for flickr public photos yeoman init backbone:view flickr yeoman init backbone:view photoItem # WAVES HAND AND ADDS LOTS OF CODE # https://github.com/jcreamer898/yeomanbbapp yeoman server # Build ALL THE THINGS! yeoman build # Check out the new build man... yeoman server:dist
Wow, it’s almost too simple – and don’t forget that you can create Bash aliases to further shorten this code. The hardest part was creating the sample app! But, that’s the beauty of it. Yeoman takes you away from
the boilerplate code, and allows you to focus exclusively on the hard stuff!
If you’d like, take a look at the app to see how things went. I’d say pretty well.
Conclusion
Yeoman can rapidly speed up the development process for a new application. Rather than wasting time gathering libraries and writing boilerplate code, instead, type a few commands, and you’re up and running! Even better, it’s open source and written by a couple of guys you may know!
Enjoy!
Entradas
No hay comentarios:
Publicar un comentario