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
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.
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.
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 frontend code which will actually be running in the users' browser.
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
So this week you are going to get started with using API endpoints.
For basic knowledge of APIs, take a look.
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
So much for the conceptual part, let's get started with the practical knowledge!
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.
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.
Documentation can be found here to help you out with more advanced APIs
Challenge and Submission
So much for learning, here is your next Assignment!
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.