Web Architecture

The Internet is a global system of interconnected computer networks that use a specific protocol to link devices worldwide. It is a network of networks that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web, electronic mail, telephony, and file sharing.

The Internet is a global network that links devices allowing to run different applications like emails, League of Legends or the Web using this network with their own protocols. (Though you may access your email platform via the Web, emails are sent to your correspondant's email platform via a different protocol from the one used for the Web.)

The World Wide Web, also called the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet.

The Web is an application on the Internet network using the Hypertext Transfer Protocol (HTTP) to request access to and serve files and data.

English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser in 1990 while employed at CERN in Switzerland. The browser was released outside CERN in 1991, first to other research institutions in January 1991, and to the general public on the Internet in August 1991.

Up to now, we've created web pages, stylesheets, scripts and accessed them using a browser to display them and run the scripts. This is called the front-end development. But how does it works? How do we get from creating pages to displaying them as a website?

We type an URL and they appear? Well, it's not magic. We're not going to go into as much details as What happens when you type google.com, but we need to understand what Glitch is doing for us under the hood.

You've probably already heard about servers (in Web terms). Strictly speaking, a server is a program used to take requests (e.g. when we type a search on Google) and responds with specified data when a request is made. By metonymy, the device on which one or more server softwares run, can also be called a server. On a network, such a device is called a host. When running a server on our own computer, our computer is called a localhost.

We can use a lot of different languages to create servers like PHP, Java, Python, C++… and of course JavaScript since about 10 years ago with NodeJS. NodeJS is a JavaScript runtime (i.e. it can execute JS scripts) built on V8, Google’s open source high-performance JavaScript engine used in Google Chrome. Using Node, we can run any JS program without the need of a browser:

node vX.X.X linux/amd64 means that this program is run using NodeJS version X.X.X on a linux computer with an amd64 processor.

But this comes with some differences: since there is no web page in which the script is executed, there is no document object, no body, nowhere to create, add, or manipulate elements. NodeJS can do much more since we are the ones launching the program on a device, our program can access Operating Sytem commands on this device, create, read and manipulate files, secure login of users or access to confidential informations, communicate with other clients or servers, automate processes, create Facebook bots… or respond to HTTP requests: a Web server.

As opposed to front-end code (which is executed by the client), server side programmation is called back-end development. Although back-end development is out of the scope of this course, it is important to understand these aspects of the Web. Think about Google or Amazon, the value of these services isn't their website in itself but on server side (storing and queyring data, login users).

How do we use NodeJS and create a Web server?

We could install NodeJS on our computers to create servers and run scripts, but we don't need to: Glitch also offers to create NodeJS applications.

For this we need 2 files:

• a JSON file named package.json that contains informations like the command to execute our program, here: node server.js means use node(the command to call NodeJS) and run the code in the server.js file (the second file we need). package.json can also contain the list of "libraries" our program needs (not having an HTML document to include libraries, does not mean we can't use libraries: there are tons of packages for NodeJS: see Node Package Manager).
• a .js file that contains our program (here server.js), that loads our libraries and create a Web server.

Notes about package.json:

• scripts.start is the command to execute server.js with NodeJS, Glitch automatically executes this command
• dependencies are the Node Packages (ie. libraries) needed for our program. We need to provide the name of the packages and versions we want, and Glitch installs them
• express is a Node package used to create Web server in a few lines of code (less than 10 lines in server.js)
• this one is a minimal package.json, usually we can find a lot more of informations, like author, licence, version…

And an express server can also return web pages files:

About the paths in filenames ("public/index.html"): in Glitch, if we create a new file and name it public/index.html, it creates a file named index.html inside a folder named public.

Routes are using relative paths, if you're not familiar with it you should read Understanding the difference between relative and absolute Paths.

This goes outside of the scope of this course, but if you're intersted in NodeJS and want to go further, have a look at these resources:

• Server-side Programming and Node with Daniel Shiffman
• Introduction to Glitch for Node.js Apps in the Cloud
• Awesome node.js curates the best node.js modules and resources

A client is a program that sends requests to a server (it can be on the same computer or another on your local network, e.g. connected to the same wifi, or on Internet ), in order to access data. For example, web browsers are clients that send requests to web servers that respond with web pages to display. The term "client" may also be applied to computers or devices that run the client software or users that use the client software.

Client–server systems are today most frequently implemented by (and often identified with) the request–response model: a client sends a request to the server, which performs some action and sends a response back to the client, typically with a result or acknowledgement.

Quiz

Test your knowledge