Introduction to Full-Stack Web Development

0

Introduction

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.

This article aims to demonstrate the principles, concepts, and technologies surrounding full-stack web development. Instruction on each of the technologies presented (Apache, HTML, CSS, MySQL, PHP, and JavaScript) is beyond the scope of this article, though some examples will be provided. It is also worth noting that there are other languages that can be used to achieve similar results. For instance, Django is a powerful Python framework that can also create dynamic websites. The reason these technologies were chosen is that they are the standard in the industry and the most commonly used in professional development. For example, at the time this article was written 83.1% of websites are built on a PHP backend [1]. Most frontend development occurs in CSS and JavaScript with a library like JQuery or a framework like React. JQuery is a common JavaScript API and will be the JavaScript library of focus for this article.

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

Back-End

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 [1]. 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 [2].

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.

Front-End

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)
  • JavaScript/JQuery (or other client-side API/Framework)
  • Mobile Device Design Optimization

HTML

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.

DOM

The Document Object Model is the representation of the HTML structure as objects that can be manipulated using client-side scripting languages like CSS or JavaScript.

CSS

Cascading Style Sheets are an extremely powerful and effective tool for adding client-side styling and functionality like image rollovers, once only accomplished using JavaScript. This can be very useful as some users do not enable JavaScript in their browsers by default.

JavaScript/JQuery/Client-Side API

JavaScript is a client-side scripting language that enables developers to deliver a “rich” user experience. This “rich” experience is based on many elements aside from client-side scripting, such as clear and easy navigation, but the term has become hitched to the concept of dynamic mouse-over effects, smooth transitions, and AJAX interaction. JQuery is a powerful JavaScript API library that allows you to create complex JavaScript effects with very little effort and will be chosen for this article.

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

By design, and for security reasons, the client-side languages like JavaScript are not able to access the server and perform server-related tasks. This is why there are server-side languages like PHP and client-side languages like JavaScript.

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

Graphic Design

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.

Human Psychology

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

Introduction

The AMP stack is a software bundle that has become very popular for web hosting and consists of the Apache web server, MySQL Database Management System, and PHP server-side scripting language. These three elements, when combined with client-side languages like JavaScript, can produce websites of the most complex and feature rich variety. We have already familiarized ourselves with the front-end and back-end concepts, but now we will take a closer look at the AMP stack specific components.

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)
  • Client’s browser runs any client-side scripts (CSS, JavaScript, JQuery)
  • The website request process is complete.

Where to Start?

There is so much to learn when speaking of web development that it can be overwhelming. I personally started with a server-side language and database management system, PHP & MySQL, and built my knowledge of client-side technologies on top of that PHP & MySQL foundation. Others may prefer to start with a front-end language like JavaScript and then learn focus on the back-end details later. What is clear is that the following are requirements if you want to be called a full-stack web developer:

HTML

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.

Client-Side Languages (CSS, JavaScript, etc..)

Knowledge of multiple client-side technologies is critical to provide the quality, or “richness”, of the user experience by interacting with the DOM.

Graphic Design

Learning applications like GIMP or Photoshop will enable you to make eye catching and appealing designs.


References

[1] 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

[2] 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

Share.

About Author

James Cathcart has a Bachelors of Science for Software Application Programming and is currently pursuing his Masters of Science for Software Engineering. He became a computer enthusiast before his teenage years and is passionate about software development.

Leave A Reply