Web Application Guide: Welcome to the Jungle

If you’re new to the web application development world, you might be bewildered by the
myriads of technical terms and acronyms out there. Good news is, we don’t have to
understand each and every one of them to start to build our own web app. All we need
to do is understand the basic concepts and terminologies, and the rest will make sense
as we advance. Hopefully, this guide will give a solid foundation of knowledge for
beginners to survive the jungle of web application development.

Where things fall into place

First things first, we should understand that the way a web application works is basically
something that’s called a client-server architecture, or to be more specific, a 3-
tier architecture. Now, stop here, and read the previous sentence again, slowly, and
make a mental note of it. Most of us may have heard about the 3-tier architecture, only
to forget it in the middle of our struggle to become a web programmer.

The 1st tier is what we call the presentation tier, or the client, or the front end. This is the
web browser running on each user’s device, whether it is a PC, a laptop, or a mobile
phone. The role of this tier is, as its name suggest, to present views of data to the user.
We use primarily HTML, and additionally CSS & Javascript to achieve this.

The 2nd tier is the business logic tier. This is the Web (HTTP) Server listening for
connections from the client’s browser. This Web Server is usually running in a
centralized location, whether it is a shared hosting, a VPS, or a dedicated server
hardware. The role of this tier is to connect the 1st and the 3rd layer, and to provide the
core functionality of the application which may involve authentication, authorization,
validation, calculation, etc. The tools we use to achieve this depends of the type of the
Web Server. To name a few, there’s PHP, ASP, JSP, Java Servlet, and (recently) Javascript.

The 3rd tier is the data tier. This is the DBMS listening for connections from the Web
Server, which is usually, but not necessarily, running on the same machine as the Web
Server. The role of this layer is to provide data storage. Some example of the tools in this
tier is PostgreSQL, MySQL, Oracle, Microsoft SQL Server, etc. Together, the 2nd and the
3rd tier constitute the “server” part of the client-server architecture.
Now we're talking

Since we’ve put things into perspective, let’s dive in a bit deeper. To be able to function
as an application as a whole, those tiers need a way to communicate to each other. It’s
the communication between the 1st and the 2nd tier that we’d like to have a closer look.
It’s basically HTTP, with its commands such as GET, POST, PUT, etc that follows a
request-response cycle. In short, the browser issues an HTTP command to the Web
Server (request), and the Web Server will give an answer (response).

With each request / response, we could attach some data, which can be in many
di erent format (or “content type”). The most obvious one is of course,
HTML/CSS/Javascript, which is a part of the 1st tier component that needs to be
delivered by the Web Server to the browser by attaching it into a response. For the
request, common ways to send data is using HTTP Query String and HTML Form.
Actually, by using HTTP Query String, the data is not attached to a request body, but
instead embedded into the URL.

Normally, with each request-response cycle, the browser will refresh the page with a
new content (HTML/CSS/Javascript) that comes with the response. But this is not the
case if we’re making the request using AJAX, which is asynchronous in nature. This
means that when the request is made, the browser won’t wait for a response to arrive
and display the data contents in it, but instead leave it to us to handle the response
when it come. A variation of AJAX is AJAJ, which is using JSON instead of XML to
represent the data.

Tools of the trade

Building a web application is not a simple task, even in the 1st tier. This is especially true
if we’re building an application that require complex user interfaces with multiple forms,
tables, lists, etc. To build a great application, we must ensure that, despite its complex
requirements, the application is both user friendly and programmer friendly. This means
that the user interface must be easy to use, consistent, and intuitive, while keeping the
source code clean, consistent, and therefore easy to maintain. This is where
frameworks and libraries came to the rescue. Please note that, while frameworks and
libraries also exist for the 2nd tier, we’ll only focus on the 1st tier for now.

The words “framework” and “library” are sometimes used interchangeably, but actually
they’re quite di erent. A framework usually requires us to provide pieces of code in a
predefined structure that it will put together, while a library provides pieces of codes for
us to incorporate into our own code as we see fit. One of the most popular library is
jQuery, which helps to simplify the way we access/modify the DOM (Document Object
Model, the javascript’s perspective of an HTML document), handle events, create CSS
animations, and doing AJAX calls. Two other popular libraries are React and Knockout
which provide data binding, which is a way to synchronize UI elements with your
variables. As with frameworks, there are Angular, Durandal, Ember, etc, which come
with their own strengths and weaknesses.

Conclusion

Understanding the components involved and the interaction between them is crucial in
building a great web application, and any application for that matter. It will server as a
guide for beginners in understanding the bigger picture. What may seemed like a
daunting pile of technical terms at first, can now be seen as merely a collection of
building blocks. We can, at our own discretion, tackle them individually based on our
specific needs, as our study progresses.