Техническая база для менеджеров продукта — часть 2 — frontend
Записи из курса по 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 енд-поинты (для доступа к данным);
- рабочий сервер (удаленный или на своей машине);
- документация (прод, технгическая).
