The Client-server Model
Understand how client-server communication works by exploring the client-server model used in web development. Learn how servers provide data through APIs, enabling diverse clients like web apps and smart devices to display information. This lesson lays the foundation for consuming APIs within an Angular application.
We'll cover the following...
Client-server communication
To begin, we’ll implement a client-server model for our application. The client-server model is quite popular because of the variety of clients (devices) that we use every day to access the internet. Keeping in mind the technologies we discussed earlier, our client-server model can be separated like this:
Server:
- Database (MongoDB)
- Server/API (Node.js)
Client:
- Front-end application (Angular)
Let’s visualize how these parts communicate with each other with that client-server split in mind.
Twitter API
Consider this real-world example. When you go to the Twitter page, https://twitter.com/atommorgan, a request is made to Twitter’s API to find the user “atommorgan.” Twitter’s API then queries their database to check if the username “atommorgan” exists. If it does, it sends data containing information such as tweets or profile details back to the API. The API then returns that data in the form of JSON to the front-end client. From here, the front-end displays the user’s profile page and all their related tweets in the browser. This represents an entire client-server request-response cycle.
The server and the web generally have much greater flexibility because of this client-server split. Rather than providing web pages, it provides only the data that is used to construct web pages. With this approach, one server can power a web-based Twitter, as well as iOS and Android versions of Twitter that use their frameworks and languages to create apps.
Smart TV app
You may even own a console or smart TV with its own apps that have entirely different UIs from those on your phone. Once again, a single server can send the same data to these various clients. where the client can then decide how to visualize that data. The API server used in the client-server model will be provided for you in this course. Our goal is to consume that API within an Angular application.