JS Projects and Databases

Probably one of the first languages I’ve been exposed to, I’ve finally had the opportunity to dive into JavaScript programming. JS is a very dynamic language, with its core in object prototypes; making it a very flexible (but sometimes confusing) language to work with. I was glad to have a chance to sink my teeth into it.

A project I decided to build was a simple product landing page, where you could create new products and add custom new product requirements for inventory purposes. On my backend, I have a simple Rails Application, and on my frontend, a single html file, some CSS and vanilla (no added libraries) JS.

One challenge I set out for myself was to easily mirror Ruby models with JS objects.

I settled on creating a JS class object that would I could extend to any Ruby model from the database.

class Model {
  constructor(){
    ...
  }
...
}
class Product extends Model{}
class ItemRequirement extends Model{}

Here I’m using the ES6 class syntax to build out a JS class.

This way I could have each new model have the same basic functionality without having to rewrite my code.

For each model, I wanted them to have full CRUD functionality, where I could create, read, update or delete a model. This corresponds with the HTML methods: Post, Get, Patch and Delete. To do this, I added the following functions to the Model Class:

class Model {
...
  async post(){}
  async save(){}
  async destroy(){}
  static async retrieve(){}
...
}

Each of these functions are written with async to allow for asynchronous execution. This is best practice when sending HTML request as you don’t want your code to lock up, waiting on a server to send a response. Each of these functions await a fetch request before continuing their execution. The last function matches to a get request, and as such was made to be static. That way you could have

Model.retrieve()
Product.retrieve()

to make a request to return all the products.

Let’s take a deeper dive into one of the functions, post()

async post(include){
  //Sends a POST request to the server
  const c = this.constructor
  const url = c.root + c.resource
  const options = {
    method: 'POST',
    headers: {...c.headers},
    body: JSON.stringify(packageBody(this, include))
  }
  const response = await fetch(url, options)
  const obj = await fromJson(response)
  c.buildRelationships(obj)
  return c.addInstance(obj.data)
}

As you can see, this function relies on the static properties and methods that are apart of this class. All instances should be sending to the same URL, with the same headers.

As you can see, this setup does not require us to explicitly specify the URL, or all the body data for the request. This makes it readily reusable for a myriad of classes, with only a handful of additional lines of code needed.

class Product extends Model{
  static resource = "products/"
  static instances = []
}

class Item extends Model{
  static resource = "items/"
  static instances = []
}
class ItemCodeParameter extends Model {
  static resource = "item_code_parameters/"
  static instances = []
}

This is freaking great! We can add as many classes as we want without only two additional lines of code, talk about dynamic.

In conclusion

Part of the fun of Javascript is how dynamic it truly is. And while this blog post only showed a small part of that, I’ve been able to enjoy the flexibility that JS really brings in bringing out dynamic and interesting web content. Going forward I’ll be introduced to React and other libraries and frameworks. I’m excited to flush out this beautiful language.