var Shape = Resolver()("shapes.Shape");
var Rectangle = Shape.variant("rectangle");
var fivefive = Rectangle(5,5,{fill:"color1"});
var Circle = Shape.variant("circle");
var eight = Circle(8, {stroke:"recessed"});
Fetch the previously defined Rectangle and Circle generator variant of the concrete generator for Shape, and make a new object. You can use an Alternate or Private Namespace by passing a namespace in the Resolver() call.
Better and leaner web site coding with Namespaces, Generators and HTML Snippets. Download v0.9 - minified 4k

Declaring a Generator

  function Shape(options) {}
  Shape.arguments = [
  Resolver().set("shapes.Shape", Generator(Shape));

shapes module

  • Essential JavaScript Coming Soon
    by Henrik Vendelbo

    Later in the year I will add a great little library for making great web applications.

    It is based on ideas gathered during more than 5 years full time WebApp development.

    Stay tuned

Better Object Orientation

JavaScript has great fundamental support for encapsulation and inheriance. To provide better decoupling several principles can be applied such as: Aspects, Dependency Injection, Introspection. EssentialJS gives you core functionality that will allow a great deal of decoupling with minimal overhead.



The simplest way of sharing information in a JavaScript application is to create a global object. This creates the problem of picking a name for your global variable that others won't reuse by mistake. For more have a look at [[Namespaces and Globals]].

A common pattern is to reuse a previous object or create a new one if it wasn't used before. [[Constructing Objects with Generators]] subtly moved the decision of whether to create a new instance from the caller to a middleman. You go from `new Rectange(5,5)` to `Generator(Rectangle)(5,5)`. [[Restricting Object Generation]] allows you to use previously constructed instances rather than creating a `new`.

When you make an application using typical Java paradigms you will quickly be adding singleton classes. And you will just as quickly see why many people say that "singletons are evil". The problem with singletons is not the concept of sharing a single instance among dependents, rather it is the way the single instance is enforced and the resolution of it. In languages like Java solutions exist under the term [Dependency Injection]( Since [[JavaScript is a very different language]], it can be done in a fairly simple way using [[Restricting Object Generation]] and [[Generator Argument Injection]].

You commonly want to make a particular variant of something. So you know that you want a shape, and the design might say that it is supposed to be a rectangle, but that might be configurable or persisted in a design document. So you want a concrete instance of a shape constructor. The simple solution is [[Generating a Variant]]. Occasionally you don't want to a particular variant, but rather use the default one, and allow configurations to determine which constructor to use. [Generating a Default Variant](Generating a Variant).

Namespaces and Globals

When your page needs more than a couple of common variables and functions, you need a way to divide them into packages. In JavaScript that is easy. Just create a few objects and divide your code between them.

    var shapes = {};
    shapes.Shape = function() {};

    var tools = {};
    tools.Tool = function() {};

This works well for websites with a moderate amount of code. Eventually you will want a simple way to specify a hierachialy named package supported natively by most modern languages. This classic functionality packaging can be done easily with a window resolver.

    var shapes = Resolver(window)("my.shapes");
    var tools = Resolver(window)("");

If you call `Resolver()` without a parameter, the default behaviour is the look up the package within the default namespace object. This is called the **default namespace**. Undefined parts are stubbed out with plain objects. This is usually what you want to do for the package, but not for the functionality within the package. You can assign an entry in a package using a single statement.


If you want to declare a value without overwriting a previous one set elsewhere or configured, call `declare`.

More about Namespaces and Globals

Generating Pre-Initialised Object

By default a generated object starts out blank before the constructors are called. You can fill in member variables with argument values. This will seed the members before the base constructors are called.

function Rectangle(width,height) {}
Rectangle.arguments = [
    NumberType({ name:"width", preset:true }),
    NumberType({ name:"height", preset:"height" })

If an argument is configured with a preset attribute the argument will be used to assign the member variable before the constructors are called. A name can be specified or true for the argument name.

More about Generating Pre-Initialised Object

Configuring Variants

Variants can be configured separately. This allows you to change the behaviour of your web app without changing the program code. You can try out a better version of Rectangle without changing the existing implementation.

Live HTML Snippets

When you make a highly interactive web page you can benefit from a concept used on the server side templates. Taking advantage of the browsers built-in DOM manipulation function Snippets allow you to repeat, preload tables, and mold page parts and forms.

More about this later

Combined Sectioning

HTML5 defines new tags for sectioning the outline of a page. In a highly interactive web page you want to swap parts of the page in and out on the fly rather than reloading the whole page. To do this conveniently you need support on the server side to look up individual sections or whole pages as needed.

More about this later
Twitter icon