7 essential internet concepts

The aim of this article is to explain basic concepts that everybody uses but sometimes without knowing what it really is. I will not enter in detail in each topic. Later on I will write specific advanced articles about the most interesting points.

1- Webserver

When we speak about a webserver, we are speaking about different things depending on the context:

• Physical machine (Hardware)

  This is what many people think about when we speak about a webserver, the hardware, a machine that is hosted somewhere and is running our web application.

• HTTP Webserver

  Piece of software installed in a machine that handles all the income HTTP requests.

  'Apache', 'Nginx', 'Lighttpd', are examples of well known webservers.

  The webserver duty is to listen to a port (80 for HTTP protocol by default) where it will receive and process requests. The basic behaviour is to read the URL and then send the request to the Web Application that will handle this request and send back the response.

  We could have for example the same webserver for different applications (blog, main site, intranet) and depending the Domain Name it will redirect to request to one application or another.
  
  
  

  

2- Web application

When I speak about a web application I am referring to the Website, Intranet and Blog in the last example stated.

The web application is in charge of generating the response and send it back to the Webserver, that will send it back to the browser.

To put it easy, lets imagine we send a GET request to https://www.alanwagner.es/hello-world, then the webserver will see that the domain is 'www.alanwagner.es' and will send the request to the website application.

The website application will parse the http url and will see that the 'path' is 'hello-world' so it will send back this code to the webserver:

The code above will be sent from the webserver back to the browser. The browser is able to understand and render the web page.

Having this flow and code that is executed in different parts (Webserver, Browser) is what makes web development difficult to understand to people that is outside our little world. The result of this complexity is having job offers like:

Let's explain the example:

• Javascript, CSS, HTML, JQuery

  Frontend technologies

• PHP, Symphony

  PHP is the backend language and Symphony the framwork.

• MySQL

  The Database where we are going to store the data.

• Apache

  This is the http Webserver

• Linux

  Operaing System. It means either the webserver is run in a Linux machine or the development environment is in Linux.

3- Frontend

When we speak about frontend, we refer to the part of the application that is not run in theWebserver, it is run in the Browser.

The Browser understands HTML, CSS and Javascript.

You may have heard about AngularJS, React.JS, Bootstrap CSS, LessCSS. Those are examples of frontend libraries and frameworks created to ease the developer life. I'll explain the differences of those technologies:

• AngularJS

  It is a MVC* (Model, View, Controller) framework. I could write many articles about angular, but if I had to describe what it is doing in 1 line, I would say that it allows to write a well structured application by allowing the developer to structure the code in modules.

  Another feature of AngularJS is the two-way Data Binding. It means that we can bind our models to the HTML elements, and, when the models change, the view is automatically updated and vice versa.

  With AngularJS it is also possible to write your own directives or HTML tags. For example
  
  To display the current time.

• ReactJS

  React is a relatively new framework developed by Facebook, it follows the Flux design pattern. I will not enter in detail but it is important to know that it was created to solve AngularJS performance issues and it covers just the View layer of a MVC Framework.

• BootstrapCSS

  Bootstrap is just a CSS library that makes easier the development of a responsive website. It offers a bunch of css classes to make the website more user friendly and cross browser.

• LessCSS

  This a a CSS transpiler. It allows to write css in cascade and also to create mixins (as .rounded in the following example).
  You can appreciate the difference in the following examples:

4- Backend

The backend is the part of the application that is run in the Webserver. Nowadays there are many powerful web frameworks that handle most part of the backend complexity. Frameworks are created to help the developer organise the project and also they solve well know problems as i18n (Internationalization), l10n (localization), url parsing, etc. Many of the most popular backend frameworks follow the MVC (Mode, View, Controller) pattern that allows to abstract the persistence logic form the views and the controllers.

5- Database

The Database is where all the application data is stored. I am sure everybody have heard the word SQL (Structured Query Language). It the most popular language supported by database engines.
We can separate the databases in 2 big groups: Relational Databases and Non Relational Databases.

Relational Databases

This is the most used database type, it has been a "standard" in web development for many years. The data is organized into one or more tables of columns and rows. Each row has a unique key identifier.

Non Relational Databases (a.k.a. NoSQL)

This kind of databases became popular few years ago because Relational Databases had scalability problems that are solved by Non Relational Databases

6- SEO (Search Engine Optimization)

Search engines like Google have different criteria to order the search results. The goal of SEO is to make our website "Google friendly" to achieve the highest rank possible. Heretheres is an official Google SEO starter guide.

7- Domain name

A Domain Name is a public name that points to an IP address. Domain names are registered in the ICANN (Internet Corporation for Assigned Names and Numbers) bydomain name registrars.

Parts of a Domain Name

Let's analyse the domain www.alanwagner.es:

• .es is the TLD(Top Level Domain)
• alanwagner is the domain
• www www is the sub-domain

DNS (Domain Name System)

When you type a domain name in a browser it travels throughout internet until it reaches a Domain Name Server that has this entry. Domain Name Servers are tables that contain Domain names as keys and IP addresses as values.

Useful resources

• Less CSS

  Less CSS official website.

• W3C Schools

  Frontend documentation and tutorials.

• Bootstrap CSS

  Bootstrap official website.

• Angular JS

  Angular JS official website.

Original article:

https://alanwagner.es/7-essential-internet-conceps