Enterprise jQuery Manifesto

Published on Fri, August 20, 2010 in Industry

EnterprisejQuery.com is run by appendTo.

appendTo launched in October of 2009 with Mike Hostetler and myself having the vision of providing enterprise grade services for jQuery. Both of us have a long history of experience in the large enterprise as well as startups. We’ve worked in the trenches and have seen first hand the challenges that organizations face.

appendTo has a diverse set of enterprise experience with the 7 additional employees we’ve hired: Levi DeHaan, Scott González, Elijah Manor, Doug Neiner, Andrew Powell, Leah Silber, and Andrew Wirick. Of which we’ve worked at, contracted for, and consulted with several large organizations such as: AOL, Apple, Blue Cross Blue Shield (NE), BMW, Bureau of Land Management (BLM), Chrysler, CSC (Computer Sciences Corporation), Ford, GM, Guardian Life, IBM, Microsoft, Motorola, National Instruments, National Renewable Energy Lab (NREL), Union Pacific Railroad, Xcel Energy, and Zurich International.

Every organization is different, but core themes naturally emerge. In July of this year, appendTo launched EnterprisejQuery.com to cater to this audience and it has sparked a debate about “what is the enterprise” and “does jQuery fit in the enterprise”.

Enterprise Strategies for Adopting HTML5 Part 1:
Simplified Syntax & Semantic Elements

Published on Wed, August 18, 2010 in HTML5, Multipart Series

This is the first post of a multi-part series covering strategies that you might use to adopt HTML5 in your current or future corporate websites.

Introduction

HTML5 has many features which you’ve likely heard about or seen in various blog posts. With all of the publicity HTML5 has begun to hold weight as a marketing term and businesses are paying attention. In the near future we’ll see businesses want to leverage HTML5 to send a message that they are innovative and competitive.

Unfortunately many of the HTML5 features are not fully implemented in the newest versions of modern browsers. Older browsers lack any HTML5 support. This leaves us with a key question: “To what extent can I use HTML5 inside my enterprise application?”

In this blog series we will deliver a strategy you can use to start adopting HTML5 today. We’ll break down the strategy into the following posts:

  • Part 1: Simplified Syntax & Semantic Elements
  • Part 2: Form Enhancements
  • Part 3: Local & Session Storage:

Client storage is no longer part of the HTML5 specification. Nevertheless we’ve decided to cover client storage as it is still popular as a topic in HTML5 discussions and is implemented in many of the modern browsers.

  • Part 4: Video & Audio Elements

Javascript Parameter Patterns with $.extend and Beyond

Published on Thu, August 12, 2010 in Patterns

Enterprise developers have a tendency to misunderstand JavaScript’s function parameters. When getting started, many expect JavaScript functions to work much like the server-side languages they’re already familiar with. There can then be a fair bit of confusion when they find out things work a little differently with JavaScript.

The languages generally used on the server-side of enterprise development have static typing. The number and type of each parameter must be declared. In contrast JavaScript is considered a language with dynamic typing. JavaScript parameters do not have to be tied to a specific type at compile time. Additionally server-side languages do not include any of the ‘free’ parameters we get in JavaScript (more discussion on these parameters below).

A great example of the gap between common server-side languages and JavaScript is the .each method. To use this method you supply a function which will be executed against each element within the jQuery wrapped collection.

My first encounter with .each was similar to this:

//...
// note: this example is archaic as of 1.4 release
// please use function callback with .text instead!
$('.someClass').each(function() {
  var $this = $(this);
  $this.text($this.text() + " some extra text");
});
//...
$('.someClass').each(function(idx,val) {
  if(!(idx % 3)) { //modulus : will be true
                        //on every third element
    $(val).somejQueryMethod();
  }
});
//...

JS Bin demo

Create Your First jQuery Plugin Part 2:
Plugin Enhancements with .queue and .trigger

Published on Thu, July 29, 2010 in Multipart Series, Plugins

Note: This is part two in a two part series on creating your first plugin. You can find part one here. In the series we’re creating a plugin to handle displaying, and also queuing a series of a messages.

Plugin Enhancements

