Nowadays more and more people feel that coding is a necessary skill, it makes senses, in a world where the amount of information is huge, we need to speed up the way that we process it. Everybody need tools that allows to handle properly this amount of information, even more the librarians, who are professionals of the information, because that I believe all librarians should have at least a elementary knowledge in software development. However, if you are librarian and you are looking for just elementary knowledge in development, this series is not for you! I will be fast in elementary parts, I will not go through basic of html and css, I expect that you already know it. I will go deep javascript, so follow this series if you want to be a hardcore Javascript developer.

Now you know why we are here, let move it forward. In this series we are going to create a full “to do list” application, our requirements are:

  • The users can create tasks and add it the to do lists.
  • The users can delete and edit task that already are in the list.
  • Once create a task, the user should not be able to change it, to avoid the procrastination (LOL)
  • The user will be able to get task from a backend service.

These four functional requirements describe what our application should behave, the code of the application is stored in the github, each part of the series will have its own address in the Github, actually they will have their own branches, you can find this first Part code here.

The application will be developed using the backend/frontend approach, the idea is create a frontend application completely agnostic from the backend application, the backend will be developed using Spring Boot and the communication between front and backend will use Rest API. I will not explain details about the backend part, instead I will provide you the backend.

Our frontend has has one html file called an index.html, a css folder and a js folder. In the CSS folder you will find the bootstrap files, we are not focussing in CSS here, so I am using bootstrap to speed up the development and I am going straight to the js folder. In inside of the js folder we have the app folder, where we will put the javascript files of our application, in this part of the tutorial we have two folders here, controllers and models. This is an indication of the first part of the application architecture, we are using a design pattern called Model, View, Controller, or MVC for sort. The idea behind the MVC is organize the code splitting it by function in our system.

The model is where we will have the data structures that represent the entity of the business model that where we are implementing, in our case, the “to do list”. The first model that we are going to see is also the most obvious one in a “to do list” system, task. In the line one of the code below, you have the word “class”, it says that we are using a class, class is a key concept in the object oriented programming. You cam think that a class is a type of blueprint to build object, Class are the data structure that allow us encapsulate methods and properties, we will talk about object, class, method and property with more as we go through this series of posts.


class Task {

    constructor(title, description, date){
        this._title = title;
        this._description = description;
        this._date = date;
        Object.freeze(this);
    }

    get description(){
        return this._description;
    }
    get title(){
        return this._title;
    }

    get date(){
        return new Date(this._date.getTime());
    }
}

In the lines 4,5 and 6 are the properties of the class Task, properties are the attributes of the class that we want to keep, when you get a object of an class, the set of properties is also called object status, in other words is where store the values relevant to our object. In the class Task we have three properties (title, description and date ). All properties in the class Task have the format “this._NAME-OF-THE-PROPERTY”. The first part of the property, “this”, each object will be tied to the its own list of the attributes, the “this” is what tie the property to the object. The second party of the attribute format “_NAME-OF-THE-PROPERTY”, the idea here is to hide the attribute of others part of the of the code, historically Javascript doesn’t have a formal way to do it, so the Javascript developers use the convection, if an attribute is not suppose to be access out of the object, it should start the attribute name with an underline “_”.

Classes have methods, the method is where the action happen, where you write what the class suppose to do, methods are functions of a class, all object of a class will have the methods of the class, as I said, classes are the blueprints to create new objects. In the class Task above, it have three methods: construction, description, title and date. The constructor is the method used to create new object of class, the method constructor starts in the line 3 and finish in the line 8. The line 3 is the signature of the method, the variables received by the class’s constructor, these values are used to initialize the attributes of the objects, actually you can do whatever you want in the constructor, but it is a good practice use the constructor to initialize variables. The line 7 is pretty interesting, over there I am using the method freeze of the standard Javascritp class, Object, the point here is once I got the attributes of the object freeze, it is a good practice also, because it will be easy deal with concurrency, we will see more about it later. The last thing on this topic, when we freeze the object’s attributes in the line 7, we freeze the values in the variables, in the line 6 we actually freeze the a reference to a object Date, and it means that we cannot change the reference to the object Date, but we can change the values of the attributes in side of the object date, later on this series.

I will stop this post here, it is too long, I am sorry about that, but we did a lot on it, we define the basic architecture of the “To do Project”, we went to concept MVC, model, classes, attributes, methods and objects. In the next, post of this series we will see another important element of the MVC, the controller. I hope you enjoy it, and please, let me know it there is something that I can do to help you in your Javascript journey.

Leave a Reply

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