Technologies Used in Web Development Explained to Kids

This post is also available in: हिन्दी (Hindi)

The Internet has turned our existence upside down. It has revolutionized communications, to the extent that it is now our preferred medium of everyday communication. In almost everything we do, we use the Internet. Ordering a pizza, buying a television, sharing a moment with a friend, sending a picture over instant messaging. Before the Internet, if you wanted to keep up with the news, you had to walk down to the newsstand when it opened in the morning and buy a local edition reporting what had happened the previous day. But today a click or two is enough to read your local paper and any news source from anywhere in the world, updated up to the minute.

The Internet itself has been transformed. In its early days—which from a historical perspective are still relatively recent—it was a static network designed to shuttle a small freight of bytes or a short message between two terminals; it was a repository of information where the content was published and maintained only by expert coders. Today, however, immense quantities of information are uploaded and downloaded over this electronic leviathan, and the content is very much our own, for now, we are all commentators, publishers, and creators.

Technologies Used in Web Development

Modern websites are built using a myriad of technologies. While you don’t have to be an expert in these systems to manage your website project properly, it is a good idea to familiarize yourself with the basics of the available technologies and their pros and cons in order to understand the long-term impact they will have on your website. 

There is no single “right technology” for building websites. Many factors should be a part of your decision, such as your vendor’s experience, the vendor’s collective team talents, development, and licensing costs, as well as your organization’s internal guidelines, website performance, maintainability, ease of scalability for growth, and more. You should not impose a specific technology on your developer, especially if it is not their first area of expertise. Your web developer should issue a recommendation with an explanation as to why the technology they recommend is the best choice for you. 

At the same time, choosing the wrong technology or the web developer with insufficient experience in the technology can amount to a significant cost. 

These are the common technologies used in web development:

1. Browsers

A web browser is a type of software that allows you to find and view websites on the Internet. Even if you didn’t know it, you’re using a web browser right now to read this page! There are many different web browsers, but some of the most common ones include Google Chrome, Internet Explorer, Safari, Microsoft Edge, and Mozilla Firefox.

Web Browsers

No matter which web browser you use, you’ll want to learn the basics of browsing the Web. In this lesson, we’ll talk about navigating to different websites, using tabbed browsing, creating bookmarks, and more.

• URLs and Address Bar: Each website has a unique address, called a URL (short for Uniform Resource Locator). It’s like a street address that tells your browser where to go on the Internet. When you type a URL into the browser’s address bar and press Enter on your keyboard, the browser will load the page associated with that URL. For example, we type www.codinghero.ai into the address bar to visit the CodingHero website.
• Links: Whenever you see a word or phrase on a website that’s blue or underlined in blue, it’s probably a hyperlink, or link for short. You might already know how links work, even if you’ve never thought about them much before. For example, try clicking the link below. Links are used to navigate the Web. When you click a link, it will usually take you to a different webpage. You may also notice that your cursor changes into a hand icon whenever you hover over a link.
• Navigation Buttons: The Back and Forward buttons allow you to move through websites you’ve recently viewed. You can also click and hold either button to see your recent history. The Refresh button will reload the current page. If a website stops working, try using the Refresh button.
• Tabbed Browsing: Many browsers allow you to open links in a new tab. You can open as many links as you want, and they’ll stay in the same browser window instead of cluttering your screen with multiple windows. To open a link in a new tab, right-click the link and select Open link in a new tab (the exact wording may vary from browser to browser).
• Bookmarks and History: If you find a website you want to view later, it can be hard to memorize the exact web address. Bookmarks, also known as favorites, are a great way to save and organize specific websites so you can revisit them again and again. Simply locate and select the Star icon to bookmark the current website. Your browser will also keep a history of every site you visit. This is another good way to find a site you visited previously. To view your history, open your browser settings—usually by clicking the icon in the upper-right corner—and select History.
• Downloading Files: Links don’t always go to another website. In some cases, they point to a file that can be downloaded, or saved, to your computer. If you click a link to a file, it may download automatically, but sometimes it just opens within your browser instead of downloading. To prevent it from opening in the browser, you can right-click the link and select Save link as (different browsers may use slightly different wording, like Save target as).
• Plug-Ins: Plug-ins are small applications that allow you to view certain types of content within your web browser. For example, Adobe Flash and Microsoft Silverlight are sometimes used to play videos, while Adobe Reader is used to viewing PDF files. If you don’t have the correct plug-in for a website, your browser will usually provide a link to download it. There may also be times when you need to update your plug-ins.

2. HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript).

“Hypertext” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses “markup” to annotate text, images, and other content for display in a Web browser. HTML markup includes special “elements” such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <video>, <ul>, <ol>, <li> and many others.An HTML element is set off from other text in a document by “tags”, which consist of the element name surrounded by “<” and “>”.  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way.

3. CSS

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices, and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.

Following are the advantages of using CSS:

• CSS saves time − You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

4. Programming Languages

Programming languages are ways to communicate with computers and tell them what to do. There are many different programming languages just like there are many different languages (English, French, Spanish, German, etc.). One is not better than the other. Developers ty[pically are just proficient at a couple so they promote those more than others. Below are just some of the languages used in web development.

• Python: Python continues to be one of the best programming languages every developer should learn this year. The language is easy to learn and offers clean and well-structured code, making it powerful enough to build a decent web application. Python can be used for web and desktop applications, GUI-based desktop applications, machine learning, data science, and network servers. The programming language enjoys immense community support and offers several open-source libraries, frameworks, and modules that make application development a cakewalk. For instance, Python offers Django and Flask, popular libraries for web development, and TensorFlow, Keras, and SciPy for data science applications.
• Kotlin: Kotlin is a general-purpose programming language with type inference. It is designed to be completely interoperable with Java. Moreover, from the time Android announced it as its first language, Kotlin offers features that developers ask for. It effortlessly combines object-oriented and functional programming features within it. The effortless interoperation between Java and Kotlin makes Android development faster and enjoyable. Since Kotlin addresses the major issues that surfaced in Java, several Java apps are rewritten in Kotlin. For instance, brands like Coursera and Pinterest have already moved to Kotlin due to strong tooling support.  As most businesses move to Kotlin, Google is bound to promote this language more than Java. Hence, Kotlin has a strong future in the Android app development ecosystem. Kotlin is an easy-to-learn, open-source, and swift language for Android app development that removes any adoption-related barriers. You can use it for Android development, web development, desktop development, and server-side development. 
• Java: Java has been one of the most popular programming languages used for developing server-side applications. Java is a practical choice for developing Android apps as it can be used to create highly functional programs and platforms. This object-oriented programming language does not require a specific hardware infrastructure, is easily manageable, and has a good level of security. Moreover, it is easier to learn Java in comparison to languages such as C and C++. No wonder, nearly 90 percent of Fortune 500 firms rely on Java for their desktop applications and backend development projects. Despite its industry age, Java is incredibly stable and not heading for retirement anytime soon. This makes Java one of the most desirable languages among programmers in 2021.
• JavaScript/NodeJS: JavaScript (also known as NodeJS) is a popular language among developers who need to work on server-side and client-side programming. It is compatible with several other programming languages, allowing you to create animations, set up buttons, and manage multimedia. Owing to its high speed and regular annual updates, JavaScript is an ultimate hit in the IT domain. Reputed firms like Netflix, Uber, PayPal, and several startups use JavaScript to create dynamic web pages that are secure and fast. In fact, the 2018 Developer Skills Report by HackerRank shares that JavaScript is the top programming skill required by companies today. JavaScript is omnipresent in today’s digital environment. Hence, learning this language makes complete sense. 
• TypeScript: TypeScript, a superset of JavaScript is an object-oriented language that was introduced to extend the capabilities of JS. The language makes it easy for developers to write and maintain codes. TypeScript offers a complete description of each component of the code and can be used for developing large applications with a strict syntax and fewer errors. Further, it is well-structured and easy to learn. Its extended toolbox makes application development quick. Owing to the benefits it offers, TypeScript is expected to supersede JS in 2021, making it one of the most sought-after programming languages in the future. 
• Go: Go is a new system-level programming language that has a focused vocabulary and simple scoping rules. It blends the best aspects of functional programming and object-oriented styles. Go is the fastest-growing language on Github, meant to replace languages like Java and C++. A Stack Overflow survey reveals that Go is the fifth most preferred language among developers today. This is because Go solves issues like slow compilation and execution in large distributed software systems. This speed advantage has made Go a critical component of cloud infrastructure. So, if you are planning to work in a serverless ecosystem, Go is the language for you. 
• Swift: Swift is a general-purpose compiled programming language developed by Apple that offers developers a simple and cohesive syntax. It is deeply influenced by Python and Ruby that’s fast, secure, and easy to learn. Owing to its versatility and practical applications, Swift has replaced Objective-C as the main language for Apple-related applications. Further, since Swift is promoted by Apple, its popularity and community support are increasing. In fact, a study of the top 110 apps on the app store showed that 42 percent of apps are already using Swift. Coders with little or zero experience can use Swift Playgrounds to learn the language, experiment with complex codes, and work on native iOS and macOS apps. Swift is the premiere coding language that helps developers create iOS apps within a short time. The programming language opens several opportunities for new programmers, allowing them to make it big in the world of app development.

5. Frameworks

It is a software framework that was developed in order to simplify the web development process and make it easier to build a website. It includes templating capabilities that allow you to present information within a browser, provides an environment for scripting how information flows, and also contains many application programming interfaces (APIs) for gaining access to underlying data resources. Most frameworks also provide tools in order for web developers to build a content management system (CMS) for managing digital information on websites and the Internet.

A web application or development framework can be considered as a pre-built structure that handles the more repetitive processes and features involved with developing a website. This means that web developers will spend most of their time interacting with the different parts of the web framework through the use of code.

Some of the features associated with web frameworks include web caching, authentication and authorization procedures, database mapping and configuration, and URL mapping.

The most notable advantages for web developers that use a web framework are due to the fact that it is open-source, efficient, has a good level of support, has a high level of security, and includes an integration feature.

Being open-source means that web frameworks are very cost-effective for both the developer and the client. This doesn’t mean that they aren’t of good quality. Most of the popular web frameworks used by developers are free for use. Efficiency is another important advantage for web developers. This is because web frameworks eliminate the need to write a lot of repetitive code allowing developers to build websites and applications much quicker. A web framework also comes with a support team and advanced security features meaning that you can be rest assured knowing that if an issue does arise, it will be handled by a team of experts. One of the most helpful features of a web framework is its integration feature that has the ability to allow developers to link other tools such as databases to the framework.

However, saying that, developers often note that the biggest disadvantages with using a web framework are due to it being very limited in terms of making changes to the web framework. Everything from coding paradigms and design is very restrictive. This could cause frustration for web developers. Another disadvantage is that some developers find it difficult to learn the language behind web frameworks. Oftentimes, web developers will learn the framework but will not know the coding language behind it making it difficult for them to fully understand everything about the web framework itself.

Some of the commonly used frameworks are:

• Node.js: a server-side JavaScript framework
• Ruby on Rails: a full-stack framework built using Ruby
• Django: a full-stack framework built using Python
• Ionic: a mobile framework
• Phonegap/Cardova: a mobile framework that exposes native API’s of iOS and Android for use when writing JavaScript
• Bootstrap: a UI (User Interface) framework for building with HTML/CSS/JavaScript
• Foundation: a UI framework for building with HTML/CSS/JavaScript
• WordPress: a CMS (Content Management System) built on PHP
• Drupal: a CMS framework built using PHP
• .NET: a full-stack framework built by Microsoft
• Angular.js: a front-end JavaScript framework
• Ember.js: a front-end JavaScript framework
• Backbone.js: a front-end JavaScript framework

6. Libraries

Libraries are groupings of code snippets to enable a large amount of functionality without having to write it all by yourself. Libraries typically also go through the trouble to make sure the code is efficient and works well across browsers and devices (not always the case, but typically they do).

Some of the most commonly used libraries are:

• Dojo Toolkit: The Dojo is an open-source JavaScript library that helps develop cross-platform, JS, and Ajax-based websites in a faster manner. DOJO has a vast set of APIs and modules.
• jQuery: jQuery dramatically simplifies JS programming and is easy to learn and use. It is highly extensible and makes web pages load faster. jQuery wraps up a lot of standard functions making the job of the developer easy. A JS code of several lines could be just a method to be called in jQuery. It also has many plugins to perform different tasks. Some of the features of jQuery are CSS manipulation, HTML/DOM manipulation, HTML events, animations and effects, utilities, and AJAX. The best part of jQuery is the way it handles browser compatibility issues without the developer worrying about it. Some of the major IT companies like Microsoft, Netflix, and Google use jQuery. It is effortless to include jQuery in web pages.
• Google Polymer: Created by Google, Polymer is a JS library that allows developers to reuse HTML elements and create custom elements using HTML, CSS, and JS to create more interactive applications. It is compatible with different platforms. Once you install Polymer using the command line interface or the Bower method, you can reuse already developed elements without worrying about how those were created. You can also build your custom elements using polyfills i.e., web component specifications. The custom elements can be distributed across the network and used simply by importing the required HTML. To install and use Polymer, you should be familiar with node.js, npm, Bower, Git, and Polymer CLI.
• JavaScript InfoVis Toolkit: If you want to create Data visualizations that are interactive and easy to pull together, InfoVis is the way to go. The toolkits some of the most advanced visualizations like Hypertree, TreeMap, RGraph, and more apart from the usual Bar, Pie, Area, and more. Using this toolkit is an enjoyable and useful experience. It can create beautiful color-coded graphics with the necessary input information. You can get loads of effects without doing any extra coding. You can download the visualizations that you want instead of the entire package, making it not so bulky on the web pages. Since this toolkit is for data visualization, you might think it is useful for data analysts; however, you need some coding experience to use it.
• D3.js: D3 stands for Data-Driven Documents. With D3, you can apply data-driven transformations to DOM objects. The keyword with D3 is ‘data-driven,’ which means documents are manipulated depending on the data received. Data can be received in any format and bound with DOM objects. D3 is very fast and supports dynamic behavior for animation and interactions. There are plenty of already developed modules that give room for code reuse. D3 is flexible and exploits full capabilities of HTML, SVG (Scalable Vector Graphics), and CSS. D3 code is easy to debug as it uses the browser’s built-in inspector to show the path. Since D3 applies a declarative approach, it saves a developer many lines of code. D3.js is one of the most widely used JS toolkits as of now.
• Pixi.js: Pixi js can create stunning digital content. This open-source, cross-platform 2D engine helps create games and interactive, animation-based websites. Disney is one of the many big names that use Pixi to create their digital content. Pixi is a super-fast rendering engine and uses WebGL for its performance, however when WebGL is not supported, HTML canvas is used. Pixi is sturdy and straightforward as it hides the functionality of some of the most complex functions into a simple, ready to use library. If you know Adobe flash, Pixi is the easiest thing to learn next.
• SWFObject: This simple yet powerful JS library is mainly used to embed flash SWF files in HTML documents. It supports only SWF files, and no other media types can be embedded using SWFObject. There are two options – dynamic publishing and static publishing to add the markups. Many popular websites like Microsoft, YouTube, and more use SWFObject. To use this library, JS should be enabled on the user’s browser. SWFObject has many utility functions to do different tasks such as utilities to work with DOM or to identify if the latest version of the flash player is installed.
• Velocity.js: Web animation has become a breeze with velocity.js. It is a fast performance engine that simplifies website animations. It is free, open-source software. Velocity is as fast (or more) as CSS and jQuery, especially on mobile devices. We can run a sequence of animations one after the other in a neat way, unlike jQuery or CSS, where we need extensive coding. Uber, WhatsApp, HTC, and many more websites use velocity to power their UIs. Including velocity is simple – include the JS file. 
• React js: React is easy to understand and use the JS library to build user interfaces for web applications (front-view or model of MVC architecture). React is maintained by Facebook and a few other companies. React is declarative, efficient, and flexible enough to let developers build more complex UIs using the existing pieces of code, also known as components. React is fast and scalable, hence any changes to applications do not need a page to reload. 
• PHP: As the name suggests, JsPHP is a Javascript library for PHP API to be available in the JS environment. It is open-source and provides a compelling interface for JS developers who work in PHP. JsPHP can work in tandem with other libraries in an application. JsPHP supports PHP functions, including regular expressions, date-time evaluations, JSON, error handling, object manipulations, strings, XML, URL, and so on. 
• QUnit: QUnit is a unit testing tool (rather framework) that can test any generic JavaScript code. Most jQuery projects use QUnit. QUnit has become essential as JS is now integral to any web project, and manual testing of so many functionalities is complicated and unreliable. Furthermore, QUnit is powerful and easy to use. Unit tests written for one application can be reused for other applications across browsers.

7. Databases

A Web database is a database application designed to be managed and accessed through the Internet. Website operators can manage this collection of data and present analytical results based on the data in the Web database application.

Web databases enable collected data to be organized and cataloged thoroughly within hundreds of parameters. The Web database does not require advanced computer skills, and many database software programs provide an easy “click-and-create” style with no complicated coding. Fill in the fields and save each record. Organize the data however you choose, such as chronologically, alphabetically, or by a specific set of parameters.

Some of the common databases used in web development are:

• Oracle 12c: It’s no surprise that Oracle is consistently at the top of lists of popular databases. The first version of this database management tool was created in the late 70s, and there are a number of editions of this tool available to meet your organization’s needs. The newest version of Oracle, 12c, is designed for the cloud and can be hosted on a single server or multiple servers, and it enables the management of databases holding billions of records. Some of the features of the latest version of Oracle include a grid framework and the use of both physical and logical structures. This means that physical data management has no effect on access to logical structures. Additionally, security in this release is excellent because each transaction is isolated from others.
• MySQL: MySQL is one of the most popular databases for web-based applications. It’s freeware, but it is frequently updated with features and security improvements. There are also a variety of paid editions designed for commercial use. With the freeware version, there is a greater focus on speed and reliability instead of including a vast array of features, which can be good or bad depending on what you’re attempting to do. This database engine allows you to select from a variety of storage engines that enable you to change the functionality of the tool and handle data from different table types. It also has an easy to use interface, and batch commands let you process enormous amounts of data. The system is also incredibly reliable and doesn’t tend to hog resources.
• Microsoft SQL Server: As with other popular databases, you can select from a number of editions of Microsoft SQL server. This database management engine works on cloud-based servers as well as local servers, and it can be set up to work on both at the same time. Not long after the release of Microsoft SQL Server 2016, Microsoft made it available on Linux as well as Windows-based platforms. Some of the standout features for the 2016 edition include temporal data support, which makes it possible to track changes made to data over time. The latest version of Microsoft SQL Server also allows for dynamic data masking, which ensures that only authorized individuals will see sensitive data.
• PostgreSQL: PostgreSQL is one of several free popular databases, and it is frequently used for web databases. It was one of the first database management systems to be developed, and it allows users to manage both structured and unstructured data. It can also be used on most major platforms, including Linux-based ones, and it’s fairly simple to import information from other database types using the tool. This database management engine can be hosted in a number of environments, including virtual, physical and cloud-based environments. The latest version, PostgreSQL 9.5, offers larger data volumes and an increase in the number of concurrent users. Security has also been improved thanks to support for both DBMS_SESSION and expanded password profiles.
• MongoDB: Another free database that also has a commercial version, MongoDB is designed for applications that use both structured and unstructured data. The database engine is very versatile, and it works by connecting databases to applications via MongoDB database drivers. There is a comprehensive selection of drivers available, so it’s easy to find a driver that will work with the programming language being used. Since MongoDB wasn’t designed to handle relational data models, even though it can, performance issues are likely to crop up if you attempt to use it this way. However, the database engine is designed to handle variable data that isn’t relational, and it can often work well where other database engines struggle or fail. MongoDB 3.2 is the latest version, and it features new pluggable storage engines. Documents can also now be validated during updates and inserts, and the text search functions have been improved. A new partial index capability also may allow for improved performance by shrinking the size of indexes.
• MariaDB: This database management system is free, and like many other free offerings, MariaDB also offers paid versions. There are a variety of plugins available for it, and it’s the fastest growing open source database available. The database engine allows you to choose from a variety of storage engines, and it makes great use of resources via an optimizer that increases query performance and processing. It’s also highly compatible with MySQL, and it is a drop in replacement with exact matching of commands and APIs because many of the developers of MySQL were involved in its development.
• DB2: Created by IBM, DB2 is a database engine that has NoSQL capabilities, and it can read JSON and XML files. Unsurprisingly, it’s designed to be used on IBM’s iSeries servers, but the workstation version works on Windows, Linux and Unix. The current version of DB2 is LUW is 11.1, which offers a variety of improvements. One, in particular, was an improvement of BLU Acceleration, which is designed to make this database engine work faster through data skipping technology. Data skipping is designed to improve the speed of systems with more data than can fit into memory. The latest version of DB2 also provides improved disaster recovery functions, compatibility, and analytics.
• SAP HANA: Designed by SAP SE, SAP HANA is a database engine that is column-oriented and can handle SAP and non-SAP data. The engine is designed to save and retrieve data from applications and other sources across multiple tiers of storage. Along with being able to be hosted from physical servers, it can also be hosted from the cloud.

8. Client (or Client-Side)

In web development, ‘client-side’ refers to everything in a web application that is displayed or takes place on the client (end-user device). This includes what the user sees, such as text, images, and the rest of the UI, along with any actions that an application performs within the user’s browser.

Markup languages like HTML and CSS are interpreted by the browser on the client-side. In addition, many contemporary developers are including client-side processes in their application architecture and moving away from doing everything on the server-side; business logic for dynamic web pages, for instance, usually runs client-side in a modern web application. Client-side processes are almost always written in JavaScript.

In the netflix.com example above, the HTML, CSS, and JavaScript that dictate how the Netflix main page appears to the user are interpreted by the browser on the client-side. The page can also respond to ‘events’: For instance, if the user’s mouse hovers over one of the movie thumbnail images, the image expands and adjacent thumbnails move slightly to one side to make room for the larger image. This is an example of a client-side process; the code within the webpage itself responds to the user’s mouse and initiates this action without communicating with the server.

The client-side is also known as the frontend, although these two terms do not mean precisely the same thing. The client-side refers solely to the location where processes run, while the frontend refers to the kinds of processes that run the client-side.

9. Server (or Server-Side)

Much like with the client-side, ‘server side’ means everything that happens on the server, instead of on the client. In the past, nearly all business logic ran on the server-side, and this included rendering dynamic web pages, interacting with databases, identity authentication, and push notifications.

The problem with hosting all of these processes on the server-side is that each request involving one of them has to travel all the way from the client to the server, every time. This introduces a great deal of latency. For this reason, contemporary applications run more code on the client-side; one use case is rendering dynamic web pages in real-time by running scripts within the browser that make changes to the content a user sees.

Like with ‘frontend’ and ‘client-side,’ backend is also a term for the processes that take place on the server, although backend only refers to the types of processes and server-side refers to the location where processes run.

10. Front-End

The part of a website that the user interacts with directly is termed the front end. It is also referred to as the ‘client side’ of the application. It includes everything that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. HTML, CSS, and JavaScript are the languages used for Front End development. The structure, design, behavior, and content of everything seen on browser screens when websites, web applications, or mobile apps are opened up, is implemented by front End developers. Responsiveness and performance are two main objectives of the Front End. The developer must ensure that the site is responsive i.e. it appears correctly on devices of all sizes no part of the website should behave abnormally irrespective of the size of the screen. 

The front end portion is built by using some languages which are discussed below: 

• HTML: HTML stands for Hypertext Markup Language. It is used to design the front-end portion of web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. The markup language is used to define the text documentation within the tag which defines the structure of web pages.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create magic on the sites to make the site interactive for the user. It is used to enhance the functionality of a website to run cool games and web-based software.

There are many other languages through which one can do front-end development depending upon the framework for example Flutter user Dart, React uses JavaScript and Django uses Python, and much more.

• AngularJS: AngularJs is a JavaScript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It is a continuously growing and expanding framework which provides better ways for developing web applications. It changes the static HTML to dynamic HTML. It is an open-source project which can be free. It extends HTML attributes with Directives, and data is bound with HTML.
• React.js: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook. 
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
• jQuery: jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.
• SASS: It is the most reliable, mature, and robust CSS extension language. It is used to extend the functionality of an existing CSS of a site including everything from variables, inheritance, and nesting with ease.
• Flutter: Flutter is an open-source UI development SDK managed by google. It is powered by Dart programming language. It builds performant and good-looking natively compiled applications for mobile (Ios, Android), web, and desktop from a single code base. The key selling point of flutter is flat development is made easier, expressive, and flexible UI and native performance. In march 2021 flutter announced Flutter 2 which upgrades flutter to build release applications for the web, and the desktop is in beta state.

11. Back-End

The backend is the server-side of the website. It stores and arranges data, and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with. It is the portion of software that does not come in direct contact with the users. The parts and characteristics developed by backend designers are indirectly accessed by users through a front-end application. Activities, like writing APIs, creating libraries, and working with system components without user interfaces or even systems of scientific programming, are also included in the backend. 

The back end portion is built by using some languages which are discussed below: 

• PHP: PHP is a server-side scripting language designed specifically for web development. Since PHP code is executed on the server-side, it is called a server-side scripting language.
• C++: It is a general-purpose programming language and widely used nowadays for competitive programming. It is also used as a backend language.
• Java: Java is one of the most popular and widely used programming languages and platforms. It is highly scalable. Java components are easily available.
• Python: Python is a programming language that lets you work quickly and integrate systems more efficiently.
• JavaScript: JavaScript can be used as both (front end and back end) programming languages.
• Node.js: Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. You need to remember that NodeJS is not a framework, and it’s not a programming language. Most people are confused and understand it’s a framework or a programming language. We often use Node.js for building back-end services like APIs like Web App or Mobile App. It’s used in production by large companies such as Paypal, Uber, Netflix, Walmart, and so on.

12. Protocols

In the world of technology, there are vast numbers of users’ communicating with different devices in different languages. That also includes many ways in which they transmit data along with the different software they implement. So, communicating worldwide will not be possible if there were no fixed ‘standards’ that will govern the way users communicate for data as well as the way our devices treat that data. 

A protocol is a set of rules that dictate how data should be delivered over the public network (Internet). Often works in conjunction with the transmission control protocol (TCP), which divides traffic into packets for efficient transport through the Internet; together they are referred to as TCP/IP.

There are various types of protocols that support a major and compassionate role in communicating with different devices across the network. These are:

• Transmission Control Protocol (TCP): TCP is a popular communication protocol which is used for communicating over a network. It divides any message into a series of packets that are sent from source to destination and there it gets reassembled at the destination.
• Internet Protocol (IP): IP is designed explicitly as an addressing protocol. It is mostly used with TCP. The IP addresses in packets help in routing them through different nodes in a network until it reaches the destination system. TCP/IP is the most popular protocol connecting the networks.
• User Datagram Protocol (UDP): UDP is a substitute communication protocol to Transmission Control Protocol implemented primarily for creating loss-tolerating and low-latency linking between different applications.
• Post office Protocol (POP): POP3 is designed for receiving incoming E-mails.
• Simple mail transport Protocol (SMTP): SMTP is designed to send and distribute outgoing E-Mail.
• File Transfer Protocol (FTP): FTP allows users to transfer files from one machine to another. Types of files may include program files, multimedia files, text files, and documents, etc.
• Hyper Text Transfer Protocol (HTTP): HTTP is designed for transferring a hypertext among two or more systems. HTML tags are used for creating links. These links may be in any form like text or images. HTTP is designed on Client-server principles which allow a client system for establishing a connection with the server machine for making a request. The server acknowledges the request initiated by the client and responds accordingly.
• Hyper Text Transfer Protocol Secure (HTTPS): HTTPS is abbreviated as Hyper Text Transfer Protocol Secure is a standard protocol to secure the communication among two computers one using the browser and other fetching data from a web server. HTTP is used for transferring data between the client browser (request) and the web server (response) in the hypertext format, same in case of HTTPS except that the transferring of data is done in an encrypted format. So it can be said that https thwart hackers from interpretation or modification of data throughout the transfer of packets.
• Telnet: Telnet is a set of rules designed for connecting one system with another. The connecting process here is termed as remote login. The system which requests for connection is the local computer, and the system which accepts the connection is the remote computer.
• Gopher: Gopher is a collection of rules implemented for searching, retrieving as well as displaying documents from isolated sites. Gopher also works on the client/server principle.

13. API

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you plug it into a plug socket and it works. You don’t try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.

There are four principal types of API commonly used in web-based applications: 

• Public APIs. A public API is open and available for use by any outside developer or business. An enterprise that cultivates a business strategy that involves sharing its applications and data with other businesses will develop and offer a public API. Public APIs typically involve moderate authentication and authorization. An enterprise also may seek to monetize the API by imposing a per-call cost to utilize the public API.
• Partner APIs. A partner API, only available to specifically selected and authorized outside developers or API consumers, is a means to facilitate business-to-business activities. For example, if a business wants to selectively share its customer data with outside CRM firms, a partner API can connect the internal customer data system with those external parties — no other API use is permitted. Partners have clear rights and licenses to access such APIs. For this reason, partner APIs generally incorporate stronger authentication, authorization and security mechanisms. Enterprises also typically do not monetize such APIs directly; partners are paid for their services rather than through API use.
• Internal APIs. An internal (or private) API is intended only for use within the enterprise, to connect systems and data within the business. For example, an internal API may connect an organization’s payroll and HR systems. Internal APIs traditionally present weak security and authentication — or none at all — because the APIs are intended for internal use, and such security levels are assumed to be in place through other policies. This is changing, however, as greater threat awareness and regulatory compliance demands increasingly influence an organization’s API strategy.
• Composite APIs. Composite APIs generally combine two or more APIs to craft a sequence of related or interdependent operations. Composite APIs can be beneficial to address complex or tightly-related API behaviors, and can sometimes improve speed and performance over individual APIs.

14. Data Formats

Data formats are the structures of how data is used. Some of the most commonly used data formats are:

• JSON: JSON is an acronym for JavaScript Object Notation, is an open standard format, which is lightweight and text-based, designed explicitly for human-readable data interchange. It is a language-independent data format. It supports almost every kind of language, framework, and library. In the early 2000s, JSON was initially specified by Douglas Crockford. In 2013, JSON was standardized as ECMA-404, and RCF 8259 was published in 2017. JSON is an open standard for exchanging data on the web. It supports data structures like objects and arrays. So, it is easy to write and read data from JSON. In JSON, data is represented in key-value pairs, and curly braces hold objects, where a colon is followed after each name. The comma is used to separate key-value pairs. Square brackets are used to hold arrays, where each value is comma-separated.
• XML: XML stands for Extensible Markup Language. It is a text-based markup language derived from Standard Generalized Markup Language (SGML). XML tags identify the data and are used to store and organize the data, rather than specifying how to display it like HTML tags, which are used to display the data. XML is not going to replace HTML in the near future, but it introduces new possibilities by adopting many successful features of HTML.
• CSV: A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. A CSV file typically stores tabular data (numbers and text) in plain text, in which case each line will have the same number of fields. The CSV file format is not fully standardized. Separating fields with commas is the foundation, but commas in the data or embedded line breaks have to be handled specially. Some implementations disallow such content while others surround the field with quotation marks, which yet again creates the need for escaping these if they are present in the data. The term “CSV” also denotes several closely related delimiter-separated formats that use other field delimiters such as semicolons. These include tab-separated values and space-separated values. A delimiter guaranteed not to be part of the data greatly simplifies parsing.