Что-такое фронтенд
Устройство сайта делят как минимум на две части: front-end (фронтенд, то что видит пользователь и это работает на клиенте), и back-end (бэкэнд, или то, что работает на сервере). Первой части и будет посвящен цикл из пяти статей.
Клиентом, то есть тем, что позволяет обрабатывать содержимое (далее контент) сайта, может быть:
1. Привычные всем браузеры на настольных компьютерах,
2. Мобильные браузеры,
3. Встроенные в приложения браузеры (часто это можно видеть в мобильных приложениях, например в приложениях ВК, Twitter, Telegram),
4. Текстовые (!) браузеры. Есть и такая экзотика: браузер lynx например, который работает из командной строки в символьных терминалах,
5. Иные клиенты: те, которые не отображают содержимое сайта как есть, а преобразовывают и извлекают информацию из ответа сайта. Это, например, поисковики, различные агрегаторы (RSS, торговые каталоги), а также такие страшные штуки как скраперы - роботы, которые "грабят" (от англ. grab) контент с сайтов.
Последние два варианта мы рассматривать не будем - они все же не целевая аудитория вашего сайта, которые в будущем воспользуются вашими услугами или купят ваши товары.
Из чего состоит фронтенд
Привычные нам браузеры - это среда для отображаения HTML, его оформления с помощью CSS и обработки событий в нём с помощью Javascript.
1. Браузер получает ответ от сайта, и это практически всегда HTML (если только это не файл или специализированный тип контента - медиа например),
2. Браузер подгружает запрашиваемые HTML-страницей файлы стилей (CSS) и скрипты обработки событий на странице (Javascript).
3. Последующий процесс отображения страницы, который вы наблюдаете каждый день, называется рендеринг (rendering), то есть собственно "отрисовка".
HTML (hypertext markup language) - это, исторически, формат разметки текстов со ссылками. Оформляя тэгами текст, мы информируем браузер, чем этот текст является. Уже достаточно давно действует стандарт HTML5 - это набор тэгов, которые вполне покрывают распространенные типы контента. Например, это тэги video, figure (изображение), и многие другие. Использовать подходящие тэги - это самое правильное решение. Сейчас всё давно уже движется к так называемому "семантическому веб", то есть когда тэги описывают своё содержание. На это полагаются и поисковики, когда выбирают более релевантный под запрос контент, на это полагаются и браузеры при отображении.
CSS (Cascade StyleSheets) - таблицы стилей. Это инструкции, каким образом содержимое тэгов отображать. То есть каждому элементу в HTML-документе, или сразу нескольким (это задается так называемыми селекторами), можно сопоставить правила их оформления (рамки, цвета, размеры и другие свойства).
Javascript - это высокоуровневый интерпретируемый язык программирования, выполняемый браузером. Основное, что следует знать - браузер может вызывать по сопоставленным событиям некоторый код, и наоборот, некоторые события и действия с браузером (и контентом) может выполнять и Javascript.
Что еще?
Пока, не вдаваясь в подробности, существуют также манифесты (web manifest), которые браузеру подсказывают поведение страницы для частных случаев (например, на мобильных устройствах).
Важно отметить, что страницы (сайты) имеют возможность хранить на стороне клиента (браузера) данные. Самый простой способ - технология Cookie (хранение небольших данных в формате ключ-значение), есть и более продвинутые способы (local storage например, вплоть до хранениях небольших баз данных) - но они не всегда поддерживаются всеми браузерами.
Вариации на тему
На самом деле, для разработки фронтенда не обязательно использовать только то, что понимает сам браузер. Так, например, при разработке заменить HTML можно на Jade, CSS на SCSS, а Javascript на Typescript - все они потом будут сконвертированы соответственно в HTML, CSS, Javascript. Конвертация происходит при каждом изменении в исходной коде фронтенда, и браузер отображает уже сконвертированный результат.
При конвертации результата, конечный код CSS и Javascript часто минифицируют: попросту сжимают, для того чтобы он меньше весил и быстрее обрабатывался. Минификация - это автоматизированный процесс, вручную её никто не делает, а то, что остается после неё обычно очень плохо читается человеком. Тем не менее, она значительно ускоряет загрузку сайтов.
Положение дел
Самое интересное, что в настоящее время HTML, CSS и Javascript - это не просто способы работы с текстовыми страницами, а по сути средства верстки интерфейсов полноценных интерактивных приложений, отображаемых в браузерах (веб-приложений). Они требуют достаточно большого объема кода, но их возможности - весьма велики, и все современные Интернет-сервисы используют их на полную. Об этом и будет продолжение в следующих четырех статьях.