Попав в техническую среду, я понял, что словесные украшательства мешают функции. Вместе с трендом инфостиля это заставило меня пересмотреть подход к работе с текстами. В том числе пришло время вспомнить, что у каждого термина есть своё значение.
При работе над кейсом проекта Designet я поймал себя на том, что считаю термины «фронтенд», «клиентская сторона» и «интерфейс» синонимами. Чтобы расставить все точки над i и больше их не путать, я написал эту памятку. Надеюсь, что она поможет не только мне, но и коллегам — редакторам, копирайтерам, техническим журналистам, маркетологам, менеджерам проектов и всем, кто не имеет прямого отношения к программированию.
Интерфейс
Всё, что помогает человеку управлять инструментом, будь то программа, компьютер, бытовой прибор или панель заводского станка — это интерфейс. Элементами интерфейса являются меню, кнопки, клавиатура, мышь, монитор, переключатели, тумблеры, тулбары, поля для набора текста, экраны с ошибками и прочие способы взаимодействия и ввода/вывода информации. Применительно к интерфейсу программ и приложений в английском языке встречается словосочетание user interface (UI).
Интерфейс — это всё, что вы видите и что можете потрогать.
Интерфейс может быть удобным и неудобным. Критерием удобного интерфейса по сегодняшним меркам считается короткая череда действий, которая не бесит, не смущает, не выматывает и в итоге даёт желаемое. Сумма ощущений от пользования интерфейсом называется опытом взаимодействия, пользовательским опытом или user experience (UX). Он тоже может быть плохим или хорошим.
Интерфейс поисковой страницы Google — пример интерфейса с UX уровня «дзен».
Файловый менеджер FileMatrix — пример ужасного интерфейса из обсуждения на Stack Overflow. Не лезь, он тебя сожрёт.
Чем больше в интерфейсе действий, тем дольше пользователю придётся продираться к функциональностям программы, сайта или приложения, и тем быстрее он плюнет на это и пойдёт искать интерфейс с единственной кнопкой, приносящей результат.
Фронтенд
Если интерфейс — это прослойка между пользователем и кодом, запускающая последний в работу, то фронтенд — это тот самый код и есть. Возьмём, например, какую-нибудь страницу «Википедии». Чтобы открыть её, мы даём команду браузеру: «А покажи». Браузер запрашивает у внешнего сервера строительный материал страницы — код. Этот код исполняется на странице и рисует то, что вы попросили у браузера.
Стоит заметить, что часто под фронтендом понимают веб-разработку. Из-за двойственности в определении существует спор, как писать этот термин по-английски: раздельно или через дефис. Свет на проблему проливает эта публикация.
Фронтенд складывается из взаимодействия трёх технологий:
- HTML (HyperTextMarkupLanguage). Язык разметки документа, понятный браузерам за счёт дескрипторов, или тегов. HTML указывает, какие элементы есть на странице, задаёт их порядок в документе и вложенность одного в другой;
- CSS (Cascading Style Sheets, или каскадные таблицы стилей). Придаёт HTML особый вид, облагораживает его: подчёркивает и меняет цвет ссылок, задаёт размеры заголовков или шрифты и т.п.;
- JavaScript. Язык программирования, имеющий доступ к элементам страницы и браузера, оперирующий данным в HTML и CSS и служащий для них подобием волшебного пенделя, потому что сами по себе HTML и CSS ничего не делают. С помощью JavaScript, например, в браузере работает анимация и всякие интерактивные штуки. Есть во всех браузерах за исключением Opera Mini, где он ограничен производителем для упрощения работы.
Одно нажатие F12, и страница показывает всё, что под ней спрятано.
Клиентская сторона
Средство, которое принимает данные и показывает их в понятном человеку виде, называется клиентской стороной, или клиентом. Этим средством является браузер, мобильное приложение, работающее с данными с сервера, компьютер, телефон, планшет, телевизор или радиоприёмник.
Этих клиентов уже никто не обслужит.
Понятие о клиентской стороне вышло из парадигмы клиент-серверной архитектуры. Она появилась вместе с первыми компьютерными сетями: разработчики решили, что часть общих ресурсов можно хранить за пределами устройства. Устройство в таком случае — это клиент: он получает данные от внешнего сервиса, отрисовывает их в себе и отправляет вносимые изменения обратно на сервис.
Закрепление
Клиент — это устройство для оперирования удалёнными данными.
Интерфейс — это набор элементов для управления программой или устройством
Фронтенд — это код, принятый клиентом, запущенный на нём и ставший интерфейсом, или веб-разработка на клиентской стороне как таковая.
Окончательно понять разницу поможет пример. Если от вас под страхом смерти потребуют ответ на вопрос, что такое браузер Chrome — клиентская сторона, фронтенд или интерфейс,— смело отвечайте: «Клиентская сторона». А чтобы враг молча отдал оружие, уточните, что отдельно взятая страница — уже интерфейс, а внутри неё работает фронтенд.
Не так страшно повторять в тексте один и тот же термин, как безрассудно заменять его на неправильные синонимы. Если вы хотите указать на неточности и спорные моменты или высказать что угодно по теме — добро пожаловать в комментарии.
Комментарии (53)
saw_tooth
28.02.2017 17:21Фронтенд — это код, принятый клиентом, запущенный на нём и ставший интерфейсом
А чтобы враг молча отдал оружие, уточните, что отдельно взятая страница — уже интерфейс, а внутри неё работает фронтенд
Определитесь что ли.
Free_ze
28.02.2017 20:23А если учесть, что «клиентская сторона» — это перевод термина «фронтенд»?
octob3rmut3
28.02.2017 20:35Термин «клиентская сторона» больше похож на перевод client side.
Free_ze
28.02.2017 23:39Очевидно, что это одно и то же) client side противопоставляется server side, frontend — backend.
vintage
28.02.2017 21:18+1А что такое "фронтенд сервер"?
VolCh
28.02.2017 23:32Сервер для передачи фронтенда на сторону клиента.
Free_ze
28.02.2017 23:39Только фронтенд? Данные он не передает?
VolCh
01.03.2017 07:26Грубо говоря, да. Может передавать данные через себя в режиме прокси, совсем тупого, или чутка интеллектуального, преобразующего запросы и ответы между разными протоколами и(или) форматами, но не осуществляя их семантической обработки.
Free_ze
01.03.2017 08:47А зачем это нужно в реальной жизни?)
VolCh
01.03.2017 11:02Разделять фронтенд и бэкенд. Обычный уже пример — nginx, отдающий статику и проксирующий вызовы api к json/xml бэкенду, может по http, может по, например, fastcgi или wsgi. То есть фронтенд сервер ничего не знает про данные, а бэкенд сервер ничего не знает про фронтенд, про html и css. Практическая польза — раздельное масштабирование, строгое разделение команды на фронтендеров и бэкендеров — как минимум нет споров о том, кто должен натягивать верстку на шаблонизатор бэкенд- движка :), возможность простого подключения клиентов, которые тоже ничего не знают о html/css, например нативные мобильные приложенияю
Free_ze
01.03.2017 11:17Стремление хорошее, но учитывая, насколько плотно сейчас взаимодействует фронтенд с бэкендом, то фронт должен хорошо пожирнеть в ближайшее время, хотя бы до уровня нативных мобильных приложений, чтобы такая идея окупилась. ИМХО, конечно.
VolCh
01.03.2017 11:30В том-то и дело, что благодаря технологиям типа React и Angular бэкенд-сервер уже не рендерит для фронта верстку, фронт получает статический html с одним пустым дивом, содержимого которого формирует сам. Да, ещё в функции фронтенд сервера может входить генерация первой страницы для таких сайтов, но опять же все данные он получит с бэкенд-сервера, так что последнему будет все равно, браузер к нему делает запрос или фронтенд-сервер, который отдаст результат браузеру или поисковику.
Free_ze
01.03.2017 12:00Я далек от
хипстерскогосовременного фронта, но он же не имеет доступа к файловой системе клиента и не умеет (повсеместно) в клиентские БД? То есть будут запросы к бэкенду на любой чих. Проксирование данных на «фронтовов бэкенде» — это сложное решение, как мне кажется, без особой пользы увеличивается количество подсистем, требующих поддержки.VolCh
01.03.2017 12:35То есть будут запросы к бэкенду на любой чих
Да, если не держать локальный кеш, не зависящий от HTTP заголовков.
Проксирование данных на «фронтовов бэкенде» — это сложное решение
Не понял, где проксирование?
Free_ze
01.03.2017 12:50Не понял, где проксирование?
Это я опережаю возможный аргумент, что кэшировать необходимые данные можно было бы на «фронтенд-бэкенде».VolCh
01.03.2017 13:34В целом можно. Другое дело, что кэширование по сроку редко годится для клиентских приложений, и в лучшем случае на каждый чих надо будет дергать фронтенд-сервер и получать 304 с пустым телом, если не реализовывать механизм пропихивания на клиент информации хотя бы о том, что запись не валидна больше.
vintage
01.03.2017 14:35фронтенд-бэкенде
Всё чудесатее и чудесатее.
Free_ze
01.03.2017 17:22Сам в шоке)
vintage
02.03.2017 18:16Опять сарказм не поняли..
/````````Фронтенд````````Клиент <=> Фронтенд-сервер <=> Бэкенд-сервер \_____________Сервер____________/Free_ze
02.03.2017 18:24В каждой шутке есть доля шутки. В принципе, если под «Сервер» понимать единое приложение, то SPA так и работает. Но деплой, да и вообще поддержка одного приложения — это недостаточно весело, правда?)
VolCh
02.03.2017 19:32Очень часто "Сервер" не единое приложение, а, минимум три: веб-сервер со статикой ("фронтенд-сервер"), апп-сервер и СУБД. И нормально деплоится
haiflive
01.03.2017 06:38перестал читать сразу после небрежного определения интерфейс
интерфейс — это способ общения программы с человеком или программы с программой. Может быть графический, текстовый, звуковой, нейроинтерфейс наконец…octob3rmut3
01.03.2017 07:43Мы с вами разными словами описали одно и то же. Вы говорите «способ общения», я говорю «помогает управлять» и перечисляю, за счёт чего эта помощь оказывается.
kolpeex
01.03.2017 14:05Все же нет. Интерфейс не обязательно подразумевает управление. Вот заходите вы на сайт погоды, у него есть интерфейс, который позволяет считывать необходимую информацию — при этом вы не управляете сервером погоды.
Digital_axe
01.03.2017 09:50Заминусовали автора, а он хорошее дело делает) Своего читателя текст найдет.
Ant-coding
02.03.2017 17:47Согласен. И что Вы, товарищи всёзнающие, под любым знакомым Вам материалом в комментариях какаете?
divergo
01.03.2017 11:15+2Перед тем, как потратить свое время на написание статьи, следовало проконсультироваться со специалистом с опытом.
Клиент — программа(в том числе прошивки приборов), запрашивающие данные или услугу у сервера. Услуга — обработка данных.
Клиент не оперирует удаленными данными! Он их получает от сервера и обрабатывает локально.
Сервер — производит вычисления по запросам клиентов или выполнять любую другую регулярную рабготу.
Может сам выступать клиентом при подключении к другим серверам.
Интерфейс — средство взаимодействия. Чего с чем — определяется из контекста. В литературном языке трубуется явно укзать.
Пользовательский интерфейс(UI) — средство взаиомдействия пользователя с ПО.
Порграммный интерфейс(API) — средство взаимодействия программ между собой.
Аппаратный интерфейс — взаимосвязь аппаратных компонент(шлейфы, разъемы и пр)
Фронтенд — новомодное нерусское слово. Альтернативное название — клиентский код, код обрабатывающий данные, полученные от сервера.octob3rmut3
01.03.2017 13:19Я и специалист с опытом, который меня консультировал, плюсанули бы вам, если бы не нулевая карма.
riot26
Что дальше? Расскажете чем процессор отличается от системного блока?
octob3rmut3
Как и в данном случае, это будет зависеть от внутренней потребности.
riot26
Чей внутренней потребности? Зачем рассказывать об этом хабру?
octob3rmut3
Мне не хочется повторять предисловие, но хочется спросить, где такая публикация более уместна, на ваш взгляд.
riot26
Такая обширная, когда всё можно было сократить только к пункту «закрепление» – нигде. Сокращённо подошло бы для какого-то вконтактовского паблика для начинающих, наверное. Но на хабре писать о том, что такое HTML и CSS – как минимум странно.
octob3rmut3
Идея насчёт паблика небезынтересна, большое спасибо. Когда-нибудь воспользуюсь ей.
sleeply4cat
Больше всего похоже на основательно пропущенный через копирайтера школьный учебник по информатике.
eggstream
потому что есть разрабы, на полном серьезе причисляющие ко фронтэнду серверный код, который отдает пользователю эти самые html, css и js
Free_ze
Вы считаете это бэкендом?
eggstream
мне интересно услышать ваше определение что относится ко фронтэнду, а что к бэкэнду.
если исходить из определения, что фронтэнд — это совокупность пользовательских программ, кода и статических ресурсов, выполняющихся на клиенте, а бэкэнд, соответственно, — совокупность того же, но уже на сервере, то да, — так называемый «фронтэнд сервер» — это самый что ни на есть бэкэнд
VolCh
Добавьте к определению фронтенда "и средства их доставки (опционально генерации)" и получите фронтенд-сервер, как минимум nginx/apache/iis/..., отдающий статику без дерганья приложения и проксирующий (возможно с трансформацией) запросы к динамике на бэкенд-сервер.
eggstream
то есть, человек, пишущий код для такого сервера, например на PHP будет front-end developer?
Free_ze
del
VolCh
Классические PHP-приложения объединяют в одном "инстансе" фронтенд- и бэкенд-серверы, в рамках одного процесса выполняя и бизнес-запрос (грубо — обращение к базе), и рендеринг HTML. Современные же, aka "(микро)сервисы", не рендерят HTML, отдавая либо непосредственно клиенту, либо фронтенд-серверу только данные, например в JSON/XML, обрабатывая только бизнес-запрос.
eggstream
еще более сузим вопрос.
человек, который пишет ту часть кода, которая отвечает за получение данных с app-сервера а не html (twig,jinja etc) — тоже front-end developer?
и да, вам не показалось, я действительно хочу довести ситуацию до абсурда, когда белое будет названо черным
VolCh
В общем и в целом, да. Не думаю, что играет большое значение, где исполняется код обращения к апп-серверу, на клиенте или на рендер-сервере.
Free_ze
Я бы предпочел не заострять внимание на технической стороне, ибо реализовать можно что угодно и как угодно (да еще и спрятать это таинство от разработчика, как ASP.NET Web Forms, а жесткие определения здесь невозможны без кучи уточнений.
Когда специалисты говорят о фронтенде, они имеют в виду чать логики, которая непосредственно относится к интерфейсу, то есть серверные шаблоны пишут фронтенд-разработчики, бэкенд лишь просовывает туда данные.