Blog

Jan 24

Performance Comparison: dgrid OnDemandGrid and Dojo Grid

By Betsy Gamrat on January 24, 2013 9:22 am

SitePen’s dgrid project leverages the AMD loader and other features new since Dojo 1.7 to minimize the load and rendering times of dynamic grids in web applications. In this post, we conduct tests in four common scenarios for both dgrid and DojoX DataGrid, contrasting startup, render, and destroy times in several popular browsers. We also discuss the amount of code involved in loading common components of dgrid and DojoX DataGrid.

The demos below test each grid in three phases:

  1. Startup – the time required to create the instance of the grid, define the columns and any other configuration, and display the grid with headers but no data
  2. Render – the time required to process and present the first page of data in the grid (25 items); since both grids use lazy loading, render time for the first page is representative for all pages
  3. Destroy – the time taken to remove the grid’s DOM from the document, and perform any internal cleanup
Continue readingNo Comments
Dec 6

Learning Dojo 1.8

By Mike Wilcox on December 6, 2012 8:22 am

Since we last posted an article on Learning Dojo, things have changed dramatically. Dojo has become an early adopter of AMD, with a new build tool to match; there is a new grid; the documentation has been vastly improved, and there are tutorials galore!

In fact, there is so much information out there on learning Dojo, it might be overwhelming. In a way, Dojo 1.7′s migration to AMD amplifies the problem, in that many previously-published articles no longer reflect the most recent best practices. This post aims to start you off on the right foot by pointing to relevant up-to-date resources for getting started with — or catching up on — Dojo 1.8.

Why Dojo

10 Reasons your Projects Should use the Dojo Toolkit
Slides: Dojo 2.0: Modular, Mobile, and Reinventing Web App Development
Interview with Dojo Toolkit Co-creator Dylan Schiemann

Getting Started

Tutorial: Dojo Start – Answers many common questions asked by newcomers
Tutorial: Hello Dojo – Guides through the first steps in exploring Dojo

Transitioning from Dojo 1.6

Tutorial: Modern Dojo – Explains key differences between Dojo before and after 1.7
Slides: Moving to Dojo 1.7 and the path to 2.0 – Presents features new to Dojo 1.7 and up

AMD Resources

Tutorial: Defining Modules – Explains how to define and load modules, and configure the loader
AMD: The Definitive Source – Explains the reasoning and benefits of AMD
Slides: Modular JavaScript: AMD & CommonJS modules – Discusses the evolution of AMD
AMD API – Wiki containing AMD API specifications

Learning Dojo

Tutorial: Making Functions with hitch and partial – Explains execution context and how to control it
Tutorial: Classy JavaScript with dojo/_base/declare – Explains Dojo’s chief inheritance mechanism
Tutorial: Ajax with dojo/request – Introduces Dojo 1.8′s new Ajax API
Tutorial: Getting Started with Deferreds – Introduces Deferreds, crucial for asynchronous logic
Tutorial: Dojo Deferreds and Promises – Discusses Promises and their relation to Deferreds
Tutorial: Dojo Object Stores – Explains the dojo/store API, new since Dojo 1.6
Reference Guide: Dojo – Index of reference material for the Dojo package

Learning Dijit

Tutorial: Understanding _WidgetBase – Details the module forming the basis of all widgets
Tutorial: Layout with Dijit – Discusses Dijit’s layout widgets
Tutorial: Creating Template-based Widgets – Describes Dijit’s templating capabilities
Recipe: Creating a Custom Widget – Walks through implementing a widget
Reference Guide: Dijit – Index of reference material for the Dojo package

Developing Applications

Tutorial: Using dojo/hash and dojo/router – Discusses Dojo’s utilities for managing the browser hash
Recipe: Application Controller – enumerates an approach to writing a small app
Dojo Boilerplate – Provides a starting point for creating a Web application with Dojo
Tutorial: Getting Started with dojox/mobile – The first in a series of tutorials to build a mobile app

Build Tool Resources

Tutorial: Creating Builds – Thoroughly explains the various facets of a custom build
Working with Dojo and AMD in Production – Enumerates approaches to loading production builds
Reference Guide: The Dojo Build System – Definitive documentation on the new build system
Dojo Web Builder – An online tool for creating Dojo builds

Dojo Packages

