Your First JavaScript App – I

So you have learned about basics of JavaScript and now you are wondering how are you going to use all these concepts. And probably you have seen many web applications and you are not sure how to start. In this post, I will walk you through the process of designing and developing a small web application.

For this application we will be using,

  • an MVC approach,
  • object and prototypes,
  • localStorage to store the data,
  • CRUD [create/retrieve/update/delete] operations.

MVC

In an MVC approach, we create three layers,

  • a model
  • a view
  • a controller.

There are various other variations of MVC, feel free to use them if you already know them. However, I am writing this post for absolute beginners who want to get started with writing JavaScript applications.

The model in an MVC architecture is responsible for holding business logic and interacting with external systems such as a database using APIs. In simpler terms, the model layer gets the data from the database.

The view layer is what you see on the web page. This allows the users to interact with the system. A user of the the application can add a record, delete a record, and so on.

The controller layer works as a bridge between the view and model. It gets the request from the user, such as add a record with so and so data, then interacts with the database (external system using APIs) and updates the data.

In most cases, the view layer requires a feedback from the model to inform the user the result of the transaction, like data added successfully or whether it failed. Model and view cannot communicate with each other, so it’s controller’s job to come back to the view with the result.

Object and Prototypes

You can read about objects here.

We will be creating the modules using constructor pattern, click here to read more about it.

localStorage API

You can read about localStorage API here on MDN but it’s not really important at this point. You probably will have a back-end API to store and fetch your data.

CRUD Operations

As stated above, CRUD stands for create, retrieve [fetch], update, and delete.

In the next post, we will design the application before diving into the coding.