Forem: Mustajab

Front-end vs Back-end, and Static vs Dynamic Websites

Mustajab — Tue, 10 Nov 2020 14:12:05 +0000

Front-end and Back-end are the two most popular terms, one hears now and then after making probably one of the best decisions of their life i.e., to learn web-development.
So, let's talk about the differences between these two terms, why they exist in the first place, and the different paths you can take in your web development career.

Before we start

Think of your experience when you visit a restaurant.

Front-end Analogy: You sit in the dining area and interact with the service staff, or waitstaff. The restaurant might have nice decorations(and so does a website) and an overall great atmosphere. You might order something through the waitstaff, with which they go to the kitchen and order your request.
Back-end Analogy: While you’re waiting for your food, you don’t see the cooks preparing it, but you know your order is being worked on. When your food is hot and ready, the waitstaff brings it from the kitchen to your table.

Similarly, when you visit a website, there are specific elements to the page that you can see and interact with—images, text, videos, colors, fonts, drop-down menus, sliders, forms, etc. All these things make up the front-end portion of the website. The back-end is everything you can’t see or interact with, such as servers, databases, operating systems, and APIs.

Now let's take a look at both of them in details

Front-End

Stuff you see and interact with on a website, the look, and feel of it
Also known as the "client-side" or "web design"
While there are many different types of technologies and stacks, most front-end web developers use HTML, CSS, and JavaScript, the holy trinity of the web, and client-side frameworks such as Angular, React, Stencil and Vue.
The job titles of front-end developers include "web designer", "user interface (UI) designer", "user experience (UX) designer", and obviously "front end developers"
Responsibilities:
- Develop new user-facing features in web browsers
- Design and implement the front end for websites of complex web applications utilizing modern JS and CSS frameworks
- Build reusable code and libraries for future use
- Optimize front-end applications for maximum speed and scalability
- Code to modern REST or GraphQL best practices

Back-End

Basically everything else that happens on a website (how the site works, updates and changes)
Everything the user can't see in the browser, like databases and servers
Also known as "server-side"
Usually people who work on the back-end are called programmers or developers
Responsibilities:
- Back-end developers are mostly worried about things like security, structure, and content management, they usually know languages like HTML and CSS, but that's not their focus
- Design and implement backends web architecture, such as servers, databases, operating systems, and APIs
- Integrate user-facing elements with server-side logic
- Build reusable code and libraries for future use
- Optimize backend applications for maximum speed and scalability
- Implement data security solutions

What Are Static and Dynamic Websites?

Static Website:

A static website contains Web pages with fixed content
A static website includes a series of HTML and CSS files
Static sites are the most basic type of website and are the easiest to create and work with
In a static website, you would need to make modifications to each and every file to modify the header section of the website. And this constant editing usually leads to errors and bugs in the code
The loading and browsing of static sites are faster than dynamic websites since the static websites have nothing to do with the server and therefore, directly load on the client’s browser without communicating with the server.

Dynamic Website:

Dynamic websites contain Web pages that are generated in real-time
When a dynamic page is accessed, the code within the page is parsed on the Web server and the resulting HTML is sent to the client's Web browser
Server-side programming is used to change page’s content at run time
In a nutshell, dynamic websites can change the webpage dynamically while the user is accessing the page on the browser
Dynamic websites offer easier design updates since you do not need to make changes in every page to simply change in one piece of information on the page. In dynamic sites, each element of the page is different, therefore, it is a lot easier to modify a particular element on different pages, all at once
A Dynamic website offers flexibility and versatility since it pulls together a bunch of different page elements to create a whole page. It lets you save all the content into the database from where it can be fetched and edited whenever it is required. Dynamic websites even enable you to load the same content from the database across multiple sites. Databases also make it a lot simpler to load, categorize and search your content in dynamic ways

Back-end Developer and Dynamic Websites

Back-end developers, or at least back-end development, are required to create a dynamic site. Most sites are dynamic sites, as opposed to static sites. Facebook, Google Maps, and this blog are all considered dynamic sites. Blogs are dynamic sites since their content is constantly changing and updating. A dynamic site requires a database to work properly. All information, like user profiles or images they've uploaded, or blog posts, are stored in the database.
Web developers work with programming languages like PHP or .Net since they need to work with something the database understands. The code they write communicates with the server and then tells the browser what to use from the database. It gives the user the ability to update dynamically without going back to the designer.

Want to take your Web Development Journey Further?

Read about How Web Works? This is the only article you'll ever need to understand Web Basics

https://dev.to/mustaja27276874/a-dive-into-the-world-of-web-1bkg

A Dive Into The World of Web.

Mustajab — Sat, 07 Nov 2020 22:38:13 +0000

An Overview of The Web

