Javascript
SECTION
  • Introduction
  • Ansible and ACI
  • Cisco ACI API
  • Python Basics
  • Python ReST w/Requests
  • Javascript
  • Config ACI Programatically
  • Finished
  • References

Developing JavaScript for ACI

Web is the dominant platform for applications. Web-enabled devices can be found everywhere, including laptops, smart phones, and tablets. Web applications must be interactive and intuitive. If applications are slow, clunky, or difficult to use, they only create more of a problem instead of solving one.

JavaScript (JS), officially known as ECMAScript, was created to help solve these problems. All modern browsers have a JavaScript interpreter built in, meaning JavaScript applications can run in almost any browser. In addition to providing interactive front-end elements, there's Asynchronous JavaScript and XML (AJAX). AJAX is a set of technologies which allows web pages to change asynchronously, such as loading new data on the page.

Finally, JavaScript can be used on the backend to provide a server-side JS environment. For example, NodeJS has recently gained popularity and is designed to build scalable network applications as an asynchronous event driven JavaScript runtime environment. The majority of Javascript is best known as a client side code that runs in a browser. The APIC GUI as an example is a JavaScript application. Every time you point your browser to the APIC GUI, code is downloaded from the server into your browser and executed.

Why do developers pick JavaScript instead of Python, or PHP for web application development? Mostly because server side code tends to be a "run once" delivery method. The client connects to the server, the server processes some task, then returns data back to the client, usually in the form of a series of HTML web pages. These pages are rendered by the client and the process finishes. In JavaScript, code is pulled and runs based on the client's actions within the browser. These can be clicks, scrolls, hovers or other available interface actions.

One example is displaying a table of endpoints, which we will build, and by using JavaScript libraries the table can become interactive. This enables the searching and sorting of the table without contacting the server, because the data resides within the client browser.

Step 1 - Move to the JavaScript Working Directory


    cd ~/ltrdcn-3225/jsapps/ep-viewer

NPM

If you've been working with JavaScript for a while, you might have heard of NPM (Node Package Manager). NPM makes it easy for JavaScript developers to share code they've created, and for others to reuse that code in their own applications. When depending on code from other developers, npm also makes it easy to check if updates have been made, and to download those updates when they're available.

These pieces of reusable code are called packages or modules. A package is simply a directory with one or more files, one of which is package.json and contains metadata about the package. A typical application, such as a website, can depend on dozens or hundreds of packages many of which are small. The general idea is to create a small building block which solves one problem well. This makes it possible to compose larger, custom solutions out of these small, shared building blocks.

Step 2 - Initialize the NPM application

Initialize the application with npm.


    npm init

Info

Use default options by hitting 'Enter' then typing 'yes' at the end

NPM Version Warning

If you get a warning about the NPM version having a newer release, this isn't a problem. NPM updates faster than OS updates.

This creates a single package.json file containing the metadata for our application, which we'll build on over time. You can view the contents of the file package.json.


    cat package.json


{
    "name": "ep-viewer",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Step 3 - Install Lite Server

We can install modules using npm to help speed up development. We'll be using lite-server as a development server for our web app.

  • npm stores installed modules in an automatically created node_modules directory.
  • Using the '--save-dev' flag automatically updates the package.json file.

Issue the following command:


    npm install lite-server --save-dev

Once completed the file package.json should have been updated.


    cat package.json


{
    "name": "ep-viewer",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "lite-server": "^2.3.0"
    }
}

Step 4 - Update package.json file

In the IDE modify the package.json file adding the following line to the scripts object. Don't forget to include the comma on the line above for correct JSON syntax.


{
    "name": "ep-viewer",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "lite-server"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "lite-server": "^2.3.0"
    }
}

Warning!

Make sure to include the comma (as shown on line 7) for correct JSON syntax.

Step 5 - Configure HTTP port file for Lite-Server

You will now create another file in the IDE named bs-config.json in the ep-viewer directory containing the following JSON data structure. This is necessary for lite-server to serve content separately for each lab POD.


{
    "host": "10.0.226.241",
    "port": 9004,
    "open": false
}

Step 6 - Create HTML Page Structure

In this same directory you will create another file, in this case an HTML file. It will be named index.html containing the following. Add the following HTML structure to the file and save.


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Verify lite-server is working correctly by running the npm run dev command.


    npm run dev

This will start the lite-server. Click on http://10.0.226.241:9004 to open the page


Alert

The terminal running NPM should be left alone. It will continue running the NodeJS instance locally and will be updating the application automatically for the following pages. When using Visual Studio code IDE you can actually create a new terminal or even split the terminals to have more than one. Take a peek at the following screen capture: