Bower vs BowerPHP — SitePoint

On October 28th, 2014, puppies all over the world spontaneously burst into flames – or so the community would have you believe. What happened was the reveal of BowerPHP (I shy from calling anything “alpha” a release), and here’s why it wasn’t anything nearly as apocalyptic as some would have you believe.

What?

BowerPHP is a PHP version of Bower, the NodeJS based front end package manager. We covered Bower before somewhat, but in essence, you use it to install front end libraries like jQuery, Angular or Foundation much in the same way you use Composer for PHP dependencies. You define a Bower file with dependencies, run bower install, and watch the magic happen.

The packages will usually be installed in a bower_components folder which is created if it doesn’t exist, and you can either link to them directly, or pull them through some additional concatenation/minification filters before doing so to reduce the number of requests and download size.

So… why a PHP version of it, if a Node version exists? Good question – but before answering it, let’s install BowerPHP and use it to pull in some packages.

Installing

I’ll be using our official Homestead Improved box. If you don’t want to, you don’t have to, but it’s the simplest way to get started following along.

To make BowerPHP globally available to our system, we execute the following:

composer global require "beelab/bowerphp 0.1.*@alpha"

Wait, what? That’s it?

Yep.

We installed in seconds what would have taken us minutes with NPM, if it would have worked at all in a VM hosted on Windows.

Execute bowerphp to see if it works.

Using

To see an example use case, let’s try it out. We’ll create a “Hello World”index.html file in a project folder accessible from the browser, in our case, Code/Laravel/public via homestead.app:8000.

cd ~/Code
mkdir -p Laravel/public
cd Laravel/public
echo "Hello World" > index.html

Visiting homestead.app:8000/ in the browser should display “Hello World” now.

Let’s install Foundation.

bowerphp install foundation

Uhh… what? No problems? But.. I’m running a Vagrant box inside Windows! Where are the warnings, the bugs, the permission problems? Where are all the errors caused by NPM’s clumsy directory structure? BowerPHP installed Foundation for me in fifteen seconds flat.

Let’s see if everything works fine by including the assets in our HTML. Replace the contents of index.html with the following:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MY_APP</title>
    <meta name="description" content="MY_DESCRIPTION">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css">
    <link rel="stylesheet" href="bower_components/foundation/css/foundation.css" />

    <script src="bower_components/foundation/js/vendor/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
                <h1 class="title">MY_APP</h1>
            </section>

            <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
        </nav>

        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Sections</label></li>
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Author List</a></li>
            </ul>
        </aside>

        <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Users</label></li>
                <li><a href="#">Hari Seldon</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </aside>

        <section class="main-section" id="content">
            <div id="charts"></div>
            <div class="panel"><p>Hello</p></div>
        </section>

        <a class="exit-off-canvas"></a>

    </div>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>

<script>
    $(document).foundation();
</script>

</body>
</html>

Open the page in your browser to check if it works:

Why it’s Awesome

So to answer our question above – why a PHP version of a JS tool? Because it’s needed. Granted, it’s not needed by many, and I as someone who suffered through symlink and filepath-hell with NPM on Windows probably appreciate it more than most, but I’m still thrilled it exists, and want it to grow. If you’re looking for a more direct list of pros and cons in a Bower vs BowerPHP fight:

Pros of BowerPHP:

No need to use JS
Compatible with VMs hosted on Windows
Really fast
Easy to install
Highly portable alongside your PHP apps – write a Bowerfile, add BowerPHP to your composer.json file and put bowerphp install into Composer’s post-install-script block, and you’ll have your project’s front end installed alongside backend immediately after a single composer install – without ever touching Node, or even knowing it exists on the system

Cons of BowerPHP:

there might come a time when Bower will leave BowerPHP behind with some esoteric future functionality

I honestly can’t think of any other cons. Can you? Let me know.

Conclusion

BowerPHP is pretty cool. It’s an ambitious “reinvention of the wheel” but this time, the wheel’s shape and form stayed the same – just the material changed from balsa wood to oak, and oh boy does it turn better. The community pushback against this project reminded me of what Beau spoke at Forum PHP – persisting until you find support, and here’s hoping that this post of praise and high fives lets the team know they’re not alone in the need for Node-less Node tools, and that they should keep doing what they’re doing.

With BowerPHP, we get the ability to install our front end assets as simply as we do with back end packages – and combined with Assetic for filtering, minification and other magic, BowerPHP becomes your front end hypertool.

What do you think about BowerPHP? Useless project or much needed tool? Why? Tell us in the comments!