The Web is an Internet-based distributed information system. And since, there is no central control or administration for the Web hence anyone can potentially put material on the web and can retrieve information from it. The Web is the most widely used internet services, among Electronic Mail, File Transfer Protocol (FTP), Chat Rooms, Mailing list, Instant Messaging, Chat, and News Groups.

Although as a user most of the things are abstracted away from us, we can still look at the nitty-gritty stuff.

What happens in a nutshell?

As soon as you enter say www.amazon.com, the game of requests and responses begin:

Finding the right address i.e., resolving what you entered (URL), Your computer needs to know the exact address to send a request to, i.e., the address of the webserver on which amazon is hosted.
A Request is sent to the server of the website.
The response of the server is parsed i.e., the webserver sends the web page back to your web browser.
The page is rendered and displayed and voilà you have the information you needed right away.

Before we dig deep into these steps, first we must get familiar with some major web components. A basic understanding of all of these components and how they work together lays a good foundation to dive into the world of the Web.

Networks: The local-area network and the wide-area networks connecting computers world-wide forming the Internet.
Clients and Servers: Generally all the machines connected to the web are called clients and servers.
- Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (A web browser such as Firefox or Chrome is an HTTP client, it runs on your computer to access Web servers on any Internet hosts).
- Servers are special computers that store webpages, sites, or apps. When a client device wants to access a web-page, a copy of the web-page is downloaded from the server onto the client machine to be displayed in the user's web browser.
  - But, What is a Web Browser anyway? And how does it work? A web browser is software that helps users obtain information from the Web, letting you see text, images, and videos from anywhere in the world. Typically a browser supports the display of HTML files and images in standard formats. The files or information is transferred using the Hypertext Transfer Protocol, which defines how text, images, and video are transmitted on the web. This information needs to be shared and displayed in a consistent format so that people using any browser, anywhere in the world can see the information.
Documents: Web Pages, coded in HTML, supply for information need for the World Wide Web.
Protocols: For programs and computers from different vendors, under different operating systems, to communicate on a network, a detailed set of rules and conventions must be established for all parties to follow. The HyperText Transfer Protocol HTTP that Web clients and servers use to talk to one another which is based on Internet Protocols. Networking protocols are no mystery. Think about the protocol for making telephone calls. You (a client process) must pick up the phone, listen to the dial tone, dial a valid telephone number, wait for the other side (the server process) to pick up the phone. Then must say hello and identify yourself, etc, and you can’t deviate from this protocol to make your call successful. The same goes for computer programs getting to talk to another through a computer network.

Now let’s have a look at all four steps mentioned above in detail.
Step 1 - URL Gets Resolved

The website code you requested is obviously not stored on your computer and hence needed to be fetched from the server where it is stored. When you connect to the internet you do so via an Internet Service Provider (ISP). You type a domain name or web address into your browser to visit a site; for example google.com, amazon.com, microsoft.com, etc.
The Web uses Uniform Resource Locators (URLs) to identify (locate) resources (files and services) available on the Internet. A URL may identify a host, a server port, and the target file stored on that host. URLs are used, for example, by browsers to retrieve information and by HTML to link to other resources.

A full URL usually has the form

scheme://server:port/pathname

The scheme part indicates the information service type and therefore the protocol to use. Common schemes are https, FTP, file, mailto, telnet, news, etc.

When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website.
Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them.
It is called a “server”. Because it serves some purpose, in our case, it serves the website.
Because the Internet is a global network of computers each computer connected to the Internet, must have a unique address. The Internet address is in the form xxx.xxx.xxx.xxx where xxx must be a number from 0-255. This address is known as the IP address (IP stands for Internet Protocol), it is like a unique identifier number for that computer.
You enter “www.amazon.com” (that is called “a domain”) but actually, the server which hosts the source code of a website, is identified via IP (= Internet Protocol) addresses. The browser sends a “request” (see step 2) to the server with the IP address you entered (indirectly - you, of course, entered “www.amazon.com”).
Basically here the user requests for a particular website, and that what it’s called an HTTP request.

How does the domain “www.amazon.com” gets translated to its IP address?
As discussed above every host on the Internet has a unique IP address and a domain name. To translate the domain into its IP address, we have a special type of server out there on the internet - not just one but many servers of that type. Which is a so-called “name server” or “DNS server” (where DNS = “Domain Name System”). The domain name system (DNS) provides a distributed database service that supports the dynamic update and retrieval of information contained in the namespace.
Your computer contacts a network of servers called Domain Name System (DNS) servers to obtain address information for a target host making contact with a server. These act like phone books; they tell your computer the IP address associated with the requested domain name.
The job of these DNS servers is to translate domains to IP addresses. You can imagine those servers as huge dictionaries that store translation tables: Domain => IP address.
When you enter “www.amazon.com”, the browser therefore first fetches the IP address from such a DNS server.

