Your First JavaScript App – II

Click here to read the previous post of this series.

When I started learning JavaScript, I always thought how can I use prototypes, objects, closures, and, all those stuff. So I understand most of the beginner struggle with this question. I found many articles that explained how to get started and build your first to-do app. That was all that. Eventually, when I started to work and went through the available codes, I understood how these concepts are applied in an application or a product. 

In this post, I will try to walk you through the steps of designing the application and deciding what would you need.

I am not building the traditional to-do app but the concepts are almost the same. It’s a phone book or contact manager app where a user can add contacts, view, update, or delete them [CRUD].

Features of the Application

To start with we will implement only the simple things,

  • A user should be able to see all the contacts.
  • A user should be able to add a contact.
  • A user should be able to modify a contact’s detail.
  • A user should be able to delete a contact from the phone-book.

Once we will be done with it, we can implement following features,

  • Search with name or phone number.
  • Sort by name in ascending or descending order.
  • Maybe more.

Components of the Application

As you might have guessed, this application will have three main components,

  • A form to submit data.
  • A container to display all contacts.
  • A component to display one contact with option to modify or delete.

How should your application look?

This is upto you. Once we get started, you can think of the design. But the basic idea is, as discussed above, there will be a container which should contain all the contacts.

Modules

Ideally, you should have a module for one feature. We can consider this app as one module in a big application, and we can create a module for this.

Directory Structure

Many people organise codes in two different styles. Some like to keep all models in one directory, all views in one, and so on. And Some people like to distribute the code module-wise. I am using the latter approach, you can use whatever suits you. The idea is to separate code in logical structure so that it is easy for any developer to access them easily. Create a directory and then create directories and files like following directory structure:

|____index.html
|____README.md
|____styles
| |____main.css
|____scripts
| |____main.js
| |____modules
| | |____contacts
| | | |____contactItem.js
| | | |____contactsViewTemplates.js
| | | |____contactsView.js
| | | |____contactsModel.js
| | | |____contacts.js
| | | |____contactsController.js

Ideally, the stylesheets should also have a proper structure, based on modules or components. But let’s concentrate on JavaScript. I’ll be using minimum styling in this application.

I hope everything is making sense until now. In the next post, we will start coding, and then the mystery of how to use javascript in an application will be solved. We will also break down the components to the smallest bits so that before even starting the code we will know what to code.

Read the next post here.