Once you understand the basics of JavaScript, it is beneficial to investigate the many JavaScript libraries that are available. The purpose of a library is to do the heavy lifting in your code and leave you free to focus on the problem domain. The good news about JavaScript libraries is that the overwhelming majority are free to include in your code, and most are fairly easy to learn. In this article, I’ve picked a few that are more relevant to the work we do as learning developers.
It may be helpful to review my previous Learning Solutions article, "Understanding Application Programming Interfaces," which explains the basics of API’s.
Apache Cordova
There are many times where it’s advantageous for your learning content to operate as an independent mobile application. Apache Cordova enables you to wrap any HTML, CSS, and JavaScript-based learning content as a traditional, distributable Android or iOS application. These applications can even be distributed through app stores, where most users obtain their mobile applications.
Cordova comes with a set of command line tools that allow you to build and configure Cordova projects. The architecture of Cordova is plug-in based. Each plug-in provides native code that runs on iOS and Android, and parallel JavaScript API’s that you as the developer can access to implement device hardware and software such as the onboard camera or the contact list.
Most of the Cordova API’s are easy to access. For example, Figure 1 shows the generic JavaScript to access the screen orientation:
// set to either landscape screen.orientation.lock('landscape');
// allow user rotate screen.orientation.unlock();
// access current orientation console.log('Orientation is' + screen.orientation.type);
Figure 1: Generic Cordova JavaScript to access screen orientation
Fetch API
With the increasing adoption of the experience API (xAPI), the Fetch API can be invaluable to JavaScript developers. It is a modern alternative to the XMLHttpRequest feature that has been used for over a decade to retrieve information from the server. While not strictly a library in the traditional sense, the Fetch API does the work that many libraries were previously relied upon for.
A typical Fetch API call looks like Figure 2.
fetch('https://www.example.com', { method: 'get' })
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block }
Figure 2: Typical Fetch API call
Here, the data is being retrieved from the URL listed in the Fetch Statement. The fetch() method returns a promise which converts the response to JSON (JavaScript Object Notation) and logs it out.
This is, of course, a generic version of the fetch() call, which can be applied to any situation when one system sends information to another. You might use a call like this to simplify communication with an LMS system.
AR.js
Augmented reality is a reality with the AR.js library. Created by Jerome Etienne, AR.js allows you to implement augmented reality in JavaScript in as little as 10 lines of code.
This well-documented library, available at https://github.com/jeromeetienne/ar.js, allows you to get started quickly and integrate 3-D models into your augmented reality productions. The coding behind augmented reality can get very complex. With AR.js much of the work is done for you, and you can start creating your own augmented reality integrations fairly quickly.
Typed.js
This is a personal favorite. Typed.js is a compact, lightweight library specifically for creating typed animations with JavaScript. This library is used by respected companies like Slack and Austin’s Capital Factory to create engaging typography in any HTML-based production. Typed.js is also extremely easy to use.
You can get started with Typed.js with just a few lines of code (Figure 3).
<!DOCTYPE html>?
<html>?
<head>?
<title>Typed</title>?
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>?
<style> .target {font-size: 2em; font-family: courier;}?</style>
</head>
<body>
<div class="target"></div>
<script>
var options = {strings: ["Roses are Red", "Violets are Blue", "Animation is easy with Typed.js", "Foo!"], typeSpeed: 40} var typed = new Typed(".target", options);
</script>
</body>?
</html>
?
Figure 3: These lines of code will get you started with Typed.js
The result of this code (Figure 4) is that each line will be typed out for the user to see.
Figure 4: When you use Typed.js to animate text, each line displays as if it had been typed out
You can adjust the text itself using the strings object inside the code. Simply change the strings to your desired output. You may also adjust the speed at which the text is typed by adjusting the typespeed attribute from the default of 40. This library can provide a fun, engaging way for users to engage with plain text.
Fullpage.js
Another personal favorite, fullpage,js, allows you to create full-page slide based websites very easily. Simply insert your HTML code into the skeleton and let the library do all the work for you. The code skeleton itself is enormously simple (Figure 5).
<div id="fullpage"> <div class="section"> Section 1 </div> <div class="section"> <div class="slide">Slide 2.1</div> <div class="slide">Slide 2.2</div> <div class="slide">Slide 2.3</div> </div> <div class="section">Section 3</div> </div>
Figure 5: The code skeleton for fullpage.js
Replace the content of each div tag with your HTML, CSS, and JavaScript, and you’re ready to go. The full page, slide-based aesthetic is becoming increasingly in-vogue in web design, and works well for many types of content.
This design is also congruent with the single page aesthetic that is now preferred for many websites. Single page sites extend vertically almost limitlessly, but don’t contain hard links to other pages. They may contain in-page navigation, however.
Take your time with JavaScript
Every JavaScript library takes some time to learn. However, there are thousands of libraries for you to explore that often may ease the very coding problem you are solving. If you’re serious about working with JavaScript, keeping up with the latest libraries is always time well-spent.