Web Applications Demystified

One can easily be taken away by usage of latest trendy buzzword acronyms. Basic building block concepts for web application development stay the same no matter what language or framework one uses. Once you understand the basic underlying architecture of any web application you won't get washed away by all the latest trends (for example the MEAN stack). In a web application users with web browsers(firefox, chrome, safari, internet explorer) are called 'clients'. Any code that runs after the web application is loaded on users web browser is called "Client side code". Any code that is processed on the server before it's sent to user who requests it by clicking on a link on the application or choosing a menu option is called "server side code". The reason for communication between clients and server is to interact with a database. These are the three basic building blocks of all web applications. Client side code, server side code, and database. Basically, web applications have things that happen via client side code on a users web browser once a page loads and while user interacts with the page. Also the page loaded interacts with server side code once user takes action requiring server to retrieve data, update data or both.

Things that happen on users computer/mobile device/tablet once page loads:

Known as client side code; HTML5, Javascript, CSS are used to create what happens on the page after it’s loaded. HTML5 marckup, Javascript, and CSS markup is the basic stack for client side developers. Being able to work in client side stack involves skills in proper markup of content using HTML5 with hierarchy along with microformats to support latest advancements in search engine indexing. Writing CSS to style HTML5 markup. Main interactive part of this stack is Javascript with lots of libraries and frameworks. Even another language known as Dart, in the end compiles to javascript code running as javascript on clients web browser. Using Dart is not a requirement for client side code but if you are working in a large team environment there might be a practical need for a language such as Dart. There have been many advancements in client side coding practices. Many libraries exist for javascript for example jQuery, AngularJS along with frameworks such as jQuery mobile for jQuery and ionic for AngularJS exist. The main reason is to avoid users from experiencing browser reloads after each interaction and provide users with a feel of a stable program they know on their desktop computer. You might have heard of SPA(Single Page Applications). SPA can be developed by taking an existing server side heavy coded web application and improve it. Server side code is slimed down just for database interactions while focusing on user interactions through client side code.

Things that happen on the server

Page loaded interacts with server once user takes actions. In some modern data intensive web applications(Email as an example or a online game) communication between server and clients web browser happen constantly. Page of an application loaded on users computer will constantly exchange or ping the server to keep a connection alive by using Javascript code. Once something needs to be retrieved from data source or data needs to be added or updated, server side code is used. With server side code there are many options but deciding factor in most cases is the underlying database being used for data storage. For example if you want to build a web application by using data from Microsoft Sequel database more then likely your server side code will be in .Net. If the database is MySQL, most likely server side code will be PHP. If database is postgres then you will use Python server side code to develop your Web Application. You can mix and match technologies these days but you are better off in using a standard stack for a given database. Since most problems you will encounter have already been solved by countless web developers before you.

Server Side Code

Server side languages have their own slew of frameworks and template engine frameworks. Too broad of a topic to cover here.

Webserver software processes pages on server for clients web browser

A Webserver software is the main piece of the Architecture. Web server serves rendered server side code, and loads html pages along with other assets . Most common, widely used web server software is called Apache and for .Net server side code the web server is called Internet Information Services or IIS from Microsoft.

Now we have a big picture

All this leads to a broader understanding about Web Application development. Any web application, be it drupal, wordpress, or any websites you visit use fundamental building blocks described here. Client Side Code, Server Side Code, and Data source.

Do developers maintain the systems their code runs on?

Developers shouldn't also maintain the systems their code runs on. This is the main reason for the cloud computing and cloud hosting movement. To manage the systems hosting your coded web applications using any of the building blocks above requires system Admin(s). Your hosting service provider might fill in the role to an extent but it would be wise to get a System Admin contract with one of the many reputable companies out there. To maintain a Web Application using building blocks above you could look for those famous full stack "unicorn” individuals.  Although it would be wise to have checks and balances along with accountability.

Now, checkout the MEAN Stack

Based on what is written here, take a look at this latest Web development “stack” with acronym MEAN http://meanjs.org/docs.html and see what building blocks you notice?
Z Data Tech https://www.zdatatech.com/logo/zdatatech-logo.png Last modified: January 30, 2023