Bower power

1,466 views

Published on

This presentation will introduce Bower, a powerful package manager for libraries, frameworks, and all things front-end. We will cover basic Bower usage, integration into Grunt & Gulp build processes, tooling, and registering custom packages to be used by anyone.

Published in: Internet
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,466
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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…
  • 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.
  • And, of course, there’s the bottom line factor.
  • - Examples of dependencies
  • 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.”
  • Now remember, at this point you’re already using NPM so the amount of “OR” in this equation is relative.
  • 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.
  • “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.
  • 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.
  • 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)
  • INSTALL FILES – REAL EXAMPLE
    WE’RE STILL NOT SENDING BYTES TO YOUR SITE
  • 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.
  • 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.
  • RUN GULP BUILD1
  • Important for you
  • 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.
  • Clean and simple.
  • Clean and simple.
  • Clean and simple.
  • Bower power

    1. 1. BOWER POWER Supercharging Front-End Manageability Code: https://github.com/ecarlisle/bower-power
    2. 2. SHAMELESS SELF PROMOTION Who? What? When? Where? Eric Carlisle (Consulting, LLC) UI Developer, UX Designer 20-ish Years Baltimore, MD
    3. 3. AGENDA Why do I need this? Why is it so awesome? How does it work? How can I be ultra-awesome with it?
    4. 4. Ever felt like this? DEPENDENCY MANAGEMENT MESSES “WTF are we using already?” “What version? Versions?!” “Am I going to break it?” “How can I optimize it?”
    5. 5. DEPENDENCY MANAGEMENT MESSES KISSAPPROACH TAKE THE
    6. 6. DEPENDENCY MANAGEMENT MESSES Keep It Stunningly Simple
    7. 7. DEPENDENCY MANAGEMENT MESSES Keep It Stunningly Simple • Increased Efficiency • Reduced Cost • Better Process • Better Products • Happy Team • $$$
    8. 8. BOWER KEEPS IT SIMPLE 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. 9. PREREQUISITES JavaScript runtime Node.js package manager version control system Suggestion: The Git Bash shell for Windows:
    10. 10. PACKAGE MANAGEMENT SOUP “WHICH SHOULD I USE?!” OR
    11. 11. PACKAGE MANAGEMENT SOUP “I SAY BOTH!!!” AND They are similar in many ways, but also have unique strengths.
    12. 12. WHY BOWER TOO? Bower focuses 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. 13. STARTING THE AWESOME Crack open 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. 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. 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. 16. BOWER API COMMANDS cache help info lookup prune register unregister link login version Typical Usage:init install list search update uninstall Component Dev: Utility:
    17. 17. INSTALLING DEPENDENCIES # install by 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. 18. THE BOWER_COMPONENTS FOLDER Contains EVERYTHING – often more than expected. But that’s ok!
    19. 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. 20. TRACK WHAT WE NEED! # 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. 21. SEMANTIC VERSIONING (SEMVER) Versioning Pattern: MAJOR.MINOR.PATCH STRICT 1.9.3 SIMPLE >=1.9.3 CLOSE TO ~1.9.3 COMPATIBLE WITH ^1.9.3 EXAMPLES
    22. 22. INTEGRATE! INTEGRATE! INTEGRATE!
    23. 23. INTEGRATE! INTEGRATE! INTEGRATE! GRUNT
    24. 24. PROGRAMS AND APIS Bower Programmatic API bower-installer
    25. 25. GULP INTEGRATION gulp-bower gulp-main-bower-files
    26. 26. GRUNT INTEGRATION grunt-wiredep
    27. 27. BUILD & REGISTER A 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. 28. Q/A www.ericcarlisle.com eric@ericcarlisle.com @eric_carlisle

    ×