So far we’re just getting the request to the right place. Now, once the IP address is known, we advanced to step 2.

Step 2 - Request is sent

With the IP address resolved, the browser goes ahead and requests the server with that IP address. The unique number that the DNS server returns to your computer allows your browser to contact the webserver that hosts the website you requested. “A request” is not just a term. It really is a technical thing that happens behind the scenes.
The browser bundles up a bunch of information (What’s the exact URL? Which kind of request should be made? Should metadata be attached, etc, etc) and sends that data package to the IP address.
The data is sent via the “HyperText Transfer Protocol” (known as “HTTP”) - as discussed above it is a standardized protocol which defines what a request (and response) has to look like, which data may be included (and in which form) and how the request will be submitted.
Because HTTP is used, a full URL actually looks like this:

http://www.amazon.com

The browser auto-completes it for you.
And also there is HTTPS - it’s like HTTP but encrypted. Most modern pages use that instead of HTTP. A full URL then becomes:

https://www.amazon.com

Since the whole process and format is standardized, there is no guessing about how that request has to be read by the server. Also, your request finds the fastest possible path to the server with the specifies IP. This is not a direct journey. It requires hopping from server to server until we arrive.
The server then handles the request appropriately and returns a so-called “response”. Again, a “response” is a technical thing and kind of similar to a “request”. You could say it’s basically a “request” in the opposite direction.
Like a request, a response can contain data, metadata, etc. When requesting a page like amazon.com, the response will contain the code that is required to render the page onto the screen.
Now, What actually happens on the server?
The requested server figures out exactly what we’re asking for. The server builds up the right content, often pulling information from the database. In the end, a response has to be sent. That response doesn’t have to contain “a website”. It can contain any data - including files or images. The server responds with any combination of HTML, CSS, and JavaScript.
Some servers are programmed to generate websites dynamically based on the request (e.g. a profile page that contains your personal data), other servers return pre-generated HTML pages (e.g. a news page). Or both are done - for different parts of a webpage. There also is a third alternative: Websites that are pre-generated but that change their appearance and data in the browser.
For our simple case, we have a server that returns the code to display a website. So let’s continue with step 3.

Step 3 - Response is Parsed

The web server then sends the web page you requested back to your web browser. But web pages containing images and tons of text are too large to send as a single packet of data. So, to overcome this a single web-page gets pulverized in thousands of thousands of tiny packets of data each wrapped in the information needed to rebuild itself. The data sent over the Internet (and most networks) are sent in manageable chunks. On the Internet, these manageable chunks of data are known as packets. A packet envelops the transmitted data with address information so the data can be routed through intermediate computers on the network. Because there are multiple routes from the source to the destination host, the Internet is very reliable and can operate even if parts of the network are down.
When the web browser fetches data from an internet-connected server and it then uses a piece of software called a rendering engine to translate that data into text and images. This data is written in any combination of Hypertext Markup Language (HTML), Cascading Style Sheet (CSS), and JavaScript, and web browsers read this code to create what we see, hear and experience on the internet.
The browser receives the response sent by the server. This alone doesn’t display anything on the screen though.
Instead, the next step is that the browser parses the response. Just as the server did it with the request. Again, the standardization enforced by HTTP helps of course.
The browser checks the data and metadata that are enclosed in the response. And based on that, it decides what to do.
You might’ve had cases where a PDF opened in your browser. That happened because the response informed the browser that the data is not a website but a PDF document instead. And the browser tries to pick the best handling mechanism for any data type it detects.

Back to our website scenario.
In that case, the response would contain a specific piece of metadata, that tells the browser that the response data is of type text/HTML.
This allows the browser to then parse the actual data that’s attached to the response as HTML code.
The browser knows how to parse HTML and now simply goes through the entire response data (also called “the response body”) to render the website.

Step 4 - Page is Displayed

As mentioned, the browser goes through the HTML data returned by the server and builds a website based on that.
Though it is important to know, that HTML does not include any instructions regarding what the site should look like (i.e. how it should be styled). It really only defines the structure and tells the browser which content is a heading, which content is an image, which content is a paragraph etc. This is especially important for accessibility - screen readers get all the useful information out of the HTML structure.

So lets review, What we have learned so far?

The browser goes to the DNS server and finds the real address of the server that the website lives on.
The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client. This message, and all other data sent between the client and the server, are sent across your internet connection using TCP/IP.
If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets.
The browser assembles the small chunks into a complete website and displays it to you.

For further readings:

http://www.cs.kent.edu/~svirdi/Ebook/wdp/ch01.pdf

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

https://academind.com/learn/web-dev/how-the-web-works/