Чек-лист оценки фронтенд проектов

Artem “oxmap” Savin
Nov 4 · 6 min read

Основываясь на своем опыте за последний год по оценке фронтенд части в разработке ПО я составил чек-лист для ускорения оценки и повышения её качества

Предисловие

Перед прочтением чек-листа необходимо ознакомится со следующими пунктами:

0. Часто в ТЗ упускается описание технических требований, поэтому приходится уточнять требования от заказчика.

1. Требования представлены в плоской структуре, поэтому нет зависимостей и вложенности.

2. Требования охватывают все use case (которые я вспомнил). Так как невозможно описать каждый конкретный use case, были описаны все варианты требований, с которыми мне удалось столкнуться при разработке.

3. Чек-лист составляется эмпирически на основе данных оценок по последним проектам и потенциальным, будущим проектам.

Ниже и далее я опишу чек-лист, а затем распишу каждый пункт отдельно.

Чек-лист

  • Операционная система
  • Платформа
  • Разрешение экрана
  • Поддерживаемые браузеры
  • Дизайн
  • Приоритетные фреймворки
  • PWA
  • Docker
  • http/http2
  • SEO
  • Авторизация/Аутентификация
  • Интеграция со сторонними сервисами
  • Время загрузки страницы/размер страницы
  • 404 страница
  • Отображение ошибок (тултипы, тостеры, инлайн)
  • Протокол API
  • Мультиязычность
  • Реалтайм
  • Доступность
  • Безопасность
  • 3D
  • VR/AR
  • Аудио
  • Тяжелые вычисления
  • Ролевая модель
  • CMS
  • Серверный язык

Описание

1. Операционная система

В большей степени браузеры кроссплатформенные, но на практике необходимо тестировать под каждую операционную систему отдельно, так как есть задачи, которые решаются по-разному в различных операционных системах. И также некоторые браузеры специфичные для конкретной операционной системы (Mac-Safari, IE/Edge-Microsoft). Пользователи также могут запускать браузеры под виртуальной машиной, а это увеличение времени на разработку, так как необходимо разворачивать все системы локально у разработчика и необходимо прогонять функциональность на всех системах, прежде чем отдавать в тестирование/приемку.

2. Платформа (web, native[desktop, mobile, tv, watch])

В основном фронт пишется под браузеры, но также возможно писать гибридные приложения (написав 1 раз, можно запускать под разные платформы), гибридные приложения используются в противовес нативным, где код пишется отдельно под каждую платформу. Гибридные приложения позволяют писать основной код с помощью Web-view. При написании гибридных приложений возникает множество нюансов: доступ к функциональности устройства (камера, фото, датчики), специфичные функциональности для платформы(3D-touch, жесты, долгий тап). Нативные приложения имеют преимущества в тяжелых вычислениях и не требуют постоянного доступа к интернету.

3. Разрешение экрана (desktop, mobile, tablet).

С большим количеством браузеров необходимо адаптировать сайт под 3 различные верстки (desktop, mobile, tablet), и там используется как минимум 3 разных дизайна. Это усложняет процесс верстки и дизайна. Не стоит забывать, что для телефонов также нужно будет реализовывать портретный режим. Также в новых версиях телефонов присутсвует челка (iphone 10), которая тоже может поломать верстку.

4. Поддерживаемые браузеры (Chrome, Firefox, Opera, Edge, IE, Safari, Mobile browsers).

Браузеры внутри себя используют собственные движки и различные браузеры и движки реализуют не все фичи спецификаций. На сегодняшний день нет ни одного браузера (движка), который реализует всю спецификацию JS/CSS. Поэтому необходимо знать подводные камни каждого браузера, для этого необходимо пользоваться https://caniuse.com/.

5. Дизайн

Необходимо изначально уточнить как будет идти процесс дизайна. Если в команде будет отсутствовать дизайнер, то оценка со стороны фронтенд разработчика вырастет. Сейчас отработанным вариантом считается Figma или Axure (так как там виден весь процесс переходов). Также стоит учесть, что могут быть доработки со стороны дизайнера.

6. Приоритетные фреймворки

Каждый фреймворк привносит необходимый паттерн разработки. Приоритетнее использовать один из 3 фреймворков (Angular, Vue, React). Также при оценке необходимо учитывать проекты, которые уже написаны с данными технологиями, чтобы можно было наработки взять из этого проекта.

7. PWA

Pwa позволяет реализовывать следующие фичи:

  • установку на смартфоны/планшеты без AppStore;
  • работу в офлайн, благодаря кэшированию;
  • добавление пуш-уведомлений.

Также стоит знать, что это будет сайт. Перед тем как давать оценку для PWA необходимо знать поддерживает ли браузер необходимые технологии через caniuse.

8. Docker

Контейнеризация позволяет упростить разработку и тестирование. Стоит отметить, что в последнем моем проекте обкатана разработка на linux контейнерах. Для windows контейнеров внекотрых случаях не получается запустить, поэтому если платформа windows основная для приложения, то нет смысла использовать docker.

