6.1. Modern Web Application Architecture¶
The diagram below illustrates a pretty standard web archictecture for the year 2018. The tools and buzzwords may change but the basic structure has been the same for several years now.
6.1.1. CGI Stack¶
CGI stands for Common Gateway Interface, and in the beginning (circa 1992) this was how dynamic webpages were generated. The webserver would notice that the URL contained
cgi-bin as part of the path and automatically “spin off” a perl script. The perl script would do something like this:
print "Content-Type: text/html\n\n" print <<HTML; <html> <body> <h1>Hello World</h1> </body> </html> HTML exit;
The odd syntax (called a HEREDOC) not withstanding you can see that the script is basically just a couple print statements that follow the HTTP protocol and spew out HTML. The output from the print statement is directed back across the network rather than to a terminal screen. On the other end of the wire the browser just knows it is getting HTML it has no idea that it came from a program rather than a file. Since the program is just printing out a string, where that string comes from and how that string is constructed gives you all the power you could ever want to generate a page on the fly. The script could access a database, the script could compute anything you want and display the results using HTML to format them.
6.1.2. LAMP Stack¶
writing programs that generate web pages using print statements was OK, but definitely not something that many programmers wanted to do full time. The rise in popularity of linux and other open source components such as the Apache web server, MySQL, and the PHP programming language brought about a real revolution in web development. This combination of components became known as the LAMP stack, and has been a dominant architecture for developing web applications since around 2000.
In this setup the web server would notice that that the URL ended in
.php rather than
.html and then send the file ending in
.php through a php interpreter. The php interpreter even came to be embedded in the web server so that there was no need to spin off a new process for every request. The benefit/curse of php was that it mixed HTML and a programming language with many of the same features as perl or python.
<!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <?php echo "Hi, I'm a PHP script!"; ?> </body> </html>
In the example above you can see that we don’t need print statements for the vanilla HTML. But when we want to compute something or retrieve something from a database we do that inside the special
<?php ... ?> tag. Just as in the cgi world the output from this php file were sent back to the unsuspecting browser as if it had just received a static page.
Over the years the LAMP stack has become an archetype for lots of different systems. Nginx, Postgres and Python could replace Apache, MySQL and PHP and nobody would fault you for calling your setup a LAMP stack.
As web development got more and more sophisticated over the years many different programming languages developed more sophisticated app servers. The web server was relegated to serving static pages, and then handing off more complicated requests to a separate application server. You have heard of many of these such as Ruby on Rails (Ruby), Django or Flask (Python), Tomcat (Java) and many others.
6.1.3. MEAN / MERN Stack¶
Angular.js / React.js / Vue.js
The LAMP stack was very good for generating pages and provided a certain level of interactivity, mainly through forms, but for many people the cycle of
Look at a page
Fill out a form
Submit the form
See the results
Like the LAMP stack there are many tools that can fulfill the roles occupied by Mongo, Express Angular and Node.js. You can write an app just as MEAN using Flask, Postgresql and Vue.js.
6.1.4. Becoming a Full Stack developer¶