Не реактом единым: что полезно знать современному фронтенд-разработчику
Браузерная разработка — одна из самых старых и при этом динамично развивающихся отраслей IT-индустрии. Востребованность и зарплаты разработчиков веб-приложений — фронтенд-разработчиков, только растут, но вместе с тем растут и ожидания от них. У этого есть простая причина: предметная область, ее глубина и количество нюансов — запредельно объемны, и они требуют постоянного обновления собственных знаний.
Разработчик и консультант Александр Усков рассказывает про различные аспекты веб-разработки, не связанные напрямую с программированием, владение которыми существенно повышает стоимость и полезность фронтенд-разработчика в современных бизнес-структурах.
Особенности различных браузерных платформ
Основной язык разработки под веб — Javascript, который прошел долгий путь развития и изменился с момента своего создания практически до неузнаваемости. С другой стороны, примерно такой же путь прошли все браузеры. В июне 2022 года была прекращена поддержка Internet Explorer, который немного не дожил до своего 27-летия, но последние его версии все еще активно используются в некоторых сегментах и регионах. Например, практически вся инфраструктура государственных служб Японии рекомендует использовать IE как основной браузер, а часть их сервисов просто не поддерживает ничего другого.
IE всегда славился в коммьюнити своими «особенностями» и категорическим нежеланием соответствовать стандартам W3C. Это привело к тому, что поддержка любого веб-приложения для IE делает разработку особенным сортом мазохизма, но на 2022-й год — это просто материал для анекдотов, чем реально востребованные знания.
На смену Internet Explorer пришел Edge — браузер на базе опен-сорс движка Chromium, который также лежит в основе Chrome, Brave и Яндекс.Браузера. Популярность этого движка сделала рынок браузеров чуть более однородным — на Chromium приходится около 60% всех пользовательских сессий в вебе в целом и более 70% в российском сегменте интернета.
Однако на рынке всегда должна быть белая ворона, и на данный момент ей является браузер Safari от Apple. Иногда он ведет себя совершенно уникальным образом, и это поведение даже отличается между версиях для настольных компьютеров (MacOS) и мобильных устройств (iOS). Кроме этого, еще вполне жив Firefox, есть собственный браузер у устройств Samsung, установленный и на их телевизорах, а в азиатском мире доминирует UC Browser, который имеет более миллиарда пользователей в Индии, Индонезии и Китае. В мире также остается существенное количество поклонников браузера Opera, который уже снят с поддержки разработчиками. Эти браузеры с разной скоростью внедряют новые стандарты разработки, причем это относится не только к стандартам Javascript/ECMAScript, но и к HTML/CSS, а также к поведению различных интегрированных в них функций операционной системы, вроде уведомлений или потокового видео.
При разработке сложных и инновационных веб-приложений зачастую приходится подробно изучать, что из хотелок заказчика/продакта/дизайнера вообще можно реализовать в разных браузерах. И тут же приходится думать, что делать, если определенную функциональность нельзя предоставить из-за отсутствия поддержки этого браузера. Хорошего фронтенд-разработчика от великого как раз отличает опыт в решении таких задач, умение изучить все аспекты и предугадать возможные ошибки — раньше, чем это сделают пользователи. Важным подспорьем в постижении веб-стандартов является сервис caniuse.com и документация от MDN, где практически во всех статьях присутствует табличка с поддержкой в разных версиях браузеров.
Search Engine Optimization или SEO
Фронтенд — это не только различные браузерные приложения для бизнеса, но и любые сайты. Иногда одно перетекает в другое, как и у Хекслета. Если ваше приложение является публичным продуктом, то поисковый трафик — основной канал привлечения пользователей. При этом поисковые системы не спешат раскрывать подробности своих алгоритмов, поэтому практически весь накопленный опыт в продвижении сайтов (SEO) является эмпирическим и быстро устаревает.
При этом любые действия, направленные на продвижение сайта, имеют сильно отложенный эффект — поэтому непросто связать то или иное улучшение с конкретными действиями или внедренной фичей. Для супервайзинга SEO часто привлекают отдельных специалистов и подрядчиков, но их работа все меньше сводится к «внешним» действиям, и все больше требует технической оптимизации самого сайта. Поэтому важно, чтобы фронтенд-разработчик умел делать веб-приложение эффективным для поисковых систем при помощи:
— Правильной семантики HTML
— Микроразметки
— Настройки заголовков ответа сервера
— Сегментирование неиспользуемого кода
— Различных видов карт сайта
— Улучшения метрик Lighthouse.
Опытный фронтенд-разработчик может сделать для повышения позиций сайта в выдаче не меньше, чем профессиональный SEO-специалист. Особенно это ценно в разработке и поддержке уже зрелого приложения, так как практически любая доработка, может повлиять на уже существующие поисковые позиции: из-за верстки, увеличения времени отклика страницы, избыточного объема кода и т. д.
Понимать, как это работает, а также учитывать SEO при проектировании решений — один из очень ценных вторичных навыков для разработчика веб-приложений.
Оптимизация производительности страниц и UX
Поисковые системы все больше внимания уделяют пользовательскому поведению на сайте. Google, Яндекс и другие поисковики получают массу информации о том, как пользователь взаимодействует с каждым ресурсом. Делают они это при помощи встроенных на практически каждом сайте систем аналитики, рекламных сетей, а также непосредственно из собственных браузеров. После анализа активности пользователей они отдают предпочтение сайтам, на которых пользователь проводит больше времени, реже уходит со страницы (т.н. показатель отказов) и максимально быстро получает нужную информацию. В общем, для поисковых систем важны польза и эффективность сайта для пользователя.
Эти же показатели напрямую влияют на конверсионные и бизнесовые метрики продукта. Пользователи более лояльны к плавно работающему и наглядному интерфейсу, чем к запутанному и тормозному. И чем проще и быстрее приложение решает задачу пользователя — тем больше шансов, что он воспользуется им вновь (кстати, это актуально не только для веб-приложений, но и для мобильных и десктопных продуктов). Во многом ответственность за это лежит на дизайнерах и продуктовых менеджерах, но некоторые аспекты непосредственно находятся разработчика.
Одним из самых значимых наборов UX-метрик является Core Web Vitals, который измеряет и уже выше упомянутый Lighthouse. Эти метрики на 100% зависят от того, как именно реализовано приложение, при этом влиять на них могут самые разные факторы: настройки кэширования, управление рендерингом, количество и формат запросов, объем и скорость работы JavaScript-кода, критический путь загрузки. Кроме того, для качественного UX имеет значение отзывчивость элементов интерфейсов и анимаций, о чем важно помнить при их разработке.
Оптимизация UX-метрик — одна из самых сложных и обширных тем в веб-разработке. Она требует не только опыта, но и глубокого понимания нюансов JavaScript и используемых фреймворков. Обязательным навыком для этой работы является использование профайлера в отладчике, а также знание отладчиков самих фреймворков, особенно React и Redux. Владение этими инструментами и понимание упомянутых нюансов помогает разработчику лучше понимать требования бизнеса и оказывать непосредственное влияние на создание продуктовой ценности.
Оптимизация изображений и видео
Современные сайты и приложения используют все больше мультимедийного контента, который потребляет намного больше трафика, чем клиентский код и разметка. Для пользователей мобильных устройств это может быть особенно заметно.
Отрисовка изображений на конечном устройстве может быть ресурсоемкой и даже создавать тормоза на слабых устройствах, особенно старых — это очень негативно влияет на пользовательский опыт. Кроме того, если приложение находится под высокой нагрузкой, то каждый лишний килобайт, передаваемой с серверной инфраструктуры, — лишнее время ожидания для всех пользователей и дополнительные расходы на трафик. Ведь один килобайт, помноженный на миллион пользователей — это уже гигабайт, а за него нужно будет платить. Частично эту проблему можно отнести к верстке, а не к программированию — как минимум, важно уметь правильно выбрать подходящий формат для каждой картинки грамотно использовать масштабирование изображений. Но есть другие техники, которые просто версткой уже не решаются — кэширование, использование спрайтов и разных форматов в зависимости от поддержки в браузере, автоматическая компрессия при сборке проекта. Высший пилотаж — это ручная оптимизация изображений с учетом особенностей целевого формата. Фронтендеры с такими навыками особенно востребованы в дизайн-бюро и диджитал-интеграторах.
Бизнес-аналитика (BI)
Технологии сбора и анализа данных позволяют строить продуктовые гипотезы и искать точки роста, а их эффективность давно доказана. Для того, чтобы эти данные проанализировать, их надо куда-то отправить с устройства конечного пользователя, а перед этим изолировать и разметить интересующие пользовательские события.
Для этого существуют традиционные инструменты, такие как Яндекс.Метрика, Google Analytics и Google Tag Manager. Есть и более специфические, такие как AdSense и Facebook Pixel, а также множество платных комплексных аналитических продуктов. Существуют и чисто инженерные системы мониторинга — Sentry и Prometheus. И все их нужно интегрировать в программную базу приложения. В крупных проектах могут быть сотни таких систем слежения, а пользователи часто активно противодействовуют сбору этих данных при помощи расширений для браузера, например, AdBlock. Иногда браузеры делают это за них — например, Intellectual Tracking Prevention в Safari.
Бизнесу нужны данные о максимально широком спектре пользователей, которые поступают непрерывно. Поэтому сейчас очень востребованы понимание принципа работы подобных систем, навыки их внедрения и решение типовых проблем, которые с ними связаны. В отдельных случаях разработчику приходится разрабатывать подобные системы с нуля, особенно в BigTech. В таком случае особым преимуществом разработчика является умение самостоятельно проанализировать полученные данные и использовать их для решения технических проблем, расширения перечня поддерживаемых устройств и браузеров, разработки гипотез о дополнительной ценности продукта. Имея подобные знания и опыт, разработчик не только становится ближе к бизнесу, но и открывает себе карьерные перспективы за пределами разработки, например, в продуктовую работу или в техлиды.
Это далеко не полный список тем, в которые может погрузиться фронтенд-разработчик. Например, есть огромное количество новомодных браузерных API, в каждом из которых есть своя специфики и глубина. И, конечно, научиться всему перечисленному можно только в боевых условиях, то есть на опыте.
Не стоит фокусироваться на чем-то одном, что вам уже хорошо известно. Пожалуй, главная прелесть фронтенда — в бесконечных творческих и профессиональных возможностях. И для этого даже не надо выходить за пределы JavaScript.