The plugin we worked on in Part 1 focused on getting from a simple jQuery snippet to a reusable and scalable plugin. This post will give us an opportunity to look at two popular techniques that can be used in a variety of situations. We’ll introduce these techniques by adding two enhancements to our code. We will enable the queueing of messages for the message center, and will add features to automatically close the message after a certain time period.

Utilizing jQuery Queues

jQuery queues provide an explicit mechanism for running synchronous operations anywhere they might be necessary. Our current plugin is a great fit for queues. If a previous message is being displayed we would prefer that the new message be queued and displayed synchronously afterwards.

The queue portion of the API contains two methods that are used most of the time. .queue is utilized to add items to the queue. It can also be used to determine the number of items currently in a given queue. .dequeue is used to kick off our queue, or at any point move to the next callback in the queue.

Mock Your Ajax Requests with Mockjax for Rapid Development

Published on Thu, July 22, 2010 in AJAX, Patterns, Plugins

Most backend developers are familiar with the concepts of mocking objects or stubbing in methods for unit testing. For those not familiar with mocking, it’s the simulation of an interface or API for testing or integration development purposes. Mocking with front-end development though is still quite new.

Much of the development that appendTo does focuses on front-end development tied to RESTFUL web services. As such we’re able to spec out the service contract and data format at the beginning of a project and develop the front-end interface against mock data while the back end team builds the production services.

I originally developed this plugin for appendTo back in March of this year and our team has been using it in all of our projects since. appendTo is committed to sharing our tools and best practices with the community so it’s with much excitement that we’re releasing this plugin. (A sneak peek was available to the Silicon Valley JavaScript Users Group and those that attended our OSCON tutorial)

Plugin Overview

Abstract: The mockjax plugin is a development and testing tool for intercepting and simulating ajax requests made with jQuery with a minimal impact on changes to production code.

Configuring UI widgets and interactions with .live() and .delegate()

Published on Sat, July 17, 2010 in Events, jQuery UI

Configuring jQuery UI widgets often means making sure certain methods are called on a given DOM element (wrapped in jQuery) before usage occurs. We see this configuration pattern everywhere in jQuery UI. Great everyday examples include configuring the datepicker widgets, as well as draggable and droppable interactions. A relatively common example is something like the following:

$(function(){
  $('input.date:text').datepicker();
  //...
});

Create Your First jQuery Plugin Part 1:
Transition From Everyday jQuery Code to Base Plugin

Published on Sat, July 17, 2010 in Multipart Series, Plugins
Note: This is the first in a two part series on creating your first plugin. In the series, we’ll create a plugin that will be able to handle displaying and also queuing a series of a messages for the user.

Plugin prerequisites: overcoming myths and challenges

As a enterprise web developer I often found it challenging to shift my mindset from JavaScript coder towards plugin creator. Not that those opportunities weren’t there. Rather, I was stifled by a few factors that many enterprise developers face:

Code ownership and licensing concerns

Writing software that you are planning to release as open source can often conflict with corporate policies. Given that you are already using jQuery, the organization should already have some understanding of licensing policies. Or, at the very least, the organization has some trust in their developers understanding licensing policies.

Enterprise AJAX Patterns Part 1:
From Enterprise Beginnings

Published on Sat, July 17, 2010 in AJAX, Multipart Series, Patterns

jQuery Ajax features provide a slick way to make asynchronous javascript calls from any browser. jQuery even gives us helpers methods to make the calls even simpler. $.get, $.getJSON, $.getScript, $.load, and $.post all give great ways to set up default features and get your ajax calls done quickly. We often see enterprise developers taking advantage of these shortcut methods for basic Ajax needs.

However, enterprises today require scalable solutions that gracefully handle errors, messages to the user, spinners, and other aspects of a rich user experience. In these series of posts we are going to step beyond the basic Ajax functionality and build a scalable library solution. In order to create a functional library you’ll need to understand the .ajax method and the parameters allowed. If you don’t already have a handle on .ajax, please visit the extremely useful api site for a quick primer.

For the purpose of these posts we are going to start with a pattern that is often seen in enterprise situations for ajax calls. In the below example we will attempt to retrieve data from the server with a GET http action via the jQuery.ajax method.