Skip to content

Home

Jump to bottom Edit New page
ccmitchellusa edited this page May 10, 2012 · 29 revisions

Welcome to the Dojo-Build-Factory wiki!

Goals

Simplify getting started with Dojo, by greatly decreasing the number of files and concepts needed to become productive. Gone are the days of sorting through 20,000 files and their dependencies that might be needed to use Dojo.

  • pre-defined, built/optimized layers for common sub packages of Dojo (a more logical mapping than the current fragmented projects. All Javascript files included in the pre optimized layers are removed from the build output, greatly reducing the overall number of JavaScript files needed to get started.

  • pre-packaged themes (css files & associated resources) for mobile and desktop which have individual .css files rolled up into aggregate CSS layer that's easy to include in HTML pages.

  • pre-packaged localization bundles (multiple bundles, one per language, per major sub package of dojo)

simplified dojo packaging using pre-build layers and themes concept

Packages

  • AMD Loader (minimal, 4k)

  • Full Core

  • Common UI F/W

  • Desktop UI (dijit)

  • Desktop Theme: Claro (claro)(cross-platform)(optimized)

  • Mobile UI (dojox/mobile)

  • Mobile Theme: iOS (iPad/iPhone)(optimized)

  • Mobile Theme: Android (2.1-3.x)(optimized)

  • Mobile Theme: Blackberry (OS6)(optimized)

  • Mobile Theme: Mobile One UI (future)(cross-platform)(optimized)

  • Vector Graphics API (dojox/gfx)

  • Business Charting (dojox/charting and it's dependencies, with a single default nice looking theme)

  • Grid (gridx)

  • Gauges (dgauge)

  • Calendar (dojox/calendar)

  • Treemap (dojox/treemap)

  • Language packs

Combinations of the above (or finer-grained groupings of modules will be created as needed)

Background

Problem

Custom builds for Dojo are an advanced development topic, and doing builds from scratch can be very difficult to achieve because of the many variables and considerable flexibility in build options. Unfortunately, custom builds are a necessity to reduce the number of network requests for resources (the number of resources requested is now higher, due to the finer granularity of modules in Dojo 1.7+)

Because creating builds are very difficult, many new users give up when hitting this complexity barrier.

Solution

As described above, we've created a "standard" set of pre-build layers for commonly used Dojo packages. These packages are a trade-off between development complexity and performance optimization, and are intended to be a good starting point when learning Dojo. Once you've learned how to use Dojo (as a black box set of components), you can take the Dojo Build Factory project and tweak it to optimize for your app. With this approach you'll be starting from a working baseline that you can mold to your application's needs.

Building the Standard Dojo Layers

To build the standard profiles with the Build Factory, do the following:

  1. Install Apache Ant and make sure it's set up in your environment properly (1.7-1.8.x have been verified as working)

  2. cd into an empty directory that will hold the build factory and Dojo source trees.

  3. git clone https://github.com/pruzand/Dojo-Build-Factory.git This will create a directory Dojo-Build-Factory

  4. Grab the most recent Closure Compiler zip from http://closure-compiler.googlecode.com/files/compiler-latest.zip

  5. Extract the compiler-latest.zip and copy compiler.jar into the build/lib directory.
    This will make the Closure Compiler Ant tasks available to the Build Factory.
    Closure Compiler is used to optimize out unwanted/unnecessary codepaths from Dojo modules.

  6. Copy the dojo, dijit, dojox and util source code trees for the 1.7+ version of Dojo you're building under the build/src directory.
    Prune any subprojects from dojo/dijit/dojox directories that you know you don't want.

  7. Run the build:
    ant -DprofileFile="profile-mobile-FeP" -DlocaleListParam="null"

    Note that -DlocaleListParam contains a comma-delimited list of locale identifiers... i18n resource string bundles for the locales specified will be built-into the layers. If null is specified, only the English default strings will be baked into layers and all remaining localized resource bundles will remain as separate bundles. If you do not want the extra localized bundles, you should remove them from the build results.

The build will run for approx 10-20 minutes on a basic system (faster with SSD). If all goes well, you should see the following message: BUILD SUCCESSFUL.

Build results are placed into two parallel directories under the build/result directory:

  • compressed - This directory contains the minified (unreadable) version of the built layers and modules.
    Use this tree for optimized runtime performance.
  • uncompressed - This directory contains the un-minified but built version of the layers and modules. Use this tree for src debugging issues in dojo modules.

You will find the standard layer files inside the /dojo directory (ls *-layer.js). It's up to you to use only the layer files you need for your application. See the next section for how to use the layers.

  • dojo.js - Only the AMD loader (contains sync loader codepaths as well, due to a limitation with 1.7.1-2 i18n bundle handling by the AMD loader).
  • core-web-layer.js - Contains Base Dojo and Core Dojo modules as well as common abstract UI classes needed for Desktop and Mobile UI's. This layer will always be needed, unless you're just using Dojo AMD loader to load your own modules or other 3rd party AMD-compliant libraries (eg. with JQuery or JQuery Mobile).
  • dijit-layer.js - The Desktop UI layer (dijit). Contains the Dijit Desktop UI library. Requires core-web-layer.js.
  • mobile-ui-layer.js - The Mobile UI layer. Contains the Dojo Mobile UI library. Requires core-web-layer.js.
  • mobile-compat-layer.js - The desktop browser compatability layer. Use this layer in addition to the mobile-ui-layer to add IE8+ and FF4+ browser support for Dojo Mobile.
  • graphics-layer.js - The Vector Graphics API layer. Needed by Dojo Graphics packages like Charting and Gauges. Requires core-web-layer.js.
  • charting-layer.js - The Charting layer. Contains all standard Dojo chart types (except Gantt) plus a single default theme, "Julia" which is accessible. Requires graphics-layer.js.
  • dgauges-layer.js - Gauges layer contains the new Dojo 1.8 Gauge framework (works with Dojo 1.7) for interactive Analog and Bar gauges with default theme. Requires graphics-layer.js.
  • treemap-layer.js - Treemap layer contains the new Dojo 1.8 Treemap chart type (works with Dojo 1.7). Requires graphics-layer.js.
  • calendar-layer.js - Calendar layer contains the new Dojo 1.8 Calendar (works with Dojo 1.7). Requires core-web-layer.js.

Using the Standard Layers

There are two ways to include the pre-build standard layer files into your applications.

Option 1 (preferred) - "script" includes

For this approach, you pre-load the layer files you want to use via script tags. With this approach, when you write your application, you still must use individual module names in your require and define dependency lists, but all modules in the layers get pre-cached into memory resulting in fewer network requests.

Option 2 - Nested AMD requires

With this approach, you also write your application using individual module names in your require and define dependency lists, but you use the require() function of the Dojo AMD loader to first load in layer files, and then load in your application code.

Add a custom footer
Add a custom sidebar
Clone this wiki locally