An ES6 Web Application

Overview

Most, it seems, of the code for my most recent web application has been written. There surely is room for improvement with this project, and it is (mostly) functioning how it should be. In this post I’ll be writing about the code techniques I used, provide an overview of the application, and I will also go over areas in which I could improve the application.

It is a simple input and output program with a database on the backend. The program is all written on the frontend, which I found to be very convenient. (All JS.) It’s a simple architecture while using the NoSQL database.

The NoSQL database is called Couch and I used a JS library called Pouch. My only question, while using this architecture is “Why aren’t more people designing their programs with these frameworks!?”

I used ES6 (or newer – and some older) coding techniques. My overall program is structured like this:

//Global and helper functions

class Model{
//Templates go here.
}

class View{
//User interface code goes here.
}

class Auth{
//Authentication goes here.
}

let auth = new Auth();
let model = new Model();
let view = new View();

There is an authentication layer which accesses the database with a login and logout feature. Couchdb is cookie authenticated so the user could stay logged in even during page reloads and navigation.

The view class was composed of mostly methods that managed the logic of the view.

class View {
    constructor(){
    }
    newItem(){
       //Adds a new item.
    }
    editItem(){
       //Edits the item.
    }
    deleteItem(){
       //Deletes item.
    }
}

Techniques

For the HTML templates I used ES6 template strings. They really open up a lot of possibilities with their usage.

class Model(){
    constructor(){}
    template = (data) => {
      return `
          <ul><li>${data}</li></ul>
      `;
    }
}

A feature that became especially useful is Array.map. Before discovering this function, I was using an if…then to “iterate” through the data.

if (data.item[0]){
    doThis(data.item[0]);
} else if (data.item[0] && data.item[1]){
    doThis(data.item[1]);
}// ... etc.

Needless to say that there are more efficient ways of iterating through an array. Array.map to the rescue! It is similar to Array.forEach except returns a duplicate of the modified array instead of modifying the original array. And remember to use the .join to connect each iteration with an empty space instead of including the array’s commas.

class Model{
    constructor(){
    }
    template = (data) => {
      return data.map(function(value, index){
        return `<li>${value.item[index]}</li>`
      }).join('');
    }
}

Areas of Improvement

There could be many areas of improvement to this application though the most notable area is probably having to do with reloading the window location. There are times where location.reload seemed like the perfect solution, yet it wasn’t. It was a question of seemlessness and having to do more with UX (user experience). For example, after editing an item, I would have to manually reload for the items to display. How would one accomplish this without a manual reload? Use location.reload – or code in a “view items” function?

Conclusion

This was a fun project and I learned some new techniques to develop with. While I still have much to learn, this project turned into a functioning program, all with good ‘ole vanilla JS, a code library, and a JS friendly database! If you are creating a project with similar frameworks (or non-frameworks), I’d be happy to share knowledge! Thanks for taking the time to read this.

Leave a comment

Your email address will not be published. Required fields are marked *