“Техническая база” для менеджеров продукта — часть 2 — frontend

6 min readJun 21, 2021

Записи из курса по technical product manager; позиционируют как: “Говори с разработчиками на одном языка”.

Это 2я часть из серии, в ней собраны: из чего состоит и как работает frontend (html, css, js); CMS; AJAX; SPA; фреймворки JS и CSS; как менеджеру работать с frontend разработчиком.
Старался писать просто/понятно, как для себя.

Ссылки на другие части в конце.

Frontend

Frontend — интерфейс взаимодействия между пользователем и основной программно-аппаратной частью (backend). Состоит из: html, css, JS, и может включать JS frameworks и CMS.

HTML — стандартизированный язык разметки (не программирования!) документов (страниц) во Всемирной паутине; обрабатывается браузерами. Состоит из блоков — тегов. Используетсья для формирования структуры страницы.

Раньше был flash, но он умер и остался только html.

CSS — формальный язык описания внешнего вида документа,
написанного с использованием языка разметки (HTML). Используется как средство описания внешнего вида веб-страниц, стиля; он не работает без html.

Формат тега: selector {property: value;}

Препроцессоры CSS: надстройка над CSS, добавляет возможности, например переменные (именуем значения и обращаемся по имени);
например: SASS, LESS

Верстка — создание структуры html и css, размещающего элементы веб-страницы (изображения, текст и т. д.), чтобы элементы дизайна выглядели аналогично макету (в браузере).
Бывает:

резиновая — элементы меняют свою ширину, зависимо от расширения (размера) экрана браузера; не подходит для mobile;
адаптивная — элементы меняют свое положение на экране, зависимо от размера, положения экрана, действий пользователей; подходит для сайтов, где нужна поддеркжа mobile;
отзывчавая — создания веб-сайта, подходящего для работы на любом устройстве с любым размером экрана, независимо от размера, платформы; делают макеты под разные устройства.

Иногда для декстопа и моб. версии делают отдельный мобильный сайт (site.com -> m.site.com); нужно для продуктов, где UX играет важную роль (магазины, биржи) или разная функциональность.

Делать адаптивную или отзывчивую верстку не дороже обычной: для этого используют библиотеки и фреймворки, где почти всё есть по дефолту. Отдельная мобильная версия — стоит денег (свой дизайн).

CMS — система управления содержимим (контентом); позволяет быстро поднять сайт, без сложной разработки. Они имеют набор стандартных фичей, но при реализации кастомных функций могут возникнуть проблемы (и это дорого).
Используется для решения задач: корпоративный сайт, интернет магазин, блок, wiki (то что стандартное и много).
Порпулярные движки: Wordpress, Drupal, Bitrix, Wiki, Opencart.

Разница между CMS и фреймворк:
cms — это готовое решение для поднятия сайта, который нужно только запустить и наполнить котнетом; почты весь код написан;
framework — это подход к разработки, который говорит (диктует) что и как нужно делать; то есть, всё придется писать почти с 0;

Java Script — язык программирования, работающий в браузере (на стороне клиента) как язык сценариев для придания интерактивности веб-страницам. Оживляет веб-страницы (и много другого делает).

Приминение:

Динамическое добавление/изменение/удаления HTML и CSS на странице;
Перенос логики (вычислений) на сторону клиента. Разгрузка Backend’а. В современном мобайле, можно отдовать рассчёты на сторону браузере клиента;
Создание динамических страниц (сайтов): контент на которых, зависит от пользователя и условий (например лента фида, сайт IMDB вместо статического лендинга, где контент собран один раз); то есть есть шаблон станицы, а JS наполняет его контентом из БД.
AJAX — Асинхронный обмен данными с сервером, без перезагрузки страницы; данные между клиентом и сервером грузятся в фоне, старница работате плавно и быстро (если нет ограничений соединения). Взаимодействует с HTTP протоколом (делает запросы в фое).
было: пользователь заходит на сайт, заполняет форму, отпралвяет на сервер, там идёт обработка и ответ, старница перезагружается;
стало: фоновый процесс, без перезагрузки страницы;
например: “бесконечно” обновление ленты, загрузка фильма и тд.
Программирование логики на стороне сервера — Node.js
То есть, теперь на JS можно писать и фронт и бэк.

Single Page Application (SPA)

Одностраничное приложение — это веб-приложение или веб-сайт, использующий единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript, обычно через AJAX. Это подход к разработке, а не технология; пишут на Angular, React.

Особенности SPA:

Стараются быть похожими на desktop приложения (легко повторить десктоп приложение);
Страница никогда не перезагружается;
Данные асинхронно запрашиваются с сервера;
URL (адресная строка) меняется в зависимости от действий пользователя;
Трудно поддается SEO оптимизации (поисковые боты ходят по страницам; много старниц — выше репутация; SPA — одна страница, контент зависит от действий / скриптов).

