Interface (CLI and GUI) 
Tags: interface, userinterface, gui, cli
Published: 2021-06-19 00:06:55

### What is an interface?

An interface is a shared boundary through which two devices, objects or components communicate which each other or exchange information. So with this explanation, you can simply conclude that your monitor is an example of an interface because without your monitor, you might find it very difficult communicating with your computer in terms of playing graphical games, finding files, playing music, checking your CPU performance etc. So the monitor in this case is the shared boundary between you the computer user and the computer itself.


### User Interface

The term interface can be any shared boundary between two machines or components with no human involvement. But when humans come into the picture, that's when the term User interface comes into play. That is, the shared boundary between a user and a computer system or machine. There are so many types of User interfaces but just to mention a few, we have
- menu-base interface
- form-base interface
- Command Line interface
- Graphical User interface

but we are interested in just two of them from the menu above which are **Command Line interface** and **Graphical User interface**.

## Command Line Interface (CLI)
![example of a command line interface (cmder) on windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjrqny8t8ekvjnbplndr.png)

In the command line interface, users are only allowed to use the console which is the keyboard and monitor. Users only have to enter some simple commands like ls on unix and linux terminals and dir in windows command prompt and the terminal will just list the files and folders in the directory (folder).


<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd56ne8b34b1btolyy5y.png" alt="running ls command on ubuntu (WSL)">
  <figcaption>running ls command on ubuntu (WSL)</figcaption>
</figure>
<hr>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyldz9y3ezrbsn01kl39.png" alt="running dir command on windows command prompt">
  <figcaption>running dir command on windows command prompt</figcaption>
</figure>
<hr>
Since this post is just about introducing you to interface, we are not going to dive into any of the commands. I will do that in another blog post soon.

## Graphical User Interface (GUI)
The **graphical user interface** is a form of user interface that allows computer users to interact and communicate with their computers, machines or programs through graphical icons, animations, indicators, audios etc.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02gaedwgyf34fzew62sp.png" alt="windows file explorer">
  <figcaption>windows file explorer</figcaption>
</figure>
<hr>

The above image (windows file explorer) is an example of a graphical user interface because you can manipulate files and folders by interacting with icons. If you want to open a file or folder, all what you need to do is double or single click on that particular file and it will open. There is nothing like entering commands in the windows file explorer unless the situation calls for it.
<hr>
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xjl70xxx4s9u8exstv3.png" alt="github website">
  <figcaption>github website</figcaption>
</figure>
<hr>

A website can also be classified as a GUI because in the same way, you can interact with sections on the web by just clicking on icons, texts and pictures. If you want to sign up, you just simply have to click on sign up on the webpage and you are in. There is no entering of commands required.
So there you go, I hope you now know the difference between a GUI (Graphical User interface) and a CLI (Command Line Interface). You can also check out this video to get the practical feel of it

YouTube: {% youtube 9WTwW-S6G8o %}