building with bower


Eric Adams
Architect - Synacor, Inc

every solution has a problem


  • You start with a project
  • You want to use some libraries (Bootstrap, Backbone)
  • These libraries have dependencies (jQuery, Underscore)
  • These dependencies might have dependencies (Sizzle, etc.)
  • ... and so on

So you try to manage it yourself


  • Dependencies get committed
  • You move along with your project
  • Things are going swell


...and then one day...

You find out about some amazing update


  • Backbone gets updated to version 1.x (finally!)
  • You update to the latest version with all of its new features
  • You run the unit tests (because you did write tests, right?!?)
  • Better yet, you load your application (of course in all browsers!)         
...and everything is broken.

The problem with dependencies


  • When we updated Backbone, we updated to version 1.1.x
  • Backbone 1.1.x relies on Underscore >= 1.5.0
  • Our previous version of Backbone relied on Underscore 1.3.2.


WHAT DID WE LEARN?

  • APIs can shift within dependencies that are abstracted away and can (read: WILL) break
  • Dependency management is a volatile process!

Enter Bower!


  • Bower (http://bower.io/) is "A package manager for the web"
  • It is an attempt to solve dependency management in large-scale JavaScript applications
{  "name": "Earth-shattering HTML5 Web Application",  "version": "0.0.1",  "ignore": ["**/.*", "bower.json", "test"],  "devDependencies": {    "qunit": "~1.14.0"  },  "dependencies": {    "backbone": "~1.1.0",    "bootstrap": "~3.0.0"  }}
Libraries can expose package metadata, and development/production dependencies they require to successfully execute.

What can be in package Metadata?


  • Package name and description - let your users know what you've made!
  • Package version - follows Semantic Versioning specifications
  • Package license info - important in redistribution
  • The main endpoints of your package
  • The dependencies of your package
  • The development dependencies ("devDependencies") of your package
    • Think unit tests, build scripts, etc.
  • The files to ignore when installing your package
    • Dotfiles, test directories, etc.

Installing bower


Hey, it has its own dependencies.



$ sudo npm install -g bower

Defining a bower package


  • Defining a new or existing library is simple:
 $ bower init
  • Bower will try to get you to define some defaults, and generate a bower.json file

  • You can install dependencies and update your bower.json file
$ bower install jquery --save$ bower install qunit --save-dev

  • Want to support older versions of IE with jQuery?  You can do that too (and ask forgiveness later)
$ bower install jquery#1.11.0 --save

What makes a package version?


  • Packages can live in Git or SVN
                    
    • Bower can specify versions as either:
      • Tags
      • Branches
      • Commit IDs
      • "latest"
    • Bower packages can be in local or remote repositories
    • If you do not specify a URL, Bower will try Github first

    Dependencies do not have to be committed


    • You can install dependencies in a directory excluded from VCS
    • Semantic Versioning will keep your dependencies linked to a particular version
    • You can define versions of nested dependencies
      • This is good for isolating build or testing failures
    • You can make dependency installation part of your build process
    • Sample Makefile:
    # Install new dependencies and update existing ones
    vendor:
        bower install --no-color && bower update --no-color
    
    # Force bower to fetch packages for each build
    clean:
        bower cache clean
    

    bower in a multi-build environment


    • Bower is adaptable to most build environments (anywhere you can run a command, really)


    • You should be mindful however, of shared tmp and cache spaces
    • To deal with this, you can use .bowerrc to configure your package     
    {
      "directory": "vendor",
      "tmp": ".bower-tmp",
      "storage": {
        "packages": ".bower-cache",
        "registry": ".bower-registry"
      }
    }

    Bower is pretty great, but...


    • "[Bower] offers a generic, unopinionated solution to the problem of front-end package management"
    • Client-side dependencies still require organization
     
    • Client-side dependencies may still require configuration
    • Bower is really only as smart as your VCS!
      • Understand tags, branches, and what you are committing
      • Try committing compiled resources in tags only

    conclusion


    • Bower is a simplistic, yet very useful approach to client-side dependency management
    • Building projects with Bower is relatively easy
    • Organizing code in projects built using Bower is left largely to the developer


    ANY QUESTIONS?

    Made with Slides.com