9. http/http2

Если есть возможность выбора http загрузки, то стоит выбирать http2, так как это ускоряет скорость открытия и загрузки сайта, и данные скачиваются в несколько потоков, есть возможность выставлять приоритеты для ресурсов. Но для реализации этого необходим сертификат безопасности.

10. SEO

Поисковая оптимизация необходима для продвижения сайта в поисковой выдаче. И чтобы это реализовать необходимо при разработке придерживаться концепций SEO, а это влияет на оценку.

11. Авторизация/аутентификация

При выборе метода авторизации/аутентификации меняется подход к разработке входа/выхода из приложения и api между беком и фронтом.

12. Интеграция со сторонними сервисами

При наличии интеграции необходимо детально изучить api стороннего сервиса, поддерживает ли он необходимый функционал, если нет, писать плагины, если позволяет, а если и этого нет, то указать на этапе оценки, что эта функциональность не доступна в сервисе.

13. Время загрузки страницы/размер страницы

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

14. 404 страница

404 страница обычно упускается при составлении ТЗ, и дизайнеры тоже могут ее упустить. Также необходимо ее включать в оценку.

15. Отображение ошибок (тултипы, тостеры, инлайн)

Этот момент необходимо учитывать при проработке UX, также стоит уточнять как будет устроен показ всех ошибок. Либо самим предоставлять решения, либо проработать с дизайнером.

16. Протокол API (REST, GraphQL, JsonRPC)

Выбор API напрямую влияет на оценку архитектуры, так как необходимо проработать слой между бекендом и фронтом. Некоторые протоколы (Graphql) требуют наличия определенных библиотек знаний, которыми разработчики могут не обладать.

17. Мультиязычность

При выборе мультиязычного сайта необходимо настроить процесс разработки сайта для взятия текста из json файла, в котором описаны все переводы. При специфичных языках (Арабский — слева направо, Японский — сверху вниз) необходимо адаптировать верстку.

18. Реалтайм

Некоторые задачи требуют отправки сообщений между клиентом и сервером в режиме реального времени (пуш уведомления, чаты, игры). Реализация этих фич возможна с помощью различных технологий (Web sockets, SignalR), но стоит явно уточнить, что это требуется, так как это значительно повысит стоимость разработки.

19. Доступность

Сайтом должны пользоваться следующие категории граждан с инвалидностью:

  • Проблемы со зрением: могут варьироваться от неспособности различать цвета до полного отсутствия зрения.
  • Проблемы со слухом: у пользователя проблемы с распознаванием звуков, которые звучат со страницы.
  • Проблемы с мобильностью: невозможность управлять мышью, клавиатурой или сенсорным экраном.
  • Когнитивные проблемы: пользователю могут потребоваться вспомогательные технологии для чтения текста, так что важно использовать альтернативы для текстовой информации.

Таким образом необходимо включать в оценку, если это требуется, чтобы привести сайт доступным для людей с инвалидностью

20. Безопасность

Сайт возможно взломать многими способами (как через JS, так и через HTML, CSS). Проверить безопасность можно различными инструментами, линтерами, но также необходимо прогонять тесты для этого. Кроме кода, взломать возможно на уровне протоколов API. Этот пункт косвенно придется включать в оценку. Но если есть определенные требования, которые будут проверяться, то лучше заложить больше времени в оценку.

21. 3D

Если необходимо, чтобы на сайте была 3D визуализация, то придется подключать WebGL с помощью различных библиотек.

22. VR/AR

Отображение VR/AR в браузере также возможно (как и 3D), так как используется в некоторых проектах, технология WebVR\WebAR активно разрабатывается и продвигается, но проектов мало и оценка будет большой на изучение.

23. Аудио

Через браузер возможно получить доступ к аудио через интерфейс WebAudio, также под это есть ряд библиотек.

24. Тяжелые вычисления

Для проектов, где происходят тяжелые вычисления, в которых JS может не справляться (графический редактор, игровой движок, стриминг, распознавание изображений, текстовые редакторы, удаленный рабочий стол) приходится использовать технологии, которые позволят использовать другие языки (WebAssembly), в этом случае оценку проекта придется пересматривать. Также код проекта может быть написан наполовину на JS, наполовину на WebAssembly.

25. Ролевая модель

В каждом приложении будет разграничение прав для различных пользователей, кроме того необходимо урезать функционал для разграничения прав. При необходимости администрирования сайта, оценка будет выше.

26. CMS

Система управления контентом используется при изменении контента на сервисе/сайте через веб интерфейс. Может быть внедрена в рамках ролевой модели, как админка, а также может быть предостаавлена отдельной фичей, которая влияет на оценку.

27. Серверный язык

Обычно при разработке используется C# в качестве серверного языка, но при реализации на скриптовых языках есть вероятность оценки с консультацией JS/PHP (любой скриптовый язык) разработчиков.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade