My Personal Guide to Building a JavaScript Frontend and a Rails API backend

The inspiration for my application comes from my personal experience. I create and use checklists everyday to document what I want to accomplish or to remind myself of what needs to be done. While a pen and paper has never failed me, I concluded to build an application that houses my succinct need to make lists; I call it “UPFRONT”. Within UPFRONT, I implemented some features that I found to be helpful to the modern, on-the-go person who likes to visualize their goals and tasks.

Features

A user has access to CRUD functionality for tasks.

A user can view what tasks have been “checked off”, or completed.

A user can correlate a specific task to a specific category, such as “Work”.

A user can view the task list of a specific category.

Models & Associations

I have two (2) models: Task and Category.

A Task may belong to a Category and a Category may have many tasks.

I created this one has_many relationship to not only portray the functionality of my application, but to also portray JS objects and their ability to be complex.

New Concepts Learned

This is my first project utilizing the separation of concerns regarding frontend and backend. It is interesting to see how the frontend and backend merge and diverge at certain points within my application. And yet, they continue to act upon their own responsibilities. I can value this need to differentiate between responsibilities and to portray such within the structure and flow of my code.

The Three Pillars

Both the implementation and display of the "Three Pillars of JS" has been rewarding for my coding ability. The three pillars nicely break down how abstracted, DRY code returns an useful web application.

Recognizing JS Events: In UPFRONT, there are many buttons awaiting an action. The action, a "click", is a JavaScript event. This event results in JavaScript doing "work", most accurately in the form of a callback action.

Manipulating the DOM: The Document Object Model, or the DOM, is often changed or updated through events in JavaScript. In UPFRONT, a "clicked" button (the event) may return a change in color, the addition of a new instance on the page, or the rendering of an edit form.

Communicating with the server: After doing the work and manipulating the DOM, the JavaScript application communicates with the server to report the changes made from the event and to the DOM. This finalizes the effect of user-made actions to application's frontend (the browser) and backend (the database).

Asynchronous Behavior

Touched on briefly in the Three Pillars of JavaScript, let's talk about asynchronous behavior and an example of this behavior found in my code! Asynchronous means colloquially "to do a little bit of everything a little at a time". While this definition may not be found in an dictionary, it makes sense when talking about JavaScript. JavaScript will start executing code, stop, await for a function to be invoked, and then resume execution. This is most commonly seen in my code through Event Listeners. An Event Listener will take an event as its first argument and a callback function as its second argument. While compiling, JavaScript will read the event listener, but will not execute the callback function until both the event occurs and the function is invoked. Asynchronous behavior allows for efficiency and also some control over what the user sees as the code compiles.

showTasksButton().addEventListener("click", handleClick)

In this example from my code, I call the method ".addEventListener" on a function called "showTasksButton". The event listener listens for a "click" (first argument) and only when the click occurs, will the code invoke the function "handleClick".

const handleClick = () => {...}

The function "handleClick" is then defined and the code will resume with the instructions within the function.

Functions!

Functions have been the biggest surprise for me in learning and applying JavaScript. While they resemble methods commonly seen in RoR, they are much more complex and powerful. Functions in JavaScript are first-class data.

This means that a function can be an argument to another function, a function can be the return value of another function, and a function can be set as the value of a variable, to name a few aspects. The extended functionality of JavaScript functions allows for abstraction, DRY code, and overall, a more sophisticated application.

To learn more about my project, click the link!