Prior to working as an editor and content marketer at
Live Type, I spent two years studying humanitarian texts: I edited and wrote articles about fashion, music, movies, visual arts, sociology, and the like. I was required not so much to correctly convey the meaning, how to achieve a bright image, create a mood and give the reader an emotion. This unleashes hands in relations with the words: before having the exact meaning, they become raw materials for allegories, metaphors and other literary methods.
Once in technical environment, I realized that verbal decorations interfere with function. Together with the info style trend, this made me reconsider the approach to working with texts. Including the time has come to remember that each term has its own meaning.
When working on the case of the
Designet project
, I caught myself
thinking that the terms "frontend", "client side" and "interface" are synonymous. To dot the i's and not confuse them anymore, I wrote this memo. I hope that it will help not only me, but also colleagues - editors, copywriters, technical journalists, marketers, project managers and everyone who does not have a direct relationship to programming.
')

Interface
Everything that helps a person to control a tool, be it a program, a computer, a home appliance or a factory machine panel, is an interface. Interface elements are menus, buttons, keyboard, mouse, monitor, switches, toggle switches, toolbars, typing fields, error screens, and other methods of interaction and input / output information. With reference to the interface of programs and applications in the English language there is the phrase user interface (UI).
The interface is all that you see and touch.
The interface can be convenient and inconvenient. By today's standards, the criterion of a user-friendly interface is considered to be a short series of actions that do not enrage, do not confuse, do not exhaust, and ultimately give the desired. The sum of the sensations of using the interface is called interaction experience, user experience or user experience (UX). He can also be bad or good.
The Google search page interface is an example of a Zen-level UX interface.
FileMatrix File Manager is an example of a terrible interface from the discussion on Stack Overflow. Do not go, he will devour you.The more actions in the interface, the longer the user will have to wade to the functionality of the program, site or application, and the sooner he spits on it and goes to look for an interface with a single button that brings results.
Frontend
If the interface is an interlayer between the user and the code that launches the latter into operation, then the frontend is the same code. Take, for example, some Wikipedia page. To open it, we give the command to the browser: "And show." The browser requests building page material from the external server - a code. This code is executed on the page and draws what you asked the browser.
It is worth noting that often under the front-end understand web development. Due to the ambiguity in the definition, there is a dispute about how to write this term in English: separately or through a hyphen. Light on the problem sheds
this publication .
The frontend is made up of the interaction of three technologies:
- HTML (HyperTextMarkupLanguage). The markup language of the document, understandable to browsers through descriptors, or tags. HTML indicates what elements are on the page, specifies their order in the document and nesting of one into another;
- CSS (Cascading Style Sheets, or Cascading Style Sheets). Gives HTML a special look, ennobles it: it emphasizes and changes the color of links, sets the size of headers or fonts, etc .;
- Javascript A programming language that has access to the elements of the page and the browser, operates on the data in HTML and CSS and serves for them as a magic Pendel, because HTML and CSS themselves do not do anything. Using JavaScript, for example, animation and all sorts of interactive things work in the browser. There are in all browsers except Opera Mini, where it is limited by the manufacturer to simplify the work.
One press of F12, and the page shows everything that is hidden under it.Client side
A tool that receives data and displays it in a human-readable manner is called the client side, or client. This tool is a browser, a mobile application that works with data from a server, a computer, a phone, a tablet, a TV, or a radio.
These customers no one will serve.The concept of the client side emerged from the paradigm of the client-server architecture. It appeared along with the first computer networks: the developers decided that some of the shared resources could be stored outside the device. The device in this case is a client: it receives data from an external service, draws it in itself and sends the changes being made back to the service.
Fastening
The client is a device for operating with remote data.
An interface is a set of elements for controlling a program or device.
The frontend is a code adopted by the client, running on it and becoming the interface, or web development on the client side as such.
An example will help us to finally understand the difference. If you are asked, under penalty of death, to answer the question what the Chrome browser is - the client side, the frontend or the interface - feel free to answer: "The client side". And so that the enemy silently gave up his weapon, specify that a single page is already an interface, and the front end is working inside it.
It is not so scary to repeat the same term in the text as it is reckless to replace it with incorrect synonyms. If you want to point out inaccuracies and controversial points or say anything on the topic - welcome to the comments.