Jan 25

Dojo Tutorial: Feature Detection and Device Optimized Builds

By Dylan Schiemann on January 25, 2013 3:50 pm

As part of our great updates to the Dojo Tutorials for Dojo 1.8, we’ve been busy creating several new tutorials.

Feature Detection and Device Optimized Builds

preview Dojo 1.7+ now uses the popular has() pattern for feature detection in combination with a has()-aware build system. While it is easy enough to write feature detection tests with ad-hoc JavaScript expressions, the has() pattern defines a specific syntax such that the build system can detect these feature-based branches, and one can create application builds that are highly optimized for specific devices, with known feature shims factored out.

Check out the Feature Detection and Device Optimized Builds tutorial for Dojo 1.8 and 1.7!

Want to see a specific Tutorial? Want to Learn More?

Is there something you’d like to learn how to do with Dojo? Always wanted to know how something in Dojo works? Leave us a message in the blog comments and we’ll see about getting a tutorial created for you. Or sign-up for an upcoming SitePen Dojo Workshop to get a fully immersive hands-on experience with Dojo.

1 Comment

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:

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
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
Destroy – the time taken to remove the grid’s DOM from the document, and perform any internal cleanup

Continue reading No 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 reading No Comments

Jul 24

How To Migrate a Module to AMD

By Kris Zyp on July 24, 2012 11:20 am

Dojo 1.7 added full support for asynchronous module loading, defined with the widely adopted asynchronous module definition (AMD) format. The new module loader and module format offer faster module loading, better performance, and wide interoperability. However, for many, upgrading from the legacy Dojo module format to AMD is daunting, since the new module formats look much different than the old. Despite the large visual difference though, upgrading is a fairly straightforward process. There may be more effort involved in leveraging the new features and APIs in 1.7 and 1.8, but that is a different topic.

Continue reading 5 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 10

AMD for the Business-Side

By Dylan Schiemann on July 10, 2012 8:36 am

You may have seen our recent blog entitled “AMD: The Definitive Source” which exhaustively explained Asynchronous Module Definition. AMD is a topic with significant technical nuances but the purpose of THIS article is to explain the value of AMD for your business.

AMD is an emerging defacto standard for efficiently developing modular JavaScript applications and libraries. There’s a tremendous amount of business benefit to be achieved from making the switch to AMD for any JavaScript application. If you’re using Dojo 1.7+, you’ve already made the switch and are reaping the rewards as we speak!

Utilizing AMD in your web application dramatically affects code maintainability, application performance and interoperability and these will assuredly result in the following benefits for your business:

Efficient engineering
Improved user experience
Empowered technical leadership

Let us tell you how!

Continue reading 1 Comment

Jun 25

AMD: The Definitive Source

By Kris Zyp on June 25, 2012 2:29 pm

So what is AMD?

As web applications continue to grow more advanced and more heavily rely on JavaScript, there has been a growing movement towards using modules to organize code and dependencies. Modules give us a way to make clearly distinguished components and interfaces that can easily be loaded and connected to dependencies. The AMD module system gives us the perfect path for using JavaScript modules to build web applications, with a simple format, asynchronous loading, and broad adoption.

The Asynchronous Module Definition (AMD) format is an API for defining reusable modules that can be used across different frameworks. AMD was developed to provide a way to define modules such that they could be loaded asynchronously using the native browser script element-based mechanism. The AMD API grew out of discussions in 2009 in the Dojo community which then moved to discussions with CommonJS on how to better adapt the CommonJS module format (used by NodeJS) for the browser. It has since grown into its own standard with its own community. AMD has taken off in popularity, with numerous module loaders and widespread usage. At SitePen we have worked extensively with AMD in Dojo, adding support and now actively building applications with this format.

Continue reading 12 Comments

Jun 11

dgrid and Dojo Nano Build

By Dylan Schiemann on June 11, 2012 8:17 am

You’ve likely read that the new dgrid can be as small as 32KB gzipped when including just its minimal dependencies. However, if you use the standard settings for the Dojo Web Builder or a standard Dojo build profile, you end up with a build that’s closer to 100KB gzipped. So, how do you actually get dgrid and Dojo to be a small as possible? Use a custom build.

Where to start with Dojo Builds

The Dojo build tutorial is an excellent starting point for learning about builds, but it’s definitely not the simplest and most straightforward thing to learn when first using Dojo. And while the Dojo Build reference guide is thorough, it can be a difficult starting point when you just want an example build. The Dojo Boilerplate is also a nice starting point for building an app, but it’s much more than you need when just trying to get a dgrid example up and running.

Continue reading 4 Comments

Apr 23

Decruft. Delight. dgrid Beta Is Here!

By Dylan Schiemann on April 23, 2012 8:50 am

dgrid beta is here
Does the code for your grid customizations involve more lines than an Apple product launch?

You are not alone, brave developer. We feel your pain – the type that results from banging your head on a keyboard until the room spins – and that is why we have an amazing gift for you! Read on…

Dojo users and SitePen customers alike have needed a grid since the Dojo Toolkit project began. At first, we and several other companies banded together to purchase a non-open source grid. Enter Dojo DataGrid. We contributed our shiny new code to the Dojo Toolkit for the benefit of everyone and we’ve spent years maintaining and incrementally improving it in Dojo. But the web evolved, faster and faster, demanding more functionality, more performance, and more data! Others tried to keep up as well, enter EnhancedGrid and LazyTreeGrid. Kudos to everyone for building and contributing to Dojo!

Finally, last year, we took a long, hard look at how our customers were using DataGrid and EnhancedGrid. We agonized over the time and effort spent developing and maintaining such crucial functionality. We knew something needed to change. Enough was enough! Our choice was to attempt a DataGrid refactor or start over. The SitePen Team spoke: We started over.

Continue reading 12 Comments

Mar 29

Understanding dojo.require

By Cody Lindley on March 29, 2010 12:01 am

Dojo provides a feature-rich system for including JavaScript modules. Before we begin this journey to explore this concept in depth, you should know that absolutely no knowledge of the Dojo module, packaging, and build system are required to use Dojo.

You can easily get started using Dojo by using a script element referring to a copy of Dojo on the AOL or Google CDNs. If you want to host your own version of Dojo, you can easily download dojo.js, include it in a web page using a script element, and be off and running with Dojo Base.

For those new to Dojo, the following resources give a quick overview of Dojo Base:

In general, dojo.js is a lot like jquery.js or prototype js: you get a competitive set of features founds in most JavaScript libraries that are essential for building great web applications. Those features include:

JavaScript Language Helpers
Object utilities
Array utilities
DOM Manipulation
A normalized event system
Ajax & Cross domain requests
JSON utilities
Simple effects
Browser sniffing