Web development has become one of the most innovative and important areas of the IT industry. The advancements in the realm of dynamic content have enabled us to buy and sell products on the Internet, share our daily lives (for better or worse) with all of our friends, and create complex International banking and trading websites. It was not long ago when the idea of dynamically storing and providing content through the Internet was an unrealistic concept – certainly in terms of modern usage at least. Primarily through the advancement of databases like MySQL and server-side programming languages like Perl, Ruby, and most significantly PHP, dynamic and responsive websites have become standard and are expected by consumers. The amount of knowledge and skill-set diversity that a modern web developer must have is significant, though the process is much more manageable than it seems at first glance. Let’s take a look at what a dynamic website actually is from a technology standpoint and then investigate what role each of these technologies play.
So, what is a “Full-Stack” Web Developer?
To put it simply, a Full-Stack Developer is one who understands all of the technologies mentioned in this article and can use those technologies to develop for all layers of the stack (i.e. both Frontend and Backend components).
Anatomy of a Dynamic Website
The Web Server
The “back-end” of a website refers to the server, server-side scripts, databases, and machine configuration settings. When people speak of a “server” they are often using the word to refer to a type of physical machine, but this is not correct usage of the word. A “server” is actually a software concept – not a hardware one. There are machines that have been optimized to perform well while running server applications, but the “server” itself is software. There are many web servers in use today with the open source application Apache being the most popular . Another popular open source web server application is NGINX, but Apache will be covered in this article.
Server-Side Scripting Languages
There are many popular back end scripting languages like Perl, Ruby, and PHP that help to provide dynamic content to websites. One of the most popular in the industry is PHP and will be the back-end scripting language this article will cover as it is used on 83.1% of web servers as of the writing of this article .
Databases & Data Storage
Another key component to the back-end is the storage and retrieval of data. There are markup style formats like XML and JSON that allow you to store and organize data in text files. With the correct functions in PHP you can access the data in those text files much like you would records in a database, however, databases are much more efficient when frequent requests for large amounts of data will be necessary.
Because databases are optimized for frequent data storage and access, they are the preferred method for providing dynamic web content. Databases also have the advantage of having many encryption and access control features that make them more secure for storing sensitive information. The Structured Query Language (SQL) is also incredibly powerful when leveraging the built-in functions. The database that will be covered in this article is MySQL, though PostgreSQL is another popular open source alternative.
The “front-end” of a website refers to the technology involved in the visual rendering of data in the client’s web browser. There are many elements that come together to make this happen including, but not necessarily limited to:
- HTML (Hypertext Markup Language)
- DOM (Document Object Model)
- CSS (Cascading Style Sheets)
- Mobile Device Design Optimization
The primary purpose of HTML in a web document is to structure the data into something that the browser can read from and then render the read data into a visual format for a user.
Mobile Device Design Optimization
Most web searches are now, and have been for years, conducted on mobile devices. While web development for desktop platforms will continue to thrive, it has become a requirement to create an alternate layout that is optimized for small screens and touch based user input.
Client-Side vs Server-Side
The Stuff Less Mentioned
There are other skills a full-stack developer will need to be good at, but that might not seem obvious if you are focused on the coding aspect of development:
- Graphic Design
- Human Psychology
- Intuitive Navigation & Information Access
- Quality, Competition, Scope, & Frameworks
Creating a website from the ground up will require many skills and design is no exception. Not only must you be able to design a website’s layout, you will also have to create and add images to complete the design of the layout. Or perhaps your client wants a welcome logo to display when a new member logs in for the first time. It would be hard to call someone a full-stack developer if they didn’t have the skill to create the required images to complete said layout.
Our understanding of human behavior is constantly evolving. As the world around us changes, we adapt to those changes by modifying our own behavior. Newspapers were once the preferred method of getting the news. With the advent of the Internet, and the way technology has evolved, most of us visit the website of the news company rather than running out to the newspaper dispenser at the gas station.
This means that the standard for how fast we can access information, how relevant that information is, and how recent that information was discovered has changed dramatically. It is much less efficient to pick up a newspaper, read through the table of contents, try and find the relevant subject matter, and finally turn to the indicated page than it is to simply type a few keywords and be directed to the exact information requested in an instant.
There are many reports that mention the length of time you have to “capture” a new visitor’s attention and inspire them to explore further into your website. This time is usually presented as less than 5 seconds, some say as little as 2 seconds, before a new visitor will get bored and leave in search of more relevant or better presented information. This means that your designs must be eye-catching, appealing, and inspire exploration.
Intuitive Navigation and Information Access
This concept is linked somewhat to human psychology and plays a big part in whether a visitor will explore your site beyond the landing page. Navigation should have a few steps as possible for a user to access the information they are desire. The information should be presented in a well-structured and appealing manner as previously stated.
Quality, Competition, Scope, & Frameworks
While there are many benefits to full-stack web development, like being able to completely customize functionality, there are also obstacles. Free and Open Source frameworks like WordPress have taken the web development world by storm. As a full-stack developer it is hard to compete with these projects as they are the culmination of countless hours from a multitude of developers. Trying to create web applications that have functionality rivaling the big frameworks, like WordPress, is a near impossible task for an individual full-stack developer.
Keeping projects properly scoped is key to a full-stack project’s success. Often it may make more sense to use the full-stack development skills to simply create an add-on or plugin to add a desired functionality to an existing framework. Security, maintenance, and upkeep is also very well established in frameworks. For example, you probably should not try to create your own Shopping Cart functionality when there are drop-in frameworks that have already been vetted by the industry.
The AMP Stack
Apache Web Server
The Apache web server is the standard when it comes to Linux based hosting platforms. While NginX is popular, Apache is still the leader in the industry and is why it is being covered in this article. Apache servers are highly configurable and run a simple scripting language within a file called “.htaccess” This allows you to set up very powerful constraints and functionality. The .htaccess file can be used to change the default index of a web server to index.php instead of index.html, or even redirect a visitor to your the SSL secured version of your website. A full overview of Apache’s features is beyond the scope of this article.
MySQL Database Management System
MySQL is the standard when it comes to web development. There are many other databases like PostgreSQL which have their own advantages, but are less appropriate for a website. For instance, PostgreSQL has better user permissions and access controls which is beneficial if many different groups of people will be accessing data. If the purpose of your site is to gather information for data science evaluations then the users, groups, and permissions features of PostgreSQL may be desirable, however, websites like this are not the norm. For most websites MySQL’s functionality is more than sufficient and MySQL does have a basic user permissions access control system that is enough for most web related database purposes.
PHP Server-Side Scripting Language
To take advantage of content stored in a database we need to be able to access it, add to it, remove it, and change it. We need to apply those changes to our document, and finally send that document to the client’s browser. PHP is the tool that allows us to bring all of these technologies together in order to provide dynamic content. This works because PHP can pull data from the database and insert it into our HTML document before serving it to the client.
A Basic Full-Stack Document Request Sequence
The following are the bare bones steps for providing dynamic content to the client:
- Client requests a PHP document from the server (the HTML is within this file)
- PHP pulls the blog entries from the database.
- PHP inserts the records into your HTML code.
- PHP then serves the PHP document to the client.
- Client receives the PHP document.
- Client’s browser loads the HTML markup and establishes the Document Object Model (DOM)
- The website request process is complete.
Where to Start?
This is a critical first step which will enable you to understand the structure of the Document Object Model (DOM)
A Server-Side Language (PHP, Ruby, Python, etc..)
This allows you to add and provide dynamic content using built-in database APIs. PHP is by far the most popular server-side language, though Java and Node.js are very popular as well.
Databases (MySQL, PostgreSQL, etc..)
Allows for the storage and retrieval of dynamic content.
Knowledge of multiple client-side technologies is critical to provide the quality, or “richness”, of the user experience by interacting with the DOM.
Learning applications like GIMP or Photoshop will enable you to make eye catching and appealing designs.
 Apache Statistics. (2018, January 23rd). W3Tech: Usage statistics and market share of Apache for websites. Retrieved from https://w3techs.com/technologies/details/ws-apache/all/all
 PHP Statistics. (2018, January 23rd). W3Tech: Usage statistics and market share of PHP for websites. Retrieved from https://w3techs.com/technologies/details/pl-php/all/all