JS auto-code generation using Amazon Q Developer
First, let’s explore how Amazon Q Developer can assist a new web programmer planning to work with JS but lacking a background in the language. We will use Amazon Q Developer’s chat-style interface to educate the programmer.
JS language basics
Let’s learn about the JS programming language by asking about the very basics of JS:
Q: What is programming language JavaScript(JS) and what are use cases best suitable for JS ?
As you can see in the following screenshot, Amazon Q Developer provided historical information about the original developers. It then summarized the common use cases by categorizing where the JS language excels. Additionally, it offered sources for further reference and learning.
Figure 6.1 – Chat style – JS basics
You can observe that, in addition to web development, Amazon Q Developer pointed out the versatility of JS applications, such as game development, desktop applications, Internet of Things (IoT) applications, and machine learning applications. Amazon Q also provided guidelines about JS use in “applications that require a high degree of interactivity, responsiveness, and dynamic behavior”.
Based on the preceding information, you can see that JS is so versatile and can be used in various software development projects across industries. Let’s look at the commonly used commands by JS web programmers:
Q: What are the common commands in programming language JS?
We will not be going through each command, but just for illustration, as you can see in the following partial screenshot, Amazon Q Developer provided several categories of the common commands and constructs in the JS programming language. To make it easy to follow, it also included some of the common key commands for each of the categories.
Figure 6.2 – Chat style – JS commands
Amazon Q Developer highlighted multiple areas where JS has various supported command sets such as console commands, DOM manipulation commands, array manipulation, and more.
Let’s use one of the areas to get information and ask Amazon Q Developer to provide details and examples related to JS support for DOM manipulation:
Q: What is DOM Manipulation and how JS supports it ?
Figure 6.3 – Chat style – JS DOM manipulation
As shown in the preceding partial screenshot, Amazon Q Developer begins with the basics of DOM manipulation, which refers to the ability to dynamically access and modify the content, structure, and style of a web page using JS. The DOM represents the hierarchical structure of an HTML document, where each element, attribute, and text node is an object that can be accessed and manipulated. It then continues by providing specific details related to categories such as accessing DOM elements, creating and modifying elements, manipulating attributes, handling events, modifying styles, and DOM manipulation libraries and frameworks. At the end, it provides a summary highlighting the importance of JS for DOM manipulation: “DOM manipulation is a crucial aspect of building dynamic and interactive web applications. By leveraging JavaScript’s capabilities to access and modify the DOM, developers can create rich user experiences, update content on-the-fly, validate user input, and respond to user interactions without requiring a full-page refresh”, with reference sources included.
Now, let’s ask Amazon Q Developer for the syntax of one of the most useful loops used while coding complex scripts, the for...in loop in JS:
Q: Provide syntax and example of "for…in loop" in JS
Figure 6.4 – Chat style – JS “for…in” loop example
Observe in the preceding screenshot that Amazon Q Developer provided the syntax, details, and an example of a for...in loop. Now, let’s move to the sample use case to show the power of Amazon Q Developer’s ability to recommend the code.
End-to-end JS use case development
To illustrate, I am going to use the VS Code script editor window with single and multi-line prompts.
Here is the use case: Create JS end-to-end code to build a to-do list application. Create tasks such as adding new items, marking items as completed, and deleting items. Use JS to manipulate the DOM and respond to user events. Here is the prompt:
Prompt: /* Create JS end to end code to building a to-do list application. Tasks to adding new items, mark items as completed, and delete items. Use JavaScript to manipulate the DOM and responding to user events. */
Figure 6.5 – Prompt – JS program partial snapshot
The preceding screenshot shows a partial code snippet suggested by Amazon Q Developer. The full end-to-end code generated in response to our prompt demonstrates several fundamental and advanced concepts in JS and DOM manipulation. It effectively utilizes key JS functionalities related to the DOM, such as getting elements, creating elements, modifying elements, handling events, and applying styles. It leverages multiple key out-of-box functions of JS, including document.getElementById, document.createElement, taskItem.appendChild, taskList.removeChild, Button.onclick, and more. It also included a custom addTask() function to support coding best practices. The end-to-end code meets the specifics of your prompts, showcasing Amazon Q Developer’s capability to generate comprehensive and functional code for web development tasks.
In the current version of the code, Amazon Q Developer added two buttons: Delete and Complete. If we use the basic chain of thought for actions supported by the application, it appears that a Cancel button is missing. Let’s use a single-line prompt technique to suggest to Amazon Q Developer to add a Cancel button:
Prompt: /* add Cancel button */
Figure 6.6 – Prompt – JS program Cancel button
As you can see in the preceding screenshot, Amazon Q Developer added multiple lines of code to add the Cancel button. It effectively used JS functions such as document.createElement, cancelButton.onclick, and taskList.removeChild.
In the next section, let’s see how Amazon Q Developer supports PHP developers.