Например Figma: есть одна старница (оболочка), когда пользователь делает что-то на ней, в фоне вызиваються JS-скрипты (без перезагрузки), которые делают эффекты и изменения.

Например Gmail в браузере: если лазить в нём, меняется только содержимое (письма, настройки и тд) и URL (которые отвечает за состояние); всё остальное остается.

Другие примеры: Google Docs б Google Calendar, Twitter, Facebook.

Почему все сайты не на SPA?
Это экономически не выгодно (избыточно): например корп. блог — лучше делать на CMS (в нём много контента и разных страниц), лендинги — это просто одна страница. для них есть сайт-билдеры.
Для SPA нужна команда, которая напишет всё с нуля.

Решение использовать SPA или нет принимает техн. комнада после изучение требования.

Как определить что сайт на SPA?
Если старница перезагружается — обычный; если обновляеться часть страницы, элемент — то SPA.

Server side rendering (SSR): ситуация, когда часть проекта работает как SPA (запрашивает данные с бэка и отрисовывает по JS), а дургая часть — отрисовывает готовые куски HTML на бэке, чтобы поисковые боты могли видеть готовый контент.

JavaScript фреймворки

Фреймворк — набор инструментов (библиотек и готовых решений), облегчающих разработку продукта.
Нужны для упрощения разработки, дает базу, стандартных элементов (авторизация, валидация форм, работа с html, http, spa, контроль URL).

Angular JS (старый):
Фреймворк, разработан и поддерживается компанией Google.

Он дикутет структуру файлов проекта, задает рамки.

Особенности:

все для работы с данными: отображение данных, механизмы валидации;
маршрутизации (ссылки в браузере, роуты);
инструменты для взаимодействия с back end;
все для тестирования: Unit testing (на меленькие функции), End to end testing (приложение в целом), Mocks (набор тестовых данных);
очень медленно работает.

React JS:
Библиотека, разработана и поддерживается компанией Facebook.

Её подключают в проект, где нужно быстро отрисвовать много данных. Так, как он не навязывает архитектур, его можно подключить по-разному. Если нужны другие фичи (маршрутизация, зранение данных, взаимодейтсвие с данными) — нужно подключать их в проект дополнительно.

Особенности

Отображение болшого кол-ва данных;
Очень быстрый (в несколько раз Angular JS);
Очень гибкий (дружит со многими библиотеками).

Angular (новый):
Фреймворк, впитал архитектуру Angular JS, и добавил компонентный подход с React.

Подходит для больших команд и проектов.

Vue JS:
Самый новый проект, развивается комьюнити (open source); может работать и как библиотека, и как фреймворк. Можно быстро разработать работающий прототип и в целом быстрая скорость разработки.

Собрал в себе всё лучшее от Angular и React; подходит для представления данных на фронте и довольно больших проектов.

Как выбрать фреймворк?
Решает техническая команда.

Остальной зоопарк фронта:

JS можно использовать не толька для фронта.

TypeScript — язык программирования, представленный Microsoft в 2012 как средство разработки веб-приложений, расширяющее возможности JavaScript.

Особенности:

Язык со строгой типизацией;
Код написанный на TypeScript компилируется в JavaScript;
Язык обратно совместим с JavaScript (в одну сторону).

CoffeeScript — язык основанный на JS; основная фича — удобный и компактный код (по типу python); сейчас мало где применяется.

Back-end: на Node.js

Mobile apps: на Ionic (SPA на Angular, как полноценное приложение с инсталяцией из Play Store) или React Native (технология на базе React).

CSS фреймворки

CSS-фреймворк — фреймворк (точнее говорить библиотека), созданный для упрощения работы frontend специалиста, быстроты разработки и исключения ошибок вёрстки (проблемы совместимости разных версий браузеров и т. д.).

Особености:

высокая скорость создания качественной адаптивной
вёрстки;
кроссбраузерность (одинаковый вид во всех доступрных браузерах);
наличие готовых хорошо продуманных компонентов (иконки, UX);
возможность настройки под свой проект;
можно быстро начать разрабатывать интерфейсы (готовые компаненты);
легко начать разработку; большое сообщество, много статей, рецептов и видеоматериалов.

Популярные фреймворки: Bootstrap, Semantic UI, Foundation, Materialize CSS.

Взаимодействие в frontend разработчиком

Обязанности (задачи) разработчика:

верстка по мокапам и дизайну;
программирование (JavaScript в браузере);
взаимодействие с cервером через API.

Чтобы всё полчилось круто, до начала работы нужно подготовить:

мокапы (готоые прототипы с взаимодействием);
дизайн (комментарии по дизайну, шрифт, цвета, отступы);
API енд-поинты (для доступа к данным);
рабочий сервер (удаленный или на своей машине);
документация (прод, технгическая).

Дополнительные материалы

https://www.ispsystem.ru/news/how-to-separate-backend-and-frontend — Как разделить фронтенд и бэкенд.