Продолжаем наш разговор о современной фронтенд-разработке с Алексеем Мартыновым, разработчиком и предпринимателем с более чем 20 годами опыта в ИТ. Алексей — программный директор на веб-факультете Практикума и технический директор в проекте Akil.io. Он часто работает с джуниорами и знает, с какими проблемами и задачами они чаще всего сталкиваются на старте.
Как новичку набить руку во фронтенде
Фронтенд — иногда очень большое и размытое направление. Когда начинающие программисты после курсов смотрят на всё это многообразие выбора будущей работы, то часто возникает вопрос: «А с чего мне будет проще начать применять все знания на практике?»
Смотрите, есть один максимально простой и безболезненный способ освоиться во фронтенде — начать с создания типовых сайтов на какой-либо CMS, хотя бы в том же Вордпрессе или Joomla. Там как раз используются самые базовые технологии: CSS, JS, иногда jQuery и простые фреймворки. На таких проектах можно легко набить руку, освоиться в том, какие сейчас вообще требования к сайтам у клиентов и какими способами можно решать эти задачи.
В итоге вы закрепляете фундамент, полученный на курсах, тренируетесь в создании и настройке интерфейсов и делаете для себя выводы, что стоит подтянуть, а что вы уже знаете на достаточном уровне. Потом можно развиваться в продуктовой компании, в более серьёзных приложениях и в большом количестве пользователей. А с этим ростом будет повышаться и ваш скил как фронтенд-разработчика.
👉 Самая частая и популярная задача в типичной компании, которая занимается созданием сайтов на потоке, — немного поправить дизайн и логику работы некоторых элементов или блоков. Для этого нужно уметь залезть в код, посмотреть, из каких кирпичиков CMS собирает страницу, и понять, что там нужно поменять, чтобы получился требуемый результат. И знание PHP здесь тоже вполне может пригодиться.
А для сложных интерфейсов уже нужно знать современные фреймворки: React, Vue и Angular, а также подходы к разработке сложных интерфейсов. Но всё это дают на курсах, поэтому проблем обычно здесь тоже нет.
Чистая вёрстка — это про фронтенд?
Технически — да.
Это можно отнести к основам фронтенда, но это немного скучная часть работы (хотя многим нравится заниматься только этим). По сути это несложная задача: берём макет, который нарисовал дизайнер, берём HTML и CSS и переводим макет в код.
Здесь может показаться, что чистому верстальщику не нужно знать JavaScript, но это не совсем так. Почему — разбираем дальше.
Можно ли обойтись без JavaScript
Сейчас мало какие макеты верстаются без скриптов. К примеру, практически везде есть формы: они требуют валидации, отправки на сервер и так далее. И чтобы с ними работать, уже нужно знать JavaScript: какие там есть методы, логика и инструменты для того, чтобы отдавать данные со страницы куда нужно.
А если на сайте есть какие-нибудь маркетинговые или SEO-инструменты, без JavaScript тем более не обойтись.
Нужно ли фронтендеру знать бэкенд
Фронтенд без бэкенда почти не существует, если не считать какие-то очень маленькие или очень простые приложения, где всю логику можно реализовать, например, на JavaScript. Большая часть приложений всё-таки так или иначе будет взаимодействовать с сервером через API (в том чисте REST или GraphQL). Чтобы со всем этим полноценно работать, нужно хотя бы на начальном уровне знать про сокеты, протоколы, понимать, как они устроены, и уметь с ними работать.
Дело в том, что архитектура приложений становится всё больше, появляются базы данных, результат работы сервиса всё больше зависит от других приложений и служб, и те подходы, что раньше были только на бэкенде, постепенно перетекают во фронтенд.
👉 Современному фронтенд-разработчику очень хорошо бы иметь представление о том, как устроен бэкенд, и уметь выполнять базовые операции, например отправить что-то на сервер или получить с сервера (и это как раз про API). А дальше всё зависит от желания развиваться в сторону фулстека :)
Насколько страшно вообще погружаться в бэкенд
Начинающие фронтенд-разработчики, когда слышат слово «бэкэнд», иногда впадают в панику. Для многих это такой неведомый зверь, где бродят нейросети, серверы, Линукс, бородатые сисадмины в свитерах с оленями, которые хмуро смотрят на логи в консоли, и всё такое.
Но на самом деле бэкенд — полезный инструмент для фронтендера, потому что с помощью бэкенда, например, можно как минимум сохранять данные, которые вы создаёте на страницах. Не в локальном хранилище браузера (localstorage), а на сервере, который не зависит от софта пользователя.
Представим типовую страничку интернет-магазина. Она будет совершенно бесполезна, если пользователь сможет по ней ходить, добавлять товары в корзину, но заказать — нет. Знание бэкенд-технологий как раз нужно для того, чтобы товары сохранились в корзине, а заказ ушёл на сервер и там в итоге его обработали.
Чаще всего для этого используется однотипный код для простых решений: отправить запрос, убедиться, что он принят, получить обновлённую информацию от сервера. И всё это остаётся типовым и простым, пока в проекте нет большой пользовательской нагрузки и нет обработки больших массивов данных.
👉 Задача фронтендера — это по большей части отправить данные на сервер с помощью стандартного запроса или получить таким же образом какие-то данные оттуда. Всё это описано в документации, с примерами и особенностями, просто можно брать, копировать и пользоваться.
Если хочется ещё больше упрощения, то можно использовать любые стандартные решения, например Strapi — это фреймворк, который позволяет прямо в интерфейсе настроить и создать вам бэкэнд. Но это не единственный инструмент — их много и легко подобрать нужный под свою задачу.
Нужен ли особый склад ума, чтобы заниматься фронтендом
Есть очень распространённый миф, что фронтендеру нужна математика и у него обязательно должен быть технический склад ума. Но есть много классических гуманитариев, которые прекрасно работают в этой области.
На самом деле фронтенд очень близок к дизайну. В первую очередь здесь нужны усидчивость, терпение и умеренное чувство перфекционизма без зашкаливания. Идеальная ситуация — когда вы делаете хороший интерфейс, с которым пользователь будет взаимодействовать и не вспоминать вас.
👉 Говорят, что бэкенд — это то, что пользователь может сделать с сервисом, а фронтенд — то, с чем пользователь взаимодействует. Но это можно перефразировать иначе: если пользователь не думает над тем, как разобраться в интерфейсе, то это значит, что интерфейс хорош и фронтендер сделал свою задачу хорошо. Когда человек пришёл, сделал, что ему хочется, и не вспомнил ни разу фронтендера недобрым словом — это то, что нужно.
Что касается математики, она на самом деле требуется буквально в паре процентов задач. Обычно это что-то узкопрофильное, когда мы делаем большие интерактивные страницы, сложные анимации либо работаем с 3D или рендерим страницы через OpenGL. Структуры данных тоже можно сюда отнести, но они все плюс-минус типовые, и конкретно в вебе они используются не очень часто. Например, это будут стек, очередь, дерево и редко — графы, но обычно всё это отдаётся уже на бэкенд.
Заменят ли фронтендеров нейросети
На самом деле всё развивается таким образом, что просто постепенно повышаются требования к тому, что нужно делать. Когда-то мы сами делали ховеры и анимации, а сейчас это перетекло в нативный CSS. По такой же аналогии сейчас мы пишем какой-то шаблон, верстаем вручную какую-нибудь табличку, а дальше это будет делать за нас нейросеть.
Концептуальные решения того, как мы строим приложение, как формируется пользовательский опыт при работе с этим приложением, как всё это будет спроектировано и на какие компоненты разбито остаются за человеком. Да, нейросети могут делать простые сайты, приложения, шаблоны, генераторы и так далее, но это про скорость в рутинных задачах, а сама работа никуда не девается, она просто трансформируется.
👉 Представьте сайт какого-нибудь условного Amazon, на который заходят сотни миллионов людей. Такой сайт недостаточно просто сверстать — нужно проделать много дополнительной работы. И если объяснять нейросети, что конкретно тебе нужно и как, на это уйдёт больше времени, чем сделать всё самому руками.
Напутствие напоследок
Чтобы заниматься фронтендом, не нужно пять лет учиться в вузе на это, не нужно глубоко знать математику. Школьного курса хватит на 90 процентов, а остальное можно добрать на обучении. Но что точно нужно знать — это как работают разные технологии в вебе.
Получается, что для старта нужно освоить HTML, CSS и JS, научиться собирать из них разные конструкции и понимать, как разные элементы располагаются и работают на странице. Глубокая математика и технарство для этого не нужны.
Мы верим в вас: у вас всё получится.
