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 different 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.
With each request / response, we could attach some data, which can be in many different 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 different. 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.
The words “framework” and “library” are sometimes used interchangeably, but actually they’re quite different. 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.
No comments:
Post a Comment