Downloaded 18 times
![THE BOWER.JSON MANIFAST
{
"name": "bower-power",
"version": ”1.0.0”,
"description": "Bower Power! Supercharging Front-End Manageability",
"main": “",
"authors": ["Eric Carlisle eric@ericcarlisle.com”],
"license": "MIT",
"keywords": ["Bower”, “Bower Training”],
"homepage": "https://github.com/ecarlisle/bower-power",
"moduleType": [],
"private": true,
"ignore": ["**/.*”, "node_modules”, "bower_components”, "test”, "tests”],
}
Included in your applications as well as the dependencies you will install.](https://image.slidesharecdn.com/bowerpower-151030014316-lva1-app6892/85/Bower-power-14-320.jpg)
![(THERE’S ALSO .BOWERRC)
{
"directory": "app/components/",
"analytics": false,
"timeout": 300000,
"registry": {
"search": ["https://my-bower-server.local",
“https://bower.herokuapp.com”]
}
}
Fit Bower to some app & environment requirements.](https://image.slidesharecdn.com/bowerpower-151030014316-lva1-app6892/85/Bower-power-15-320.jpg)
Uploaded byEric Carlisle
Bower power
The document discusses 'bower power,' a tool designed for managing client-side dependencies in front-end development, authored by Eric Carlisle. It highlights the simplicity, efficiency, and integration capabilities of Bower, along with its installation process and configuration through bower.json. Additionally, it provides commands for installing and managing dependencies, along with tips for package management and integration with build tools like Gulp and Grunt.
More Related Content
![Let Grunt do the work, focus on the fun! [Open Web Camp 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/2013-gruntjs-openwebcamp-130715113721-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Mother teresa[1]](https://cdn.slidesharecdn.com/ss_thumbnails/motherteresa1-150129082444-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Bower power
- 1.
- 2. SHAMELESS SELF PROMOTION Who? What? When? Where? EricCarlisle (Consulting, LLC) UI Developer, UX Designer 20-ish Years Baltimore, MD
- 3. AGENDA Why do Ineed this? Why is it so awesome? How does it work? How can I be ultra-awesome with it?
- 4. Ever felt likethis? DEPENDENCY MANAGEMENT MESSES “WTF are we using already?” “What version? Versions?!” “Am I going to break it?” “How can I optimize it?”
- 5.
- 6.
- 7. DEPENDENCY MANAGEMENT MESSES Keep It Stunningly Simple • IncreasedEfficiency • Reduced Cost • Better Process • Better Products • Happy Team • $$$
- 8. BOWER KEEPS ITSIMPLE 1. Maintains a dependency manifest. 2. Fetches them when you need it. 3. Tracks dependencies. 4. Integrates with everything. (NOT A BUILD TOOL LIKE OR )
- 9. PREREQUISITES JavaScript runtime Node.js packagemanager version control system Suggestion: The Git Bash shell for Windows:
- 10. PACKAGE MANAGEMENT SOUP “WHICHSHOULD I USE?!” OR
- 11. PACKAGE MANAGEMENT SOUP “ISAY BOTH!!!” AND They are similar in many ways, but also have unique strengths.
- 12. WHY BOWER TOO? Bowerfocuses on client-side dependencies. 1. Abstracts, separates concerns. 2. Uses a flat dependency tree. 3. Lives and breathes Git. 4. Establishes accountability. (For you & components developers too)
- 13. STARTING THE AWESOME Crackopen a command shell: $ npm install –g bower Use NPM to install Bower globally. Initialize Bower configuration from your project root folder. $ myProject bower init Prepare for a bunch of questions. If you have NPM configured, many defaults are taken from package.json.
- 14. THE BOWER.JSON MANIFAST { "name":"bower-power", "version": ”1.0.0”, "description": "Bower Power! Supercharging Front-End Manageability", "main": “", "authors": ["Eric Carlisle eric@ericcarlisle.com”], "license": "MIT", "keywords": ["Bower”, “Bower Training”], "homepage": "https://github.com/ecarlisle/bower-power", "moduleType": [], "private": true, "ignore": ["**/.*”, "node_modules”, "bower_components”, "test”, "tests”], } Included in your applications as well as the dependencies you will install.
- 15. (THERE’S ALSO .BOWERRC) { "directory":"app/components/", "analytics": false, "timeout": 300000, "registry": { "search": ["https://my-bower-server.local", “https://bower.herokuapp.com”] } } Fit Bower to some app & environment requirements.
- 16.
- 17. INSTALLING DEPENDENCIES # installby name $ bower install jquery # By (Github) shortcut $ bower install twbs/bootstrap # By GitHub and Subversion endpoints (SSH, HTTPS, HTTP) $ bower install git@github.com:Modernizr/Modernizr.git # By URL $ bower install http://http://bower.io/img/bower-logo.png # By folder $ bower install ~/assets/stylesheets/theme3/variables.sass … and several, several ways to choose versions. There are many installation options…
- 18. THE BOWER_COMPONENTS FOLDER ContainsEVERYTHING – often more than expected. But that’s ok!
- 19. THE BOWER_COMPONENTS FOLDER •Usually gets the dependency’s entire GitHub repo. • Sometimes results in positive discovery (Hey, look!) • Empowered to use whatever you need. • Many ways to integrate needed files into your
- 20. TRACK WHAT WENEED! # install for production use. $ bower install jquery --save # Install for testing, debugging, development purposes only. $ bower install modernizr --save-dev "dependencies": { "jquery": "~2.1.4" }, "devDependencies": { "modernizr": ”~3.1.0"}, Production or Dev? Then in bower.json:
- 21. SEMANTIC VERSIONING (SEMVER) VersioningPattern: MAJOR.MINOR.PATCH STRICT 1.9.3 SIMPLE >=1.9.3 CLOSE TO ~1.9.3 COMPATIBLE WITH ^1.9.3 EXAMPLES
- 22.
- 23.
- 24. PROGRAMS AND APIS BowerProgrammatic API bower-installer
- 25.
- 26.
- 27. BUILD & REGISTERA BOWER PACKAGE • Have a working GitHub repository. • Please don’t squat dependency names. • Make certain your bower.json is solid! # Indicate package name and Github endpoint. $ bower register my-package https://github.com/you/my-package.git http://bower.io/search/Bower Registry:
- 28.
Editor's Notes
- #2 Bower is named after the bowerbird, a family of birds where males build a structure [the bower] and decorate it with sticks and brightly coloured objects in an attempt to attract a mate.
- #5 BECAUSE… You start asking yourself these questions. CODING ON QUICKSAND 1. Unmaintainable situation. 2. Common to a lot of projects, especially those that have history, multiple owners. You start asking yourself: 1. “This is impossible. I just need to rewrite this.” 2. There are clever ways to unravel and existing mess a. Scalable and Modular Architecture for CSS (Mina Markham – fantastic session name) b. What I’ll be presenting isn’t so much about unraveling an existing mess. c. Instead it’s about (being lucky and) getting a clean start and do our best to maintain it. d. Essentially preventing your X-Wing from getting stuck on a swamp.
- #6 You’ve probably heard this advice before to avoid all kinds or production trouble. Do you all know what the KISS approach is? Just call it out if so. Well, I heard the one that most people use. In a situation where I’m managing a dependency nightmare, it’s more like…
- #7 STUNNINGLY SIMPLE: Special to achieve excellence this way. 1. If you haven’t already read The Toyota Way, I recommend. 2. Mantra of Kaizen or “Continuous Improvement.” 3. A big part of that is in creating and maintaining cleaner, simpler methodologies that were initially seemingly impossible. When it happens: 1. It’s initially funny because you just don’t believe it or trust it – “Nothing is ever this easy. What’s the catch?” 2. Once you start believing, we start having some gleeful “My life just got a lot better” 3. Definite pride component – you turned what was once elusive, bewildering, and frustrating into something easy. BUT TO MAKE THIS HAPPEN, YOU HAVE TO MAINTAIN THIS OVER TIME.
- #8 And, of course, there’s the bottom line factor.
- #9 - Examples of dependencies
- #10 Funny note – you use NPM, the Node.JS package installer to install Bower. I can hear the voice of all my DevOps colleagues “Let me get this right? You’re using a package manager to install a package manager.”
- #11 Now remember, at this point you’re already using NPM so the amount of “OR” in this equation is relative.
- #12 I say “Use them both” – which is fairly controversial and a topic of many opinions. At first this seems contradictory because you might be saying to yourself: “Eric, you just told me to keep things simple and here you are using both.” But… Note: By making this decision, we haven’t affected a project’s client-side footprint yet.
- #13 “Why do I want to have two different manifests for dependencies?” Separating Cioncerns: 1. This is an opportunity for abstraction, ultimately organization. 2. Lot unlike deciding how you want to separate files in a folder tree. Flat Dependency Tree: 1. “One version to rule them all” - In the end, you’re have only one version of each dependency. 2. This is a huge concern for a front-end developer. 3. Note – recently NPM now has flat-tree capability – BUT I again defer to #1. Lives and Breathes Git: 1. There are many git-related versioning choices that work very well. 2. In addition to selecting a repo – branch, tag, commit. Accountability: 1. Since you have a flat dependency tree and one version of each dependency, your ultimately responsible for the version that works for you. 2. This also goes for people that develop the dependencies you’re using. They want to make sure that they’re also tracking their dependency resolutions.
- #14 Many Questions: Some defaults are taken from package package.json. Keep in mind – some questions apply to the authoring of a bower package, so all may not apply.
- #15 Fields: You don’t need them all filled out. Notice “private = true” For dependencies you install, these fields can be more important: Versioning Dependency tracking (Backbone has a dependency on Underscore)
- #18 INSTALL FILES – REAL EXAMPLE WE’RE STILL NOT SENDING BYTES TO YOUR SITE
- #19 Entire GitHub Repo: Sometimes the natural reaction to this is Only the ones you need: This can differ from resource to resource. jQuery – I just need jQuery.min.js and a sourcemap. Bootstrap – I make just want variables.less and grid.less to get scaffolding on my site. Integration: Build tools Build platforms like grunt and gulp. Another Node module like Bower Installer. .gitignore: No need to keep these files around all the time. Keep up with the versions you specify.
- #20 Entire GitHub Repo: Sometimes the natural reaction to this is: “Why do I need the ENTIRE repo” “Am I also putting entire Git repos in my project” Only the ones you need: This can differ from resource to resource. jQuery – I just need jQuery.min.js and a sourcemap. Bootstrap – I make just want variables.less and grid.less to get scaffolding on my site. Integration: Build tools Build platforms like grunt and gulp. Another Node module like Bower Installer. .gitignore: No need to keep these files around all the time. Keep up with the versions you specify.
- #21 RUN GULP BUILD1
- #22 Important for you
- #24 Most of what we’re using now comes out of the Node runtime. 1. Bower-installer – command-line tool. 2. Bower – API that you can use within your own Node applications. 3.
- #25 Clean and simple.
- #26 Clean and simple.
- #27 Clean and simple.