Мы живем в динамичном и технологическом мире, где люди уже привыкли иметь доступ к интернету в любой точке, искать различную информацию и удаленно покупать товары, заказывать продукты, такси или другие услуги. Приложения, веб-приложения и сайты стали частью нашей жизни. Они дают нам возможность круглосуточно получать доступ к тому, что нам важно в конкретный момент.
Все, что мы видим в интерфейсе, чем мы пользуемся и с чем взаимодействуем, — результат кропотливой работы фронтенд-разработчиков. Сейчас от них ждут не только визуальной красоты, емкого кода для быстрой работы, но и адаптивности сервисов к изменениям. Как устроен фронтенд, чем занимаются фронтенд-разработчики и с какими новыми вызовами они сталкиваются, рассказывает ведущий разработчик департамента разработки диджитал-продуктов билайна Андрей Сухов.
Что такое фронтенд?
Фронтенд (Frontend) — это разработка визуального интерфейса и функций сайта/приложения, которые видит пользователь и с которыми он взаимодействует. Фронтенд-разработчики работают с командой дизайнеров, кодеров и специалистов по пользовательскому опыту, чтобы создать продукт, который будет привлекательным и удобным для пользователя.
Чем отличается фронтенд от бэкэнда?
Если мы говорим, что фронтенд — это визуальный интерфейс, что видит пользователь, то бэкенд — это его «начинка». То есть первое — это внешнее представление, второе — внутренняя реализация. Направления даже могут быть не связаны с друг другом технически. Это позволяет использовать различные инструменты для более эффективной реализации внутренней и внешней частей системы.
Из каких частей состоят приложения/сайты?
Сегодняшние сервисы — это сложные системы, которые могут взаимодействовать между собой множеством разных способов. В нашем арсенале десятки инструментов для самых разных целей, и целые команды из очень увлеченных людей трудятся над тем, чтобы сделать эти инструменты еще лучше. Но, несмотря на эту сложность, любой сайт и приложение по большому счету состоит из серверной и клиентской части. Можно сравнить, например, с работой кафе. Клиентская часть — это зал, в который приходит гость, и пространство, где он общается с персоналом, а кухня — место, где обрабатывается и выполняется заказ. В случае с веб-приложениями клиентская часть — это сам интерфейс (то, что видит и с чем взаимодействует пользователь), а серверная — это бэкэнд (то, откуда запрашиваются и хранятся данные).
Как создается фронтенд?
Популярные инструменты разработки фронтенда — HTML, CSS и JavaScript. Расскажу о них подробнее.
HTML — это язык разметки. По сути, каркас любого приложения. Это одна из самых первых технологий, которые появились в вебе, без нее было бы невозможно отобразить содержимое страницы. С момента появления интернета и первой веб-страницы HTML прошел огромный путь. В первом стандарте можно было лишь отобразить текст, а возможности современного стандарта (пятого по счету) уже позволяют встроить интерактивные элементы, такие как видеоплеер, и сделать это даже без написания кода. По сути HTML — это то, из чего состоит веб-приложение.
CSS — помогает работать с визуальным оформлением приложения. Он определяет, как будет выглядеть сайт. Им можно раскрасить кнопки, добавить красочные анимации или, наоборот, сделать приложение простым и функциональным; все зависит от задач, которые вы перед собой ставите. Современный CSS состоит из огромного количества самых разных возможностей, начиная от инструментов для управления типографикой, заканчивая свойствами, которые помогают управлять поведением целых блоков страницы: например, сделать так, чтобы блок с важными для пользователя данными всегда был на странице.
Чтобы вдохнуть в приложение жизнь, мы используем JavaScript. Вот тут и начинается самая настоящая магия, ведь JavaScript, в отличие от HTML и CSS, это уже полноценный язык программирования. Интересный факт: первая версия этого языка была реализована всего лишь за несколько недель для очень простых задач, например, чтобы скрывать и отображать какой-нибудь блок на странице по одному нажатию. Наверное, мало кто мог бы предположить, что с помощью все того же JavaScript через пару десятков лет разработчики будут создавать безумно сложные вещи — приложения со сложной бизнес-логикой, карты и игры в браузере.
Для современной разработки важно делать продукт быстро, и в этом нам помогает огромная инфраструктура, которая развилась вокруг JavaScript. Что интересно — почти все инструменты бесплатные, и большая часть фронтенда сделана с использованием open source-технологий, разработанных энтузиастами и доступных любому разработчику, который захочет сделать что-то на их основе.
Клиентская часть любого более-менее сложного приложения собрана на основе этих трех технологий, описанных выше. Они не исключают друг друга, а дополняют, так как используются для разных целей.
Какие новые вызовы и как развиваются проекты?
В нашей команде фронтенд-разработчиков билайна мы делаем такие сервисы, в которых даже небольшой кусочек интерфейса может содержать десятки пользовательских сценариев, а потому используем множество вспомогательных инструментов. На первый взгляд может показаться, что какая-нибудь маленькая кнопка на сайте или в приложении устроена очень просто, но, по факту, работа над ней может занять у команды разработчиков десятки часов. Ведь, чтобы ее запрограммировать надо учесть все сценарии. Кроме того, необходимо, чтобы код занимал как можно меньше места, это нужно, чтобы сервис имел высокую скорость загрузки и пользователь мог сделать то, зачем пришел. В современном мире это очень важная метрика, которая напрямую влияет на то, сколько у вас будет посетителей.
Наша задача не только сделать так, чтобы интерфейс работал быстро, отзывчиво, был интерактивным, но и адаптивным под разные виды устройств. Некоторые используют сервисы в основном с компьютеров и ноутбуков, другие же пользователи чаще открывают их на мобильных устройствах. Некоторым иногда удобно открыть вебсайт с часов. У разных девайсов свои особенности работы, и могут возникать специфические ошибки. Чтобы это проверять, команды разработки и тестирования заводят целые шкафы с самыми разными моделями гаджетов. Современные приложения должны полноценно работать везде.
Конечно, как и в любых вещах связанных с визуальным восприятием в интерфейсах есть тренды. То в моде скевоморфизм (это когда иконки похожи на реальные предметы из жизни), то плоские интерфейсы (объекты изображаются без передачи объема). Люди, которые разрабатывают инструмент и внедряют его, внимательно прислушиваются к голосу общества и пользовательским предпочтениям.
В своей команде мы регулярно работаем над тем, чтобы сделать сайт билайна быстрее и удобнее для пользователя. Мы следим за гигиеной проекта, архитектурой, и внедряем свежие технологические решения. Это нужно, чтобы не допустить ошибок в работе приложения, а также создать возможность для доработки проекта под новые требования бизнеса.
