-[Dojo tutorials] Part 5-build flickrview for Production

Original article: Part 5-build flickrview for Production

In the previous articles, we wrote HTML, CSS, and JavaScript to implement the mobile application of the flickrview. This article will focus on updating code for deployment, use the dojo build system to keep production environment applications compact, and review the entire dojo mobile-driven application.

Dojo mobile and build

Creating a build version for the dojo mobile application is very heavy, because we want our application to be as small as possible. Let's take a step-by-step look at how to create a compressed build version of our dojo mobile application, flickrview.

Dojo Construction System

The typical build script is under the util/buildscripts directory of the dojo toolset. Therefore, you need a copy of the dojo source code locally. If not, visit this URL to obtain: dojotoolkit.org/download.

Make sure you have obtained the source code that contains the util directory. Once you have these, copy the dojo, dijit, dojox, and util folders to the JS directory of your application. Your file structure looks like this.

Profile)

Let's create a build profile for flickrview ). This build profile is a configuration file that describes what this build contains and which options are available. Create builds tutorial is the complete document of the dojo build system. Here we will briefly introduce it.

Profile starts with some options:

• "Basepath" defines the base path for all related paths in the profile.
• "Action" is a standard action for a build.
• "Releasedir" build result output directory
• The "cssoptimize" option is useful for mobile build because it ensures that all theme CSS is concatenated into one file.

 1 var profile = { 2     "basePath": "./", 3     "action": "release", 4     "releaseDir": "../release/js", 5  6     "selectorEngine": "acme", 7     "stripConsole": "normal", 8     "copyTests": false, 9     "cssOptimize": "comments.keeplines",10     "mini": true,11     "optimize": "closure",12     "layerOptimize": "closure",13 14     "localeList": "en-us"

The following is the definition of layers:

In this tutorial, only one layer contains all the modules required by the application. A layer will generate a JS file. For us, define it as a dojo/dojo layer. It contains the required dojo code and custom code for the application.

We can divide our applications into multiple layers. For example, we can use one layer for dojo code and one for custom application code. However, for mobile applications, especially on the network, it is a little cumbersome, because the application needs to be requested multiple times at startup (increasing user waiting time ). For the same reason, we include the local code into a layer.

 1 layers: { 2     "dojo/dojo": { 3         customBase: true, 4         includeLocales: ["en-us"], 5         include: [ 6             "dojox/mobile/parser", 7             "dijit/registry", 8             "dojox/mobile/compat", 9             "dojox/mobile/ScrollableView",10             "dojox/mobile/ListItem",11             "dojox/mobile/FormLayout",12             "dojox/mobile/TextBox",13             "dojox/moble/RadioButton",14             "dojox/mobile/Heading",15             "dojox/mobile/EdgetoEdgeList",16             "dojox/mobile/RoundRect",17             "dojox/mobile/Switch",18             "dojo/cldr/nls/de/gregorian",19             "dojo/cldr/nls/fr/gregorian",20             "dojo/cldr/nls/it/gregorian",21             "dojo/cldr/nls/ko/gregorian",22             "dojo/cldr/nls/pt/gregorian",23             "dojo/cldr/nls/es/gregorian",24             "dojo/cldr/nls/zh/gregorian",25             "dojo/cldr/nls/zh-hk/gregorian",26             "flickrview/FeedView",27             "flickrview/SettingsView"28         ]29     }30 },

 

Then we need to define a set of features:

Feature is a way to separate code and include or exclude code with conditions.

For example, if we set the IE feature to undefined: in this case, we do not need to make our code compatible with the old IE browser, so we will remove any code for IE:

 1     staticHasFeatures: { 2         "dom-addeventlistener": true, 3         "dom-qsa": true, 4         "json-stringify": true, 5         "json-parse": true, 6         "bug-for-in-skips-shadowed": false, 7         "dom-matches-selector": true, 8         "native-xhr": true, 9         "array-extensible": true,10         "ie": undefined,11         "quirks": false,12         "dojo-sync-loader": false,13         "ie-event-behavior": 014     },15 16     packages: [17         { name: "dojo", location: "dojo" },18         { name: "dijit", location: "dijit" },19         { name: "dojox", location: "dojox" },20         { name: "flickrview", location: "flickrview" }21     ]22 };

 

Run build

Let's switch to the command line and build our layers based on the above Build Configuration:

UNIX

1 cd js/util/buildscripts2 ./build.sh profile=../../flickrview-app.profile.js

 

 

Windows

1 cd js\util\buildscripts2 .\build.bat profile=..\..\flickrview-app.profile.js

 

The construction process is a mixture of JavaScript and Java tasks. By default, the Unix build. Sh script uses nodejs or rhino.

In the Windows build. Bat script, only rhino is used. However, this does not mean that nodejs cannot be used. The script content set manually on the command line is as follows:

1 .\node ..\..\dojo\dojo.js load=build --profile ..\..\flickrview-app.profile.js

 

After the build is complete, go to the release/JS/flickrview directory and check the results.

Execute this build

To update the file created by the new architecture

First, modify the dojo path and replace the original one with the newly built dojo. js. Consistent with the dojo/dojo layer in profile, the result file is release/JS/dojo. JS, So we changed the script tag. We do not need to make other modifications, because the layer already contains all the modules required by the application.

1 <script type="text/javascript" src="./release/js/dojo/dojo.js"></script>2 <script>3     require([...], function(...) {  // existing require calls4         // ... existing code5     });6 </script>

 

Finally, our dojoconfig is as follows:

1 <script type="text/javascript">2     dojoConfig = {3         async: true,4         parseOnLoad: false,5         mblHideAddressBar: true,6         extraLocale: ["en-us", "fr-fr", "de-de", "it-it", "ko-kr", "pt-br", "es-us", "zh-hk"]7     };8 </script>

 

Review

Flickrview is complete. We have written templates, styles, code (JavaScript) for this simple mobile app and built it into a product!

Let's review what we learned during the creation of the flickrview:

• Basic pendants included in Dojo mobile
• How to declare dojox/mobile pendants in HTML and use them in JavaScript code
• How to Use dojox/Request/script to obtain JSON-format data from Flickr
• How to expand dojox/mobile pendants
• Adhere to best practices, but also ensure the code is compact and minimize Dependencies
• Build a dojox/Mobile Application

Through this series of tutorials, we can see that dojo mobile is an outstanding mobile application framework with themes and pendants that match mobile devices. Dojo mobile is also easy to learn, with extensions and dynamic content filling. With three views, it is very easy to create. Thanks to dojo mobile!

-[Dojo tutorials] Part 5-build flickrview for Production