1. Code
  2. PHP

How to Program With Yii2: Working With Asset Bundles

Read Time:4 minsLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: Sluggable Behavior
How to Program With Yii2: Blameable Behaviors
Final product imageFinal product imageFinal product image
What You'll Be Creating

If you're asking, "What's Yii?" check out my earlier tutorial: Introduction to the Yii Framework, which reviews the benefits of Yii and includes an overview of what's new in Yii 2.0, released in October 2014.

In this Programming With Yii2 series, I'm guiding readers in use of the newly upgraded Yii2 Framework for PHP. In this tutorial, I'll show you how to add custom JavaScript and CSS scripts and libraries to your Yii application. Yii uses a concept it calls Asset Bundles to make it easier to manage these resources.  

For these examples, we'll continue to build on the simple status application from previous tutorials.

Just a reminder, I do participate in the comment threads below. I'm especially interested if you have different approaches, additional ideas, or want to suggest topics for future tutorials.

What Is an Asset Bundle?

Yii's Asset Bundles represent groups of JavaScript and CSS files that need to be included together on specific pages or across the site. Asset Bundles make it easy to group together specific groups of scripts and styles for specific areas of your site. For example, on my Meeting Planner application, I can easily include Google Places APIs only on the pages where they are needed.

Here's a quick example of that. We create a \frontend\assets\LocateAsset.php file:

Then we load it in our view file—it's quite simple, really:

When you view the source of our page, you'll see the scripts generated along with other Yii2 standard assets for forms, Bootstrap, etc.:

In this tutorial, I'm going to guide you through using Asset Bundles to integrate character counting into our Status form. We'll use this to enforce a character limit similar to Twitter's 140 character maximum. 

If you're interested in seeing this in action in Yii1.x, I implemented this feature in Building With the Twitter API: OAuth, Reading and Posting (Tuts+).

Building an Asset Bundle

Create the Asset Bundle

In the \assets directory, we create StatusAsset.php:

I used a combination of the jQuery simplyCountable plugintwitter-text.js (a JavaScript-based Twitter text-processing script) and a script that did the heavy lifting of URL adjustments: twitter_count.js; in Twitter, URLs count as 20 characters. These files are all in \web\js.

I also created a document ready function to call them in \web\js\status-counter.js. Including yii\web\YiiAsset in our $depends array will ensure that JQuery is loaded whenever we instantiate this asset.

Loading the Asset Bundle

Instantiating the Asset Bundle is easy, as shown in \views\status\_form.php below:

That's all it takes to activate our Twitter-style character counter:

Yii2 Character Counter in Action with StatusAsset AssetBundleYii2 Character Counter in Action with StatusAsset AssetBundleYii2 Character Counter in Action with StatusAsset AssetBundle

I've found Yii Asset Bundles to be straightforward and easy to manage. They help me re-use portions of JavaScript and CSS in just certain areas of my application in an organized fashion. 

What's Next?

The Definitive Guide to Yii2 describes a number of advanced features of Asset Bundles. You can control the positioning of the script loading for each bundle, e.g. POS_HEAD, POS_END. You can set Asset Maps to load specific compatible versions of libraries. You can set JavaScript and CSS options for further conditional loading of your bundles. You can also use Asset Converters to compile LESS code into CSS or TypeScript into JavaScript.

Watch for upcoming tutorials in my Programming With Yii2 series as we continue diving into different aspects of the framework. You may also want to check out my Building Your Startup With PHP series, which is using Yii2's advanced template as I build a real world application.

I welcome feature and topic requests. You can post them in the comments below or email me at my Lookahead Consulting website.

If you'd like to know when the next Yii2 tutorial arrives, follow me @reifman on Twitter or check my instructor page. My instructor page will include all the articles from this series as soon as they are published. 

Related Links

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.