Перед вами карта компетенций системного аналитика и сегодня мы поговорим про фронтенд.
Дизайн и верстка
Для начала владелец продукта, команда и дизайнер обсуждают так называемый CJM (customer journey map), то есть по сути то, как клиент будет использовать приложение и то, каким он должен его видеть. На основании этого дизайнер создает статический макет приложения. Чаще всего это делается в приложениях тип Figma. На основании такого макета при помощи HTML и CSS верстается интерфейс. HTML отвечает за разметку страницы (то есть то, какие элементы будут на нашей странице и в каком порядке они будут расположены), а CSS за то, как они будут выглядеть, какого они будут размера, какой будет шрифт и форматирование у текстовых полей.
Верстка + данные + js = интерфейс
Когда верстка готова, её нужно оживить. Страница получает с бекэнда данные в формате json, где хранится наполнение соответствующих элементов (заголовки, тексты, картинки и так далее). Все это мапится на страницу при помощи Java Script (ну или php, или любого другого подходящего языка программирования, который в той или иной степени понимается браузером). И мы получаем красивую страничку с какими-то данными, картинками, ссылками и так далее. Но, как говорится, есть нюанс. Дело в том, что, если данные изменились только в одном элементе страницы, её все-равно придется перезагрузить полностью, чтобы отобразить новые данные. Это работает медленнее и может немного раздражать пользователя.
JS фреймворки
Чтобы решить эту проблему, в Java Script есть различные фреймворки. Пожалуй, самый популярный, это react. Тут приложение разбивается на компоненты. Например, заголовок страницы, меню, главная часть страницы и галерея (обычно еще добавляется футер, но тут мы этот момент опускаем). И так называемые хуки в фреймворке react позволяют обновлять только отдельные компоненты в случае изменения данных в них. Например, если с бэкенда нам приходят изменения только в компоненте gallery (галерея с картинками), то на странице меняется только она. Перезагружать всю страницу уже не нужно. Это быстрее работает и меньше раздражает пользователя.
Заключение
В заключении повторим основные моменты:
- Сначала создается макет интерфейса в Figma, например.
- Потом интерфейс верстается при помощи HTML и CSS.
- После чего мы оживляем интерфейс и учим его динамически принимать и мапить данные с бэкенда.
- А чтобы при каждом изменении не приходилось перезагружать страницу целиком, используются различные фреймворки типа react.