Blog

Jan 6

Private Matters: Convention and Closures

By on January 6, 2014 11:10 am

Many object-oriented programming (OOP) languages provide a way to define private properties and methods. This allows objects to encapsulate functionality and state information. This encapsulation leads to a clear distinction between the internal implementation and a clean external interface.

However, JavaScript does not have a native mechanism for declaring private properties and methods, in the same sense that other object oriented languages do. But, there are a few techniques that we can use to achieve the same results.

Dec 4

Persevere on Heroku

By on December 4, 2013 9:52 am

It is becoming increasingly popular to deploy Node.js-based applications to Node-friendly hosting services to take advantage of the pre-built, reliable, robust architecture and infrastructure these services provide. Persevere, a JavaScript server framework for developing RESTful applications on Node.js, is an excellent fit for these types of hosting services. In this post I will show you how easily a Persevere application can be built and deployed on one such service, Heroku, but the process can be easily replicated on other providers that offer similar functionality.

Sep 17

Building UI Components with xstyle

By on September 17, 2013 8:36 am
This entry is part 4 of 4 in the series Getting to Know xstyle

xstyle_transparentIn this post, we will walk through creating widgets, or UI components in xstyle. CSS itself has a basic component-like unit, a CSS rule. However, xstyle enables a level of advanced UI for constructing rich components, beyond what can be specified with basic CSS. The simple extensions in xstyle allow us to generate DOM elements, respond to events, and encapsulate functionality for easy reuse and composition.

Sep 10

Building an application with xstyle

By on September 10, 2013 11:10 am
This entry is part 3 of 4 in the series Getting to Know xstyle

xstyle_transparentIn this post, we want to walk through how you would get started building an application using xstyle, an extensible CSS framework. xstyle provides extensions that allows us to declaratively describe an user interface, making use of data bindings, element generation, and components, giving us an elegant means to create an application. In this tutorial, we will be using xstyle with Dojo, and use xstyle completely for our UI. Before starting, remember that you can use xstyle to any degree desired. xstyle can simply be used to make CSS improvements, it can build more sophisticated UI components, and it can be used to describe the entirety of the user interface (combined with a JavaScript-driven data model). Here we will be looking at the application level usage of xstyle, and we will create an app with a simple list of contacts and a form to edit the contact.

Sep 4

Improving your CSS with xstyle

By on September 4, 2013 9:15 am
This entry is part 2 of 4 in the series Getting to Know xstyle

xstyle_transparentxstyle is a framework for extending CSS, which can be used to improve the quality, maintainability, and performance of your stylesheets. While xstyle can be used as a full framework for building applications with data bindings and UI generation, in this post we will focus on making progressive improvements to stylesheets within the traditional role played by CSS.

Aug 29

Goals and Philosophy of xstyle

By on August 29, 2013 9:57 am
This entry is part 1 of 4 in the series Getting to Know xstyle

xstyle_transparentxstyle is a framework for enhancing or building applications by extending CSS. xstyle is intended to be simple and unobtrusive enough to provide transparent shimming for standard CSS, yet powerful and expressive enough to provide an entirely new and elegant approach to building web applications. xstyle is both a set of small CSS tools, as well as a framework for building entire applications using declarative syntax and reactive constructs, allowing you to define UI components, sub-components, bindings, styling, and layout all within encapsulated UI definitions, while leveraging cascading layers to intelligently create separation of concerns.

Nov 5

Dojo WebSocket with AMD

By on November 5, 2012 12:23 pm

Dojo has an API for Comet-style real-time communication based on the WebSocket API. WebSocket provides a bi-directional connection to servers that is ideal for pushing messages from a server to a client in real-time. Dojo’s dojox/socket module provides access to this API with automated fallback to HTTP-based long-polling for browsers (or servers) that do not support the new WebSocket API. This allows you start using this API with Dojo now.

Oct 19

Lazy Property Access

By on October 19, 2012 3:53 pm

The easiest way to provide access to data from an object is to simply provide it as a property of the object. However, what if you want to give others direct property access, but computing the value of the property is non-negligible, and you want to avoid computing it if it is not used?

This scenario is where ECMAScript 5′s getters are valuable, as they allow you to define a property that is computed on access. We can go a step further and cache the result so it is only computed once at most (even for multiple accesses), while still avoiding computation if it isn’t necessary. This can be accomplished with this function:

var lazyProperty = function(target, propertyName, callback){
	var result, done;
	Object.defineProperty(target, propertyName, {
		get: function(){ // Define the getter
			if(!done){
				// We cache the result and only compute once.
				done = true;
				result = callback.call(target);
			}
			return result;
		},
		// Keep it enumerable and configurable, certainly not necessary.
		enumerable: true,
		configurable: true
	});
}
Sep 25

Dependencies of dgrid

By on September 25, 2012 9:01 am

The dgrid is a fast lightweight grid component, built on Dojo. It represents the start of the art in web development, utilizing numerous modern techniques for modularity and performance. While dgrid is a great component to simply use, there are a number of useful tips we can learn from how dgrid is built, specifically from its dependencies.

The dgrid component was built to minimize dependencies, and only relies on a bare minimum set of modules. These modules were carefully selected because of the critical value they provide dgrid.

Dojo

Since dgrid was primarily built by SitePen, it should come as no surprise that it is built on Dojo. However, dgrid does not require full base, but only utilizes a selective set of Dojo modules. These include:

  • dojo/_base/declare – This is used to create the dgrid classes.
  • dojo/on – This new event handling module in Dojo is used extensively in dgrid, and is lighter than the old dojo.connect.
  • dojo/aspect – This provides aspect oriented programming functionality that is used to augment methods.
  • dojo/has – This provides feature detection syntax that can be leveraged by the build process for further optimization and removal of unneeded blocks of code. This is also used to conditionally load touch scrolling.
  • dojo/_base/sniff – Several bugs in IE are corrected with dgrid, and would be very expensive to feature detect for. This is only used for past issues, and not future features, so it is future safe.
  • dojo/_base/kernel – Used for deprecated warnings.
  • dojo/_base/lang – Used for mixins and delegates.
  • dojo/_base/Deferred – Used with promises, primarily for interacting with object stores.

A few other Dojo modules are used by some of the plugins (and so they are only loaded if you load the plugin).
A number of the plugins use dojo/query for DOM querying. The ColumnResize plugin uses dojo/dom-geometry and the DnD plugin uses Dojo’s DnD modules. The DijitRegistry plugin uses the registry module from dijit