Object JavaScript – Building Stateful jQuery UI Plugin Using Widget Factory

imageIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery UI widget.

You will extend the jQuery library with custom UI code and then use it on a page. The initial plug-in will be trivial to demonstrate the jQuery Widget Factory pattern. You will provide properties that you can change to change the look of your widget and you will provide some methods that will respond to user input.

In this post example, you will learn how to create a simple click counter. Click a button, increase the count. The idea is to show you the steps to create a jQuery UI Widget.

The Widget Factory system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points.

Continue reading “Object JavaScript – Building Stateful jQuery UI Plugin Using Widget Factory”

Dev Patterns – Dependency Injection (aka Inversion of Control)

diamond-cubes-2-pattern-clip-art“Dependency Injection” (DI), also more cryptically known as “Inversion of Control” (IoC), can be used as a technique for encouraging this loose coupling.

John Munsch explains it like this:

When you go and get things out of the refrigerator for yourself, you can cause problems. You might leave the door open, you might get something Mommy or Daddy doesn’t want you to have. You might even be looking for something we don’t even have or which has expired.

What you should be doing is stating a need, “I need something to drink with lunch,” and then we will make sure you have something when you sit down to eat.

In designing an object-oriented application, a major tenet of design is “loose coupling”. Objects should only have as many dependencies as is needed to do their job – and the dependencies should be few.

There are three primary approaches to implementing DI:

  • Constructor injection
  • Setter injection (also called Property injection)
  • Method injection

Constructor injection uses parameters to inject dependencies. In setter injection, you use setter methods to inject the object’s dependencies. Finally, in interface-based injection, you design an interface to inject dependencies.

Continue reading “Dev Patterns – Dependency Injection (aka Inversion of Control)”

Azure – 24 Must Know Cloud Patterns With Sample Code

azurecloudYour application may start with a single idea as a single website. It will often have a website, some business logic tied to a database. Those stand alone applications have a way of adding features.

Or your application may want to be “cloud ready” from the beginning. The vision may begin with a set of servers, each doing a specific task, each that can be scalable to meet demand, provide reliability. As soon as you take that second step, it’s time to look to well known practices.

Microsoft’s Patterns and Practices team has put together architectural guidance to help you design your cloud applications,  Cloud Design Patterns: Prescriptive Architecture Guidance for Cloud Applications. Each pattern is provided in a common format that describes the context and problem, the solution, issues and considerations for applying the pattern, and an example based on Azure.

It also discusses the benefits and considerations for each pattern. Most of the patterns have code samples or snippets that show how to implement the patterns using the features of Microsoft Azure.

Although the guidance helps you adopt Azure, the patterns are relevant to all kinds of distributed systems, whether or not they are  hosted on Azure or on other cloud platforms.

Continue reading “Azure – 24 Must Know Cloud Patterns With Sample Code”

Object JavaScript – ECMAScript 6 Code Preview

imageECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript.

This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:

  • Scope
  • Arrow Functions and Lexical this
  • Default Function Parameters
  • Classes
  • Inheritance
  • Modules
  • for-of
  • Arrow functions
  • Promises

I won’t come close to covering all the features. But you can get an idea of how ECMAScript 6 works to support the idea of Object JavaScript. Look to the references and to the specification for information about: Parameter handling, multiple return values, collections, destructuring, rest parameters & spread operator, iterators, array comprehension, and more.

Special thanks to Axel Rauschmayer for many of the snippets.

Continue reading “Object JavaScript – ECMAScript 6 Code Preview”

Tip – Serving .json File on Windows (IIS, IIS Express)

imageSo what is wrong with the simple getJSON call? Why doesn’t it work?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $.getJSON('data.json',function(result){
      alert("success");
    });
  });

It works fine in Firefox 11 but not in IE and Chrome. By default, IIS6 does not serve .json (no wildcard MIME type). So you will see a 404 not found thrown.

By default, IIS in Windows Server 2003 and beyond does not serve files that aren’t of a MIME type that it knows about (instead returning 404 errors).

So, to serve up JSON files you need to add a MIME type to IIS to allow it to serve that type of file. You can set it at the site level or at the server level.

Continue reading “Tip – Serving .json File on Windows (IIS, IIS Express)”