This presentation has been prepared by Oleksii Prohonnyi for internal JS team meeting to improve skills of developers.

1. BOWER
_by Oleksii Prohonnyi

2. Bower vs NPM

3. Bower vs NPM
 NPM and Bower are both dependency management tools. But the
main difference between both is NPM is used for installing Node.js
modules but Bower.js is used for managing front end components
like HTML,CSS,JS etc.
 Bower, unlike NPM, can have multiple files (e.g. .js, .css, .html,
.png, .ttf) which are considered the main file(s). Bower semantically
considers these main files, when packaged together, a component.

4. Getting started

5. Install Bower
 Bower is a command line utility. Install it with npm.
$ npm install -g bower
 Bower requires node, npm and git.
 Latest release: v1.7.6
 See more: http://bower.io/

6. Packages

7. Configuration
 Packages are defined by a manifest file bower.json. This is similar
to Node’s package.json or Ruby’s Gemfile.
 Interactively create a bower.json with bower init:
$ bower init
 Detailed specification of bower.json file can be found in bower/spec
repository.

8. Dependencies maintenance
 Bower installs packages to bower_components/ by default.
$ bower install <package>
 Using bower install <package> --save will add <package> to your
project’s bower.json dependencies array.
$ bower install <package> --save
 Similarly, using bower install <package> --save-dev will add
<package> to your project’s bower.json devDependencies array.
$ bower install <package> --save-dev

9. Dependencies maintenance
 A package can be a GitHub shorthand, a Git endpoint, a URL, and
more.
$ bower install
$ bower install jquery
$ bower install desandro/masonry
$ bower install
git://github.com/user/package.git
$ bower install http://example.com/script.js

10. Search packages
 If you want to check that the asset you want is a Bower package
you can do a search:
$ bower search <package-name>
 Search bower packages using web interface: http://bower.io/search/

11. Use packages
 It is recommended to use Bower together with Grunt, RequireJS,
Yeoman, and lots of other tools or build own workflow with the API.
 It is also possible to use the installed packages directly, like this:
<script src=“
bower_components/jquery/dist/jquery.min.js
"></script>

12. Register packages
 Registering your package allows others to install it with a short
name, like bower install <my-package-name>.
$ bower register <my-package-name> <git-endpoint>
 Now anyone can run bower install <my-package-name>, and get
your library installed. The Bower registry does not have
authentication or user management at this point in time. It’s on a
first come, first served basis.

13. Unregister packages
 You can unregister packages with bower unregister.
 You first need to authenticate with GitHub with bower login to
confirm you are a contributor to the package repo.
bower login
? Username:
? Password:
bower unregister <package>
 You’ll likely want to bower cache clean after your change.

14. Commands

15. Commands list
 cache
 help
 home
 info
 init
 install
 link
 list
 login
 lookup
 prune
 register
 search
 update
 uninstall
 unregister
 version

16. Programmatic API
 Bower provides a powerful, programmatic API. All commands can
be accessed through the bower.commands object.
 var bower = require('bower');
bower.commands
.install(['jquery'], { save: true }, { /*
custom config */ })
.on('end', function (installed) {
console.log(installed);
});

17. Configuration

18. .bowerrc file
 Bower can be configured using JSON in a .bowerrc file. For example:
{
"directory": "app/components/",
"analytics": false,
"timeout": 120000,
"registry": {
"search": [
"http://localhost:8000",
"https://bower.herokuapp.com"
]
}
}

19. More options
 Full .bowerrc file specification could be found:
http://bower.io/docs/config/#bowerrc-specification
 One can use environment variables in .bowerrc, using the following
syntax ${ENV_VAR}.
"storage": {"packages":“/path/to/${USER}/packages"}
 Bower provides 3 separate hooks that can be used to trigger other
automated tools during Bower usage: preinstall, postinstall,
preuninstall.

20. Resolvers and tools

21. Resolvers
 For example, resolvers can be used for:
 Handling Mercurial or Bazaar repositories
 Speeding up checkouts of services like GitLab or Bitbucket
 Allowing to use packages from npm or component.io
 Proxying downloads through 3rd party service like Artifactory
 Implementing custom private registry (hosted on GitHub?)
 Adding authentication support for private GitHub Enterprise
instances
 See more: http://bower.io/docs/pluggable-resolvers/

22. Resolvers usage
 Pluggable Resolver is just an npm package that you install as
devDependency in the package.json of your repository, or install
globally with npm install -g.
{
"resolvers": [
"bitbucket-resolver",
"github-enterprise-resolver"
]
}

23. Tools
 Bower is used together with other tools to integrate with all sorts of
setups and workflows.
 Grunt
 Gulp
 Rails & Ruby
 Java
 Apps & IDEs
 Others
 See more: http://bower.io/docs/tools/

24. THANK YOU FOR ATTENTION

25. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi