Praveen Singh

Dojo Toolkit Tutorial (AMD): Hello world application in DOJO and AMD foundation apis.

Introduction`


Dojo Toolkit Tutorial (AMD): Hello world application in DOJO and AMD foundation apis.

A step-by-step tutorial for Hello World application or tutorial using new DOJO AMD(Asynchronous Module Definition) concept.
This article also touch the AMD foundation API like require() and define() as well as DOJO api declare()

step by step video tutorial



Setup


  1. Download latest code from http://dojotoolkit.org/download/
  2. Extract the code and get the package structure like below

  3. Run everything in a server. If you are on mac, Simplest way is, run: python -m SimpleHTTPServer 8888 at DOJO_TEST level. On window....find similar way.

Code


This simplest way to create a Hello World application without any AMD


  • Simplest setup.
  • Touched foundation api: require(), but still not using it properly.
Path:DOJO_TEST/app/simple/hello-world.html
 <!DOCTYPE html>
 <html>

 <head>
 <title>DOJO AMD</title>
 </head>

 <body>
 <div id="test"></div>

 <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
 <script type="text/javascript">
/**
 * require() is a foundational AMD API.
 * Fetch the module on run time and only after it is done with loading of one or list of module,
 * it call the callback function, which go as second argument.
 * In this case it is empty.
 */
 require([],
 function() {
 document.getElementById("test").innerHTML = "Hello World";

 });
 </script>
 </body>

 </html>

                


Next level


  • Using AMD properly by pulling query and on module on run time.
  • Basic usage of DOJO query and on
Path:DOJO_TEST/app/simple/hello-world.html
<!DOCTYPE html>
<html>

<head>
 <title>DOJO AMD</title>
</head>

<body>
 <div id="test"></div>
 <button id="testBttn">Say Hello</button>

 <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
 <script type="text/javascript">

 /**
 * require() is a foundational AMD API.
 * Fetch the module on run time and only after it is done with loading of one or list of module,
 * it call the callback function, which go as second argument.
 * 
 * Pulling query and on module on run time.
 */
 require([
 "dojo/query",
 "dojo/on"
 ],
 function(query, on) {
 var button = query("#testBttn")[0],
 target = query("#test")[0];

 on(button, "click", function() {
 console.log("Button press");
 target.innerHTML = "Hello...thanks for pressing button!"
 })

 });
 </script>
</body>

</html>

                


Final level


  • Building a first class DOJO AMD application.
  • Main HTML file has been cleaned up to use as trigger file.
  • Introducing 2nd foundational AMD API: define()
  • Using define, creating a module.
Path:DOJO_TEST/app/simple/hello-world.html

<!DOCTYPE html>
<html>

<head>
 <title>DOJO AMD</title>
 <script>
 /**
 * By default DOJO look for all module as sibling of dojo lib,
 * In our case it is "/DOJO_TEST/lib/dojo/".
 * To modify this default behavior, we override default location by providing dojoConfig.
 */
 var dojoConfig = {
 async: true,
 packages: [{
 name: "app",
 location: "/DOJO_TEST/app"
 }]
 };
 </script>
</head>

<body>
 <div id="test"></div>
 <button id="testBttn">Say Hello</button>

 <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
 <script type="text/javascript">
 /**
 * require() is a foundational AMD API.
 * Fetch the module on run time and only after it is done with loading of one or list of module,
 * it call the callback function, which go as second argument.
 */
 require([
 "app/simple/HelloWorld"
 ],
 function(HelloWorld) {

 var helloWorld = new HelloWorld();
 helloWorld.init();

 });
 </script>
</body>

</html>
                
Path:DOJO_TEST/app/simple/HelloWorld.js
/**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */

define([
    "dojo/_base/declare",
    "dojo/query",
    "dojo/on"
], function(declare, query, on) {

    /**
     * dojo/_base/declare is not port of foundational AMD API.
     * It is provided by DOJO to simulate class-based inheritance by encapsulating JavaScript prototype-based inheritance.
     */
    return declare(null, {

        helloText: "Hello...thanks for pressing button!",

        init: function() {
            var button = query("#testBttn")[0],
                target = query("#test")[0];

            on(button, "click", function() {
                console.log("Button pressed");
                target.innerHTML = this.helloText;
            }.bind(this))
        }
    });
});


                

Theory


AMD: Asynchronous Module Definition: Rise of AMD!

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. AMD has taken off in popularity, with numerous module loaders and widespread usage.


require(): AMD foundational API

require() is a foundational AMD API. It fetch the module on run time and only after it is done with loading of one or list of module,it call the callback function, which go as second argument.


define(): AMD foundational API

The foundational AMD API is the define() method which allows us to define a module and its dependencies.
The dependencyIds argument is an array of strings that indicates the dependencies to be loaded. These dependencies will be loaded and executed. Once they have all been executed, their export will be provided as the arguments to the callback function (the second argument to define()).


declare()

dojo/_base/declare is not port of foundational AMD API. It is provided by DOJO to simulate class-based inheritance by encapsulating JavaScript prototype-based inheritance.

Contact Me


If you want to contact me for feedback or suggestion or doubt. You can do so by commenting on Blogger article or in Youtube contact section.

You can also approach me dropping me mail directly at mails.icodingclub@gmail.com

No comments:

Post a Comment