An example of how Uniform JS classes and BEM views work well together to create modular front-end code

text_box.html

<div class="text-box">
  <h1 class="text-box__title">
    Hello world
  </h1>
  <p class="text-box__description">
    Description
  </p>
</div>

text_box.js

// Wrap code in self invoking function for privacy
// passing in window.iroko.$ as $, and window.iroko as iroko
(function ( $, iroko ) {
  // Invoke JS strict mode
  'use strict';

  // Create TextBox class using Uniform.create_class()
  // This will give all of the classes we create with Uniform the same
  // base structure and the same helper methods
  var TextBox = Uniform.create_class({

    // `init` is a Uniform method that is called when the class is instantiated
    // We can overwrite it to allow us add additional code
    'init': function () {
      // We need to make sure we call this class' prototype `init` method
      // before adding our own custom JS
      // If we didn't the `elements` and `events` methods we set up in a minute
      // wouldn't magically get called
      TextBox.__super__.init.call( this );
      // Now we can add some custom JS that we want to run on `init`
    },

    // `elements` is another Uniform helper method that allows us to use
    // a shorthand function, `add`, to create properties within our object
    // For example, below we create two properties title and description
    // They take the form of Zepto/jQuery objects and we can access them in
    // other methods within the object using this.title and this.description
    'elements': function ( add ) {
      add( 'title', '.text-box__title' );
      add( 'description', '.text-box__description' );
    },

    // `events` is another Uniform helper method
    // It allows us to quickly setup event handling on the elements
    // we have just set up in the `elements` method
    'events': function ( add ) {
      add( this.title, 'click', function ( el, e ) {
        e.preventDefault();
        this.handle_title_click_event( $( el ) );
      });
    },

    // This is a custom method that we call to handle a click
    // event on the title element
    'handle_title_click_event': function ( $el ) {
      // Handle title click event
    }
  });

  // Zepto/jQuery shorthand for $( document ).ready()
  $(function() {
    // Find .text-box block in HTML
    var $text_box = $( '.text-box' );

    // If .text-box exists in HTML
    if ( $text_box.length ) {
      // Instantiate TextBox class
      new TextBox({
        // Passing in $text_box as 'el'
        // This means within our object we have access to the el property
        // Within our objects methods we access it using this.el
        'el': $text_box
      });
    }
  });

}( window.iroko.$, window.iroko ));