Static Web Application guide

Is it possible for me to write a web application without a web server? I don't want to use SQL server at all too! I want to access it on every platform without installation! I even don't have a good connection to the internet,my application should work offline too :P

IN THIS ARTICLE I WILL COVER TO MAKE AN ADDRESS BOOK WHICH WORKS OFFLINE

Many times I have heard this sentence from my clients.You might have heard of too. A person comes for help and say "I want this type of application!",for doing a customized project or getting consultation, you might have seen these type of people.

These type of people are not alien to the world of IT.Don't wrong!

 At first  I was thinking this is a problem from clients, because they do not have a proper scene of the world web application! Working offline, fair network connection, no-sql server at all, and no web application. I was going to suggest a Client-based app at first. Like a PC platform, but I would get the response : "We already have an old-fashion out off the shelve Java Application! Whenever the java update releases we should regret.We got tired of these type of applications.Support,updates are our costly issues we have to endure every-time with having stress."

Do not worry, they are your best consultant!

If you were to guess these experiences "are known as UX", you were have to stick into a highly cost investigation and survey gathering. They are your free consultant, also they want you to fix this problem. This is a problem of today's glabal IT.If you reply them "Oh,come on...you don't need that, we make it for you it this way...Joomla and WordPress?!"

It means totally to them:

• "You don't care to their concerns"
• "Probably you are not a real professional IT company or person"
• "You did not understand what they want"
• "You just want to get the money and run away!"

For some may think why they want this way. You know what do you think this way? Because probably you used to think this way. We always thought that this is a world of IT and world wide web. We should and no way out. Ummmm... fail! Cloud says something else. 

 Accessible Everywhere , Cheapest , Fastest

Believe it or not they are existed and one day they come to you. Even if they know such an incredible application exists, they come to offer some app. The Clients are the most talented countertenors people, because they think simple!Simplicity is the best.

Please let's be wise about it. They understand what they need. Don't try to convince them what you don't know to do. It is really not a professional behavior. Les't learn how to make it changed instead.

Today I am going to show you how to make brilliant web application that can be function based-on these tails.   

                           Fig 1. User Experience is different from user Interface

Software development phases

1. Information Gathering 

Please let's see what we need and do for the poor client, who begs our hands.

He said:

1. I want it to work offline, the application I mean.
2. I want a platform-free app,means working on every platform and operation system.
3. I want No Sql Server
4. I do not want any web application.

Making some solution instead of finding the reason for each:

For :

1. Working offline: Probably they had experience of internet connection failure,or the users reported complains.  We need an internal storage,like file storage,or internal database.
2.  Being platform-free: As they reported they had experiences with always up-to date and costly support,that charges them for every platform(Linux,Mac Os,Windows,etc) they demanded to change.
3. No SQL Server : It probably is because of back-up struggling, heavy SQL Server,security issues like protections,losing data on client-side after each time of disconnection, etc.
4. No Web Application : This one is really conversational. The web application demands to server web pages,maintain sessions,and transnational layer ability  along with security guard. There are many options for choosing each a web application, based-on needs. But they say that because they don't want a heavy process consuming web app. Really what is the point of running a heavy Apache to show a single page! We've saw each free or cheap server to buy for hosting these type of web applications 

2. Implementation and Design 

In this section we are going design our application followed by needs reported by our customer. Our design should completely cover needs. 

Agenda: 

I have chosen our pattern to design the architecture of the system to cover needs on clients-side.  Today we are seeing client-side frameworks are going popular and informative. There are lot of technologies to deploy on client-side,however,they have all talk on pattern with MVC architecture, or sometimes known as MV* where asterisk goes for every other instance. Model-View-Controller , in which our controller is responsible to update Views when an event arrivals from User Interface, as well as Model to update our model. 

•  User Interface : I am going to design my page with an customized old-plain CSS3 ,however, you can use your own CSS or templates like Bootstrap. I don't want to use JQuery, I mostly never use it, it is heavy library,however you can shrink it,and also increases the risk for being hacked like XSS,automation tools,etc.Later on I will cover the security observation, and importance of this issue in page design. Here I just want a clear design to show. For the MVC  architecture there are some options to choose from, Angular.js from Google, React.js from Facebook are the famous ones, however there are other choices but,to stay this article simple I won't go for other introduction.Wrapping up in this article I use React.js,and in other article I will cover another article with Angular.js.  Both are so powerful, but I found React.js simpler and in single page of development most of the time( In Angular.js you have to,or better to divide your Model,View and Controlle in separated files.
• 
•  Local Storage : This is a serious issue to take. I remember the first time I have tried to store information on my computer with a browser. Thanks for Google Efforts for creating an incredible Local Storage on Chrome, later on browsers Like Firefox supported. That one now becomes a mature Framework in which you can embed it in your application as an another MVC so we don't need to make our own library to collaborate with the Local Storage. I have chosen Backbone.js  as our another MVC for our Local Storage.
• I decide to make this article simple as much as possible, but I would like to develop it with outbound feature in the application, like synchronization with server in Cloud environment. I will use Socket.io or Engine.io, but know let's just make it offline. An address book works offline as we demanded. 

No get back to our design, our final system architecture concept looks like this:

Here the user requests a page from web server on any port,like port 80 for HTTP.The server serves a single simple html page. The embedded JS libraries inject the rendered html tags into the DOM. I am not following to discuss it here,and assumed you know how does MVC framework work.

OK, now let's create a moke-up for our app. We want a single page. Single page technics makes our web application have a scene of one web page. I am going to cover Persian Language here,cause I am one of it fans :) 

React Agenda:

React.js says you don't need to process all the page for a single request to change the specific view,in which every request is for a specific part of the page. Like divide and conquer,we better to divide the the page into separated parts called "Component".

The procedure to divide page into separated components in React.js depends on the lemma in which you are easy with,but the process provided by React.js is completely straight forward. First we should see which parts are dynamics and which parts are statics. In our example,the address book I have highlighted each component from hierarchy order, components in components. That's where you should develop each develop from lower-hierarchy to the upper-hierarchy or vice verse. It depends on your mind to how it thinks,like if you design your app from details it is better to start from lower parts,then to upper parts, and if you see things from top you better do in diverse.

The divided component's hierarchy is as follows:

* MainComponenet ( Green Box )

   ** SearchComponent ( Yellow Box )

   ** TableComponent ( Red Box ) 

       *** RowListComponent ( Orange Box )

   ** FooterComponenet   ( Black Box )        

Code Agenda:

So we have something like this:

<MainComponenet>

      <SearchComponent />

      <TableComponent>

               <RowListComponent/>

      </TableComponent> 

</MainComponenet>

This is the top view of application design;These html tags like XML tags,providing by React.js to function with each component separately.This strategy is now on Facebook and Telegram. 

Alright,let's develop each component separately from lower-layer to upper-layer.

It is a row from our <TableComponent> where all the members come. 

Our  <TableComponent> is like this html block code:

Our  <SearchComponent> is like this html block code:

Our  <SearchComponent> is like this html block code:

<MainComponent> 

In middle of the way I saw LinkedIn has not properly organized the coding styles.

So if you got interested in this article please follow the full article on my personal website :
https://blog.avesty.com