Переход из бэкенда во фронтенд: чему я научился

Перевод статьи «What I Learned by Transitioning from Backend to Frontend Development».

Переход из бэкенд-разработки во фронтенд-разработку не так прост. Я привык работать с бэкендом. Там вы обычно строите структуры данных, пишете тесты, как в разработке через тестирование, используете уровни персистентности, репозитории, таблицы базы данных, создаете конечные точки API для фронтенда.

Список тем бесконечен. Бэкенд достаточно сложен, так что у меня не было времени изучать еще и фронтенд-разработку.

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

В этой статье я описал свой опыт перехода.

Во фронтенд-разработке UI и UX стоят во главе угла

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

Фронтенд сильно отличается от бэкенда. Здесь вы заботитесь в первую очередь о пользовательском интерфейсе и о том, как пользователь будет взаимодействовать с вашим приложением, а также замеряете количественные показатели пользовательского опыта. Бывает, что приходится проектировать UX самостоятельно, улучшая работу создаваемого приложения.

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

Фронтенд заставляет вас применять подход «UI-first» с самого начала проекта

Когда я начал заниматься собственными проектами для приобретения навыков работы с фронтендом, это очень помогло мне улучшить мое понимание работы UI. Я стал гораздо лучше разбираться в том, что происходит, когда пользователь кликает по кнопкам и взаимодействует с разными компонентами интерфейса.

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

Когда я перешел во фронтенд, все изменилось. Мне пришлось думать о том, как пользователь взаимодействует с приложением и как он его использует, нравится ли ему вообще этот опыт. И уже отталкиваясь от UI и представленных макетов, я проектировал подходящую структуру бэкенда и базы данных.

Переход во фронтенд позволяет вам задуматься над тем, как улучшить повторное использование UI

С момента появления фронтенд-фреймворков, таких как React, мы воспринимаем наш пользовательский интерфейс в виде компонентов, которые можно использовать повторно в разных местах. И это хорошо. Кроме того, прошли времена, когда мы каждый раз заново изобретали велосипед, т. е., самостоятельно придумывали, как именно использовать компоненты повторно. Сейчас это стандартизуется.

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

Появляется желание создавать собственные макеты для приложений

Умение создавать макеты для своих идей, возможно, не относится к фронтенд-навыкам напрямую, но, овладев этой наукой, я определенно стал лучше делать наброски дизайна для написания кода фронтенда.

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

Производительность в браузере и оптимизация на стороне клиента

Фронтенд-разработчика волнует не только пользовательский интерфейс. Важна также производительность клиентской стороны, поскольку пользователи будут взаимодействовать с вашим фронтендом при помощи браузеров.

Это заставило меня задумываться над тем, как поднять браузерную производительность. Использовать ли стратегии кэширования, такие как localStorage, оптимизировать ли сжатие JavaScript, использовать ли динамический импорт в сценариях?..

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

Вы учитесь создавать отзывчивые веб-страницы

Создание отзывчивых страниц это «головная боль» и одна из сложностей фронтенд-разработки. Вам нужно позаботиться о том, чтобы ваш UI был достаточно отзывчивым для работы на разных устройствах (десктопах, планшетах, смартфонах).

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

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

Вы также учитесь поглядывать на SEO

SEO это движущая сила ранжирования вашего приложения, так что важно изучить и эту область знаний.

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

Изучая фронтенд-разработку, я понял, что SEO тоже является важным навыком, благодаря которому можно повысить продажи клиентов или более успешно продвигать собственное приложение.

Вы учитесь хорошо разбираться в CSS

CSS это важная часть фронтенд-разработки. Без использования CSS-навыков, без умения с их помощью располагать компоненты вашего UI, вы просто не выживете.

Поначалу для меня это было очень сложно. Я не увлекался вопросами дизайна и не умел правильно располагать компоненты. Но постепенно практика сделала свое дело и все это стало моей второй натурой.

Так что, занявшись фронтенд-разработкой, я хорошо изучил CSS.

Вы учитесь не слишком зависеть от фронтенд-фреймворков

Должен признать, что как человек, привыкший работать с бэкендом, по части фронтенда я, в основном, полагался на фреймворки. Моей целью было просто побыстрее завершить работу над продуктом и перейти к следующему.

Работая в стартапе и имея только бэкенд-навыки, я постоянно полагался на UI-библиотеки и фреймворки, когда мне нужно было сделать выпадающее меню или боковую панель. Но все это очень быстро усложняло код фронтенда и делало его неподдерживаемым, поскольку каждый кусочек кодовой базы зависел от библиотек.

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

Вы хотите стать дизайнером

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

Работа с фронтендом определенно подстегнула мое воображение и пробудила интерес к дизайну.

Заключение

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

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

Побольше практикуйтесь. Изучайте основы и нужные вам технологии. У вас непременно получится.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]