[Tutorial #2] Parts list: Technology Stack

[Tutorial #2] Parts list: Technology Stack

Introduction

In last tutorial we introduce WordPress and its strength for managing website content. Now let’s start creating the website with WordPress. The first thing to do is to list all the tools we need for the website. This is called the website’s “technology stack“.

 

Technology Stack

You might ask “why called it ‘stack’? Why not just call it ‘technology list’?” This is because website building tools are not independent. Some depend on others to run properly.

 

For example, an operating system (OS) cannot run without a computer hardware. A database software cannot exist by itself without an operating system. Wodpress will not work if MySQL, a database system, is not installed.

 

Therefore like building a house, when presenting technology stack we put the less dependent tools at the bottom and more dependent tools on top, forming a “stack” as shown below.

 

1469775795295

My multi-topic WordPress website technology stack.

 

In the following we will introduce the major components of a web technology stack. We are going to use an analogy of a company.

Hardware

The foundation of a web tech stack is the server hardware. It is in essence one or a few computers connected to the Internet. Nowdays you don’t need to buy computers and wire cables yourself, but you can rent one from hosting companies sites like Godaddy.com or Amazon Elastic Cloud.

 

Server hardware is like the company’s building. It provides all the physical resources (space, light, water, electricity) to run the company.

 

Renting resource from these websites have several advantages:

  • You don’t need to pay high initial cost for actual hardware.
  • You don’t need to setup hardware yourself.
  • They often provide tools to manage network, your website and software.

 

Operating System

The foundation of software is an operating system, or OS. This software enables other software to utilize server hardware’s resources, for example CPU, memory, and harddrive.

 

An operating system is like the company building administrator. Company personnel has to go to the administrator for utilizing the building resources, like wiring electricity and light, setting up office space, and linking the hoses for restrooms.

 

Most web application hosting companies provide either Linux or Windows OSs. Most web servers in the world use Linux because it is very reliable.

 

Web Server Software

Web server software enables communications between your users from the Internet and your web applications.  It listens Internet requests from a computer’s port and delegate the requests to corresponding web applications. When web applications send back responds the web server delivers them back to the Internet.

 

A web server is like the mailroom/receptionist of a company. Web requests, like order phone calls, can reach the server hardware like a building with a telephone number, but the building needs a receptionist to forward it to departments to process the requests. Similarly the order products created by the company need the mailroom to label it and send it out to clients.

 

The most commonly used free web servers are Apache and Nginx.

 

Database

Database is responsible for efficiently storing , organizing, and retrieving data needed for web applications. With cleaver algorithms a database can be much faster than storing/retrieving data from files.

 

A database is like an automated warehouse in the company. Using robots and modern controls, it can quickly store and retrieve items used by departments to create products, and is much faster than old fashion manual, paperwork warehouse.

 

Currently there are two classes of database systems for web applications: older relational databases (SQL) and newer non-relational databases (NoSQL). Common relational databases are MySQL and PostgreSQL. Examples of Non-relational databases are MongoDB and Hadoop.

 

Web Application:

Web application is the central part of your website, just like the company’s departments that define its business. It is commonly divided into two parts: (1) Frontend (2) Backend.

Frontend

Frontend is where users see and interact with the website. It displays webpages to the users, interacts with them when they move their mouses around, presents them forms to fill in information, and catch their information when users hit the buttons. Frontend is also responsible for presenting results of user requests, like displaying search results.

 

Frontend is like the service department handling user requests phone calls. They chat with clients, make them feel good, and jolt down their requests for sending packages. They also neatly package client’s orders to delight clients.

 

Backend

Backend is where a web application processes user requests. Once it receives requests from the frontend, the backend contacts database for necessary information, compute the information, and invoke other services (like mail server) to do what users want to do. Finally, the backend send data back to frontend in order to create responses for users.

 

Backend is hidden from the users for security/confidentiality reason. The users don’t know how their requests are processed, but they only see the responses.

 

Backend is like the combination of the rest of departments like engineering, finance, marketing, executive office, etc. They work together to satisfy clients’ requests,  but to protect corporate secrets clients won’t see they work.

 

Frameworks and Out-of-the-Box Application

Normally web programmers don’t create web applications from scratch. Instead they use frameworks or an out-of-a-box-application as starting points.

 

A web framework is a set of tools that simplify web application creation and management. It does so by automation and module management like:

  • Automate folders and skeleton files creation.
  • Automate basic web functionality (like linking a web url to a webpage).
  • Automate adding/removing modules.

 

With frameworks taking care of mundane tasks, web programmers can focus on creating website’s core competency: business logic and how the websites look and feel.

 

A web framework is not a ready-to-run website: a web programmer uses it to create one. There are also out-of-the-box applications that act as bare-bone web applications. Here a web programmer can simply install, customize it, and the website is ready.

 

Web frameworks are like those “complete solution package” products in the real world. Calling a complete solution package for restaurant and they will setup all the necessary cooking equipment, sanitation, point of sales software, and paperwork for you, so you can focus on designing the restaurant’s core competency: theme, food, drink, and services.

 

WordPress itself is an out-of-the-box application. Examples of frameworks are Ruby on Rails, Django, Bootstrap, and Zend.

 

Modules/Plugins

Modules/plugins are libraries that add extra features to a framework or out-of-the-box application. Normally frameworks/applications provide easy-to-use managers to install and remove these modules/plugins.

 

Examples of common web modules/plugins are:

  • User authentication module (enable user login, signup, and logout, or even login by social network account).
  • Database communication (enable web application to communicate to a particular database system).
  • URL/JSON parser (to easier understand user requests and communicate to other web services).

 

External Web Services

External web services are like modules/plugins that add features to your website without installing them. Instead you utilize other sites’ service to enhance your own.

 

 

To utilize external web services, your application backend contacts other web services by their application programming interfaces or “APIs” to send/receive data. you can either present the received data, or you can send your data to external web services and instruct them to do something about it (eg: contact bank and make a transaction).

 

External web services are like other companies doing business with you. They offer ways (APIs) you can communicate with them. Once your company receives a client request you can use APIs to order materials from your supplier companies, or send them information to directly service your client.

 

Common external web services are:

  • Mail campaigns (Mail Chimp)
  • Web/social media advertisement services (AdChoice)
  • Transaction services (Paypal)
  • Geo-location services (Google Maps)
  • Online video content (Youtube)

 

 

Multiple topic WordPress Site Technology Stack:

Here is our multiple-topics WordPress site’s technology stack. I use Amazon Elastic Could Service because it is versatile for my future web projects. It is more expensive, so for simple personal sites you can just use hosting service like Godaddy.com.

  • Server Hardware: Amazon Elastic Cloud Service
  • OS: Ubuntu Linux
  • Web server: Apache2
  • Database: MySQL
    • GUI interface software: PhpMyAdmin
  • Out-of-the-box application: WordPress.
  • Frontend framework: Bootstrap
  • External web services: Mail Chimp
  • Major WordPress Plugins:
    • Advanced Custom Fields
    • CodePen Embedded Pens Shortcode
    • Disqus Comment System
    • Duplicator
    • Facebook Auto Publish
    • Featured Images in RSS w/ Size and Position
    • iframe
    • MailChimp for WordPress
    • Media Library Plus
    • TinyMCE Advanced
    • TinyMCE Spellcheck
    • WP Staging