Introduction

What is a Web Application?

Last week you learnt about creating static websites. The next step before moving on to creating Web Applications is to know about what is the difference between the two.

Very often, the terminologies dynamic websites and web applications are used exchangably.

A very basic and detailed answer to the difference between static websites and dynamic web applications is given here

What is the difference between a web application and a web site?

Answer (1 of 44): You've probably been using the terms 'web application' and 'website' so many times that when asked to define each of them individually or to explain the difference, you're at a loss for words. It happens when anything becomes a substantial part of our lives.

https://www.quora.com/What-is-the-difference-between-a-web-application-and-a-web-site

Components of a Web App

A web app is more of functionality than just the design. Anything worthwhile is not simple and does not come easily. Technically, a Web app is an application program that is stored on a remote server and delivered over the Internet through a browser interface. Creating and serving a web app requires

• A backend server that supplies the API endpoints to the frontend.

  Back-End Web Architecture | Codecademy

  Software engineers seem to always be discussing the front-end and the back-end of their apps. But what exactly does this mean? The front-end is the code that is executed on the client side. This code (typically HTML, CSS, and JavaScript) runs in the user's browser and creates the user interface.

  https://www.codecademy.com/articles/back-end-architecture

  

  Endpoints are important aspects of interacting with server-side web APIs, as they specify where resources lie that can be accessed by third party software. Usually the access is via a URI to which HTTP requests are posted, and from which the response is thus expected.

  An Introduction To Backend Development and REST APIs

  What do we mean by the backend of a web application? An application generally has two parts- The frontend and the backend. Many people fail to understand the concepts due to lack of clarity. So, let's take an analogy- suppose you are sitting in a car and the basic things that you can see and use are the brakes, clutch, accelerator, gear etc.

  https://medium.com/techloop/an-introduction-to-backend-development-and-rest-apis-b1a1a978821f

  

• A server environment (we shall use node) and https server that listens to server ports and sends responses from the server back to the client (Also known as MiddleWare).

  The HTTP Server Explained

  What is a server: a few notions In computing, a server is a computer program or a device that provides functionality for other programs or devices, called clients. The functionalities, or services, that a server can provide are multiple and go from sharing data or resources among multiple clients to performing computation for a client.

  https://medium.com/@gabriellamedas/the-http-server-explained-c41380307917

  

  What is Node? | Codecademy

  Learn about Node.js, a JavaScript runtime for building server-side or desktop applications.

  https://www.codecademy.com/articles/what-is-node

  

• The frontend code which will actually be running in the users' browser.

  Read the HTML, CSS and Javascript from here.

  Web Dev and playing TicTacToe

For better understanding of why backend and frontend should necessarily be well-separated, read the below article.

Web App Architecture

A little extra knowledge never goes amiss

Web Application Architecture: Definition, Models, Types, and More

The Internet is no longer about static web pages and longer loading times. Over time, the Internet has made a shift towards active user engagement as well as extended functionality by means of visually pleasing and powerful web applications. A web application is just like a normal computer application except that it works over the Internet.

https://hackr.io/blog/web-application-architecture-definition-models-types-and-more

APIs

So this week you are going to get started with using API endpoints.

For basic knowledge of APIs, take a look.

What is an API endpoint? Definition from WhatIs.com.

An API endpoint is a point at which an application program interface ( API) -- the code that allows two software programs to communicate with each other -- connects with the software program. APIs work by sending requests for information from a web application or web server and receiving a response.

https://searchapparchitecture.techtarget.com/definition/API-endpoint

We'll cover the most popular pattern of HTTP APIs, the so-called RESTful APIs next week! However for a brief intro, here you go

Understanding And Using REST APIs - Smashing Magazine

If you want to be able to read API documentations and use them effectively, you'll first need to understand everything about REST APIs. Let's get started. There's a high chance you came across the term "REST API" if you've thought about getting data from another source on the internet, such as Twitter or Github.

https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/

So much for the conceptual part, let's get started with the practical knowledge!

AJAX

Ajax stands for Asynchronous JavaScript and XML (though it is mostly used for JSON). AJAX is format and not a programming language. It is a way for web pages to pass data to and from the server without reloading the entire page.The Asynchronous comes from the fact that the request happens in the background while the user can freely interact with the page.

Most web apps use the following architecture:

• Presentation is through Browser (HTML and CSS).

• Data is exchanged between client and server in a standard language, like XML or JSON.

• Data retrieved using XMLHttpRequest objects in the browser.

• JavaScript to make everything happen.

What Is Ajax Programming - Explained - KeyCDN Support

Ajax is short for Asynchronous JavaScript and XML, which refers to a set of web development techniques rather than an actual programming language. Ajax however, is widely used in client side programming (e.g. JavaScript) to allow for data to be sent and received to and from a database / server.

https://www.keycdn.com/support/ajax-programming

Resources

Before jumping to the task, we recommend getting yourself comfortable by introducing small AJAX snippets of code through your inline <script> tags. A good place to start would thus be w3schools.

AJAX Introduction

AJAX is a developer's dream, because you can: Update a web page without reloading the page Request data from a server - after the page has loaded Receive data from a server - after the page has loaded Send data to a server - in the background In every chapter, you can edit the examples online, and click on a button to view the result.

https://www.w3schools.com/xml/ajax_intro.asp

Documentation can be found here to help you out with more advanced APIs

jQuery.ajax()

Description: Perform an asynchronous HTTP (Ajax) request. A string containing the URL to which the request is sent. A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) below for a complete list of all settings.

https://api.jquery.com/jquery.ajax/

Challenge and Submission

So much for learning, here is your next Assignment!

COPS-IITBHU/csoc-2020-task-1

In this task you will be working on a todo application made using basic HTML, CSS and JS. The main motive of this task is to make you familiar with: Rest APIs AJAX Manipulating DOM using JavaScript Follow the following steps to setup this project.

https://github.com/COPS-IITBHU/csoc-2020-task-1

All the details of the task are provided in the README.md file.

As you are aware, you need to fork from and the repository, clone the forked repository, complete the task, commit and push your changes and finally open the pull request back here.