Documenting Sencha Touch 2 Application using JSDuck

Documentation plays an important role for any project, especially if you are working on big projects and if you want revisit the code that you wrote long back, document will helps you to understand your code. Also if any new developers join the team, this documentation helps them to grasp the code logic.

 JSDuck is an open source ExtJS 4 project developed by Sencha Team to help Javascript developers generate beautiful documentation viewable in a web browser. Based on JavaDoc, JSDuck parses documentation embedded in the source files of your project and generate HTML Files.

 How to Install JSDuck

  For Mac:
     Mac users should be able to install jsduck using gem. Open the Terminal and type the following Command.

    gem install jsduck

   This will automatically install the required dependencies. Incase, if you face any installation issue, please refer this URL

 For Windows:
   Windows users can download an exe file that contains all the dependencies needed from the SoureForge downloads page. Simply save this file somewhere convenient and accesible from your project.

 Generate Documentation using JSDuck

    For Demonstration purpose, I created  User model class that contains Name and Age fields and getUsername() and getAge()  Methods. Also included inline comments for each section of code.

 /*
 * Holds the User Information
 * Created By A Suresh
 */

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    alias: 'model.User',

    config: {
        fields: [
            {
                name: 'Name'
            },
            {
                name: 'Age'
            }
         ]
    },
    /**
     * This method will returns the user Fullname
     * return String
     */
    getUsername: function() { },
    /**
     * This method will return the user age
     * return String
     */
    getAge: function(){ }
});

    Inorder to generate the documentation for the above User Model Class, you need to execute the following command.

       path/to/jsduck.exe app/model/User.js --output newdocs

    This command follows the following format {<executable jsduck path>  <Source JS File/App Project Name>  --output  <Output Folder>}.

    Please make sure, you need to execute this command inside the App Project root Folder. Once Command got successfully executed, you will find 'newdocs' folder will be automatically created inside your App root folder. Open the index.html file present inside the newdocs folder in any Browser, you will see the below screen.

Hope, you enjoyed this Post.