Working with Intern Recorder

By on August 7, 2015 7:00 am

intern

So you’ve had a chance to try out Intern Recorder, our new Chrome DevTools extension for recording functional tests, and now you want to efficiently work these tests into your workflow? This post will guide you through these steps and provide helpful advice for improving the tests you record.

The goal with Intern Recorder is to reduce the tedium of creating functional tests by 80-90%, but to make tests work flawlessly, you still have some steps to follow to perfect them. Intern Recorder is very useful for getting started when creating functional tests, but the test code should ultimately be fine-tuned by hand and maintained and updated manually. It may take multiple runs with the Recorder to get the sequence of actions just right, but once you have it, plan to discontinue using Recorder for ongoing updates to the test as you will now have code you can continue to improve.

Intern 3 is here!

By on July 30, 2015 11:00 am

Today, we’re very happy to announce the release of Intern 3! This newest version of Intern is a culmination of several months of effort to overhaul the primary portions of the test system in order to provide a more stable and robust platform for building future features and enhancements.

Simple Model-View synchronization with dstore and Dijit

By on July 28, 2015 7:14 am

dstore

Nearly every sufficiently large web application looks for a mechanism to efficiently synchronize or bind data between the Model and the View. There are many large scale application frameworks and approaches focused on this, whether the binding is one-directional like React, or follows other approaches such as those seen with AmpersandJS, Angular, Aurelia, Backbone, Ember, Knockout, Mayhem, or many others listed on ToDoMVC.

Simple Model-View synchronization

Many of our customers use Dojo and Dijit, because it’s a comprehensive toolkit for building web applications that work today, and while it does not intend to be an MV* framework, it already includes a lightweight approach to getters and setters.

JavaScript Support in action: Using dgrid and dstore with the Django REST Framework

By on July 7, 2015 8:23 am

Throughout the course of June, the dgrid StackOverflow tag saw a series of questions regarding usage of dgrid and dstore with the Django REST Framework. Based on the flurry of closely-related questions that popped up, I became quite curious as to the actual level of difficulty involved with this integration.

Over the holiday weekend here in the US, I decided to let that curiosity get the better of me. In this blog post, I share the results of that endeavor, stepping through the process of customizing a simple Django Rest Framework project to communicate with dgrid using dstore’s Rest store.

Testable code best practices

By on July 11, 2014 12:03 pm

Many of the best practices for writing testable code also conform to general code best practices. Code that is easily testable often also tends to be highly maintainable and resilient against changing business requirements. This blog post provides a brief overview of key criteria for writing highly testable code.

Performance Comparison: dgrid OnDemandGrid and Dojo Grid

By 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

Generating and Viewing Custom Dojo API Documentation

By on January 18, 2013 12:30 am

When developing a JavaScript framework that others will consume, it’s hugely beneficial to provide clean, organized API documentation to accompany your codebase. With the August release of Dojo 1.8, we saw a brand new, extensible documentation parser, which is used to generate output for Dojo’s API viewer. Generating documentation for any project and serving up a custom API viewer is easy, and this post will show you exactly how to do it.

Learning Dojo 1.8

By 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.

Dojo Tutorial: Dojo Start

By on November 7, 2012 2:45 pm

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

Dojo Start

Dojo Start How do I start learning Dojo? Where are the docs? How do I get support and training? Which Dojo version should I use? Why do I need to use a web server? How can I avoid common mistakes? How do I report issues? How do I contribute and get involved? These questions and more are answered with this introductory start tutorial.

Without further ado, check out the Dojo Start tutorial!

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.

Real-time Updates with dgrid

By 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);
});