External Libraries

You can use external front-end libraries and node packages to enhance an app's functionality. This section lists the libraries that you can use and methods to include them in an app.

Front-End Libraries

To use an external library, in the template.html file, specify the library's corresponding reference in the Content Delivery Network (CDN).

Example 1: jQuery
You can use jQuery libraries to add certain UI elements in an app. For example, to add a button in an app’s UI, use the following snippet.
template.html

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("This is an alert to quit!") }); }); </script> </head> <body> <button>Send Warning</button> </body> </html>
EXPAND ↓

Example 2: Handlebars
You can use handlebars to build semantic templates. To use handlerbars, include the corresponding library in the app or download the library to the app project directory and provide a reference in the template.html file.

template.html

Copied Copy
1
<script src="library/handlebars.js"></script>

Here, handlebars.js is the downloaded library file located in the app/library directory.

NPM Packages

You can use npm packages to leverage backend functionalities provided by the packages. To use an npm package, add the dependencies attribute in the manifest.json file, specifying the package name and version as a JSON object of key:value pair. Also, include the code corresponding to the package in the server.js file.

Example 1: Request - Helps you make HTTP calls easily.

server.js Copied Copy
1
2
3
4
5
6
7
8
9
var request = require("request"); request("http://www.google.com", function (error, response, body) { console.log("error:", error); // Print the error if one occurred console.log("statusCode:", response && response.statusCode); // Print the response status code if a response was received console.log("body:", body); // Print the HTML for the Google homepage. });
manifest.json Copied Copy
1
2
3
"dependencies": { "request": "1.8.3" }

Example 2:
Underscore - Contains various utility methods.

  1. First - Returns the first element of an array.
  2. server.js Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [5, 4, 3, 2, 1]; _.first(values); /* Returns value 5 */
    manifest.json Copied Copy
    1
    2
    3
    "dependencies": { "underscore": "1.8.3" }

  3. Uniq - Returns all unique values in an array.
  4. server.js Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [1, 2, 1, 4, 1, 3]; _.uniq(values); /* Returns arrray [1, 2, 4, 3] */
    manifest.json Copied Copy
    1
    2
    3
    "dependencies": { "underscore": "1.8.3" }