Apr 3

Introducing dojo-amd-converter

By Dylan Schiemann on April 3, 2013 9:30 am

AMD offers many benefits over the legacy Dojo module syntax. While Dojo is forwards-compatible, to take advantage of the benefits of AMD, developers are often faced with the challenge of migrating and refactoring large quantities of boilerplate code from the legacy dojo.provide/dojo.require syntax to AMD’s define and require. As we make the upgrade to AMD in our projects, we also usually want to leverage the latest version of our evolving APIs. With early work beginning on Dojo 2.0, we definitely need to work together as a community to automate as much of the upgrade process as possible.

Introducing the dojo-amd-converter

We have created an alpha quality release of dojo-amd-converter, a tool for helping you make a one-time migration of your existing source code to a newer version of Dojo.

Be warned, the tool handles only 70-80% of the manual conversion process, and generally does better with more standard usage of Dojo. Normally we wait a bit longer before announcing our projects, but this should be useful in its early alpha state. We know this tool has quite a few open issues that need to be fixed and we invite you to help us improve it.

Our hope is that this conversion tool, which is today useful for converting pre-AMD code to AMD code, could also form the basis for a community effort to make it possible to migrate code bases more efficiently from Dojo 1.x (pre-AMD or AMD) to Dojo 2.x. That work has not yet started, since Dojo 2.0 is not yet an actual thing.

Continue reading 2 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:

Dojo Community, including a forum interface to the dojo-interest mailing list
Mailing Lists
Web client for the #dojo IRC channel on irc.freenode.net

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

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

Aug 16

Dojo 1.8 Documentation Highlights

By Dylan Schiemann on August 16, 2012 9:36 am

With Wednesday’s release of Dojo 1.8, there are many exciting improvements to check out!

Our top goal for this release was to significantly improve the quality of Dojo’s documentation. SitePen proudly contributed in the following areas:

Helped make many of the more than 500 fixes to our documentation based on community feedback (thank you!)
Helped improve the content found in the reference guide
Developed a brand new, extensible JavaScript-based documentation parser, which we use to generate output for the API viewer
Updated 70% of the existing Dojo tutorials to be accurate for Dojo 1.8. The remainder will be updated in the next few weeks.
Started working on 10 new tutorials, including an updated Ajax tutorial covering the new dojo/request API for Ajax requests.

Thanks for your ongoing suggestions and support. We look forward to your feedback on this release.

From workshops to support to full-scale development, SitePen is the leading industry expert in all things Dojo. Contact us today to discover the best way SitePen can help you upgrade to Dojo 1.8.

No 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 15

18 things to look forward to in Dojo 1.8

By Dylan Schiemann on June 15, 2012 1:03 pm

After many months of work, Dojo 1.8 Beta is almost here. We expect beta to be ready for use on June 22, 2012, with the final 1.8 release due 4-6 weeks later!

dojo/request

We’re very excited about this release for many reasons. For the new features, I’m most excited about the work led by Bryan Forbes with dojo/request. This is the third major iteration of how Dojo works with Ajax. The first ever Dojo release, dojo.io.bind, was completed at SXSW in 2005, prior to even our 0.1 release. The second major release, dojo.xhr, was an excellent and performant rethink around Ajax. A lot has changed over the past few years, with the introduction of XHR 2, with our support for Dojo inside Node.js, and a strong desire to create a solid, simple, clean, and highly flexible API for the feature that brought JavaScript into the forefront of web application development in 2004. In 1.8, you can still use dojo.xhr (or dojo/_base/xhr with AMD), as it wraps dojo/request. We’ll have an in-depth post about dojo/request next week.

Without further ado, here are 18 things to look forward to in Dojo 1.8:

New Features:

1. dojo/request, making Ajax far more flexible and powerful, and works inside Node.js
2. dojo/router, a new component for routing to different client-side “pages”
3. dojox/Calendar, a feature rich calendar widget
4. dojox/dgauges, a framework to easily create your own gauges
5. dojox/treemap, a data visualization widget
6. dojox/mobile, 28 new mobile widgets including audio, video, grid layout, tree view, and more

Significant Improvements:

7. Automatic and declarative require, making it easier to work with AMD for features defined in markup
8. dojo/promise was rewritten, making promises and deferreds easier to use and track
9. dojox/mvc was rewritten, along with a new ToDo demo application
10. The API documentation and viewer, and Dojo reference guide are vastly improved for 1.8. For many users, this will be the most welcome change with Dojo 1.8.
11. DnD on mobile platforms
12. Canvas and SVG specific enhancements to GFX, adding significant capabilities

Noteworthy Enhancements:

13. General AMD refinements to improve performance and optimize modules throughout the toolkit
14. Dijit Select and Tree now connect directly with Dojo Object Store API
15. Claro’s gradients are easier to customize through CSS rather than images for non-IE browsers
16. CometD and Lightstreamer integrations are updated to AMD, and should be downloaded from their projects
17. General performance improvements to many widgets and to Dojo Charts
18. A mobile migration assistant from 1.6 or 1.7 to 1.8, to make it easy to migrate through the many mobile improvements

More Information

Keep following SitePen on your favorite social network for more Dojo 1.8 updates! We’ll be blogging regularly between now and the release of Dojo 1.8 to tell you more.

5 Comments

Apr 24

dgrid: Getting down to the nitty griddy

By Ken Franqueiro on April 24, 2012 8:52 am

Inside dgrid

What does dgrid mean to Dojo?

dgrid has come to represent and demonstrate the future and power of third-party packages for Dojo. The dgrid package helps to jump-start the repository-centric approach, with parts of DojoX expected to eventually follow suit. It also demonstrates extensive use of the new features and architecture in 1.7 — including granular dependencies, and the new event mechanism in dojo/on — showing how components can use Dojo 1.7 to create amazingly compact and fast user interfaces.

dgrid has also pointed forward to lighter-weight approaches to widget design, more CSS-centric techniques for styling, better separation of structural and skinning styles, and other innovative techniques that have sparked interest into new ways of working with and on Dojo.

Because dgrid builds upon Dojo under the same licensing, you get all of this innovation while preserving Dojo’s clean intellectual property, simple integration with other features, high performance, and professional engineering, taking advantage of the many things that make Dojo excellent.

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