Dojo Foundation Packages – Explains the role packages play in Dojo’s future
dgrid – Web site for dgrid, a Dojo Foundation package

Community

As always, the Dojo community is the best around.  If you get stumped or have an advanced question, you can get more answers by leveraging the following resources:

If you find that a self-guided tour or community support is inadequate, SitePen also offers workshops taught by Dojo experts, as well as highly responsive support services.

No Comments
Sep 25

Dependencies of dgrid

By Kris Zyp 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

Continue readingNo Comments
Sep 24

Real-time Updates with dgrid

By Kris Zyp on September 24, 2012 10:46 am

The new dgrid is designed to work with object stores, which makes it easy to create grids that are driven by real-time updates. This is a great feature for rapidly changing data like stock prices or game scores.

To make a dgrid update in real-time, we just need to back it with a real-time object store. This can be accomplished by simply wrapping it with the Observable store wrapper. If we start with a JsonRest object store that retrieves data through REST calls, we can wrap that with Observable:

var stockStore = new Observable(new JsonRest({
    target:"./data/stocks.json" 
}));

Now our stockStore is real-time ready. Next we have to write some code to notify listeners of changes in data. Observable stores provide a notify() method that we can call to notify the store of changes in data. Typically, for a real-time application with rapidly changing data, we would create a Comet connection to a server, and as we receive data from the server, we could notify our store, which would automatically trigger updates in the grid. This might look something like:

// create a socket or long-polling connection to a server and then listen for messages
mySocket.on("message", function(message){
   // got a message   
   var data = message.data;
   // assuming the data is the object to update, we can update the store with:
   stockStore.notify(data, data.id);
});
Continue reading2 Comments
Aug 27

Working with Dojo and AMD in Production

By Dylan Schiemann on August 27, 2012 6:17 am

In our recent post on dgrid and Dojo Nano, we showed a technique of using nested require statements in order to make use of optimized layers using the Dojo build system. As a refresher, a layer is Dojo’s terminology for a file that combines many JavaScript resources into a single file. This improves the performance of your web application by minimizing the number of HTTP requests.

The technique we originally presented was a quick and simple approach:

<script type="text/javascript" src="../../dojo/dojo.js"
	data-dojo-config="async: true"></script>
<script type="text/javascript">
	require(['dgrid/dgrid'], function () {
	    require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", 
		"dgrid/Keyboard", "dojo/_base/declare", "dgrid/test/data/perf", 
		"dojo/domReady!"],
		function(List, Grid, Selection, Keyboard, declare, testPerfStore){
		//...

While this works, it’s not ideal because you will need to modify your source when switching between development and production environments which is suboptimal. While you could of course fix this with PHP or some other server-side approach for your initial require statement, there are many simple alternative techniques that you can make directly to your markup. Here we explore five other approaches.

Continue readingNo Comments
Aug 22

RIATeam Loves dgrid

By Dylan Schiemann on August 22, 2012 7:23 am

Juan Carlos Galindo Navarro of Venezuela-based RIATeam shares his early dgrid experience with SitePen. Here’s what he had to say.

SitePen: How did you learn about dgrid?
RIATeam: As a lover of the progress that Dojo Toolkit provides the community, I am always on the lookout for news and features shown in the SitePen Blog. With a good cup of coffee and prepared to read a good article about Dojo 1.8, I was pleasantly surprised with this new widget called “dgrid”. And I was very surprised because it is designed from a different perspective. Dazzled by this great news I turned quickly to their official dgrid site to know more of this powerful widget.

SitePen: Why did you choose dgrid?
RIATeam: Web application developers have an eternal battle against the excessive weight of our applications, and must always be in tune with the performance of them, especially when we want to decide what features to use. Using dgrid as a widget to display data is one of the best decisions I have taken. It is lightweight, powerful, fast and stable. And not only that, it is ready for mobile applications.

SitePen: What factors went into your decision?
RIATeam: First of all, is was very easy and quick to implement. The problem we had with other grids was how annoying it can be for simple features such as selecting a row and working with it. With dgrid, it is much easier and for these common tasks, it becomes natural. Additionally, its extensibility gives it more robustness. For a widget that is already strong on its own, this makes it far more powerful when compared to other grids. And finally, it loads rapidly due to its foundation on AMD.

SitePen: Is dgrid being used to replace another grid?
RIATeam: Yes, I tried several: jqGrid, dhtmlxGrid, etc., and we even tried DojoxDataGrid. My words above reflect my joy for dgrid, and none of the other grids we used come close.

Continue reading1 Comment
Aug 3

The SitePen Insider

By Dylan Schiemann on August 3, 2012 10:10 am

Want an easy way to keep up with SitePen efforts on Dojo, dgrid, AMD, JavaScript, and the open web?

Then click the Keep In Touch button at the end of this blog and sign up now! To see what types of things you can expect, check out the July edition of the SitePen Insider!

With the SitePen Insider, we provide a concise monthly recap of things that are new and noteworthy. It’s targeted at software engineers and technical managers. We summarize trends and updates with Dojo, dgrid, JavaScript, AMD, HTML5, and web apps, special offers for our services (this month’s newsletter includes a discount for our upcoming public workshops), and other great things that we think you’ll care about!

No Comments
Jul 26

EPiServer Leverages dgrid

By Dylan Schiemann on July 26, 2012 7:00 am

Linus Ekström of Stockholm-based EPiServer shares his early dgrid experience with SitePen. Here’s what he had to say.

SitePen: How did you learn about dgrid?

EPiServer: The Dojo website and SitePen blogs.

SitePen: Why did you choose dgrid?

EPiServer: The existing DojoX DataGrid was too complex to set up and extend. We wanted grid/list functionality that was tightly connected to the Dojo framework, and dgrid met these requirements.

SitePen: Is dgrid being used to replace another grid?

EPiServer: Yes, the DojoX DataGrid.

Continue readingNo Comments
Jul 19

Now Supporting all Major Toolkits!

By Dylan Schiemann on July 19, 2012 8:20 am

We have been providing JavaScript and Dojo support to freelancers, start-ups and Fortune 500 companies for nearly a decade. As we intently watch enterprise organizations everywhere begin to roll out AMD (read about why AMD matters) and the associated code improvements, we are thrilled with the industry’s direction toward toolkit interoperability! Why? Because! Our masterful engineering team, consisting of influential members of various open source communities, positions SitePen perfectly to offer full-on, front-end web development support to the world!

Getting right to the point, (The Official Point!), we are pleased to announce the expansion of SitePen Support to officially include more than fifteen popular open-source JavaScript toolkits!

Now supporting the following JavaScript toolkits:

  • Dojo
  • Persevere packages
  • dgrid
  • Curl.js
  • CometD
  • Twine
  • jQuery
  • Backbone
  • underscore
  • RequireJS
  • PhoneGap/Cordova
  • MooTools
  • jQueryUI
  • Wire
  • Socket.IO
  • Express

In addition to toolkits, we will continue to support your custom JavaScript source code, as well as key underlying technologies and formats, including JSON, HTML5, WebSockets, SVG/Canvas, Mobile Web, Server-Side JavaScript, AMD, Node.js and many more.

Our expertise with Dojo and advanced JavaScript is relevant for a wide-range of desktop and mobile web application projects and our approach to SitePen Support has always been flexible with the priority being to improve our customers’ web apps. We strive to support our customers in every way possible and we continue to be Dojo experts. In addition, we’re now committed to providing your organization with the front-end development expertise that will optimize your application regardless of which toolkits and technologies your company is comfortable using. You have our word!

Learn More About SitePen Support or Contact Us to get started today!

3 Comments
Jul 11

KLP uses dgrid

By Carrie Rice on July 11, 2012 8:48 am

As a SitePen customer, Øyvind Aaraas of KLP decided to try out dgrid on one of his company’s web applications.   When asked about his early experience with dgrid, here’s what he had to say!

SitePen: How did you learn about dgrid?

KLP: We follow the SitePen blog and learned of it there.

SitePen: Why did you choose dgrid?

KLP: Because dgrid was easy to work with, easy to style and extend and has very quick rendering in all browsers.

SitePen: Is dgrid being used to replace another grid?

KLP: Yes, it replaces the dojoX dataGrid.

SitePen: How does your application use dgrid?

KLP: Our application uses dgrid with both editable fields, expand features and pagination.  Currently we use it with the JSONRestStore for retrieving, displaying and updating member data.

Continue readingNo Comments

Featured articles

Search the blog

Dojo Toolkit workshops