Что значит быть фронтенд-разработчиком в 2020 году (и далее)

Вы когда-нибудь задумывались о том, что на самом деле означает фронтенд- часть фронтенд- разработчика ? Однажды я спросил Эрика Мейера (который занимается созданием веб-сайтов почти столько же, сколько существуют веб-сайты), знал ли он, что означал этот термин, в самые ранние дни, и он ответил утвердительно. Таким образом, это не новый титул или должность, но с годами она, безусловно, расширилась.

«Внешний интерфейс» по сути означает веб-браузер. Я считаю себя фронтенд-разработчиком и, честно говоря, не возненавижу, если вы назовете меня разработчиком веб-браузера. Но это, вероятно, не приживется (и звучит так, как будто вы создаете веб-браузеры). Как фронтенд-разработчик, вы тесно взаимодействуете с веб-браузерами и пишете код, который в них работает, в частности, HTML, CSS, JavaScript и несколько других языков, на которых говорят веб-браузеры (например, мультимедийные форматы, такие как SVG). Или, возможно, даже более распространено объяснение, код, который в конечном итоге обрабатывается на тех языках, которые понимают браузеры. Это ваша территория как фронтенд-разработчика!

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

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

Если вы только что закончили учебный курс по кодированию и ваш опыт создания веб-сайтов несколько узок и нов, вам простительно, если вы думаете о фронтенд-разработке как о «вещах React», а о серверной разработке — как о Node. штучки» или «штуки Python», как и самые горячие ароматы в наши дни. Вы тоже не ошиблись. React обычно используется как интерфейсный фреймворк (буквально это JavaScript, работающий в браузерах). Node и Python — это примеры языков, которые на самом деле не работают в веб-браузерах; они созданы для работы на веб-серверах (гм, компьютерах).

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

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

Они оба правы, наверное. Пока никто не злится, все это часть потока.

Все меняется. Я считаю правдой то, что многие современные веб-сайты более сложны , чем веб-сайты прошлого. Особенно большие. Социальные сети и медиаплееры. Сайты бронирования путешествий. Витрины электронной коммерции. Инженерные инструменты. Эти сайты начинались с больших размеров и только становились больше. Они экономят сами на себе с огромными командами, поддерживающими их. Эта сложность является причиной изменений в веб-технологиях и причиной разногласий между новой и старой школами (если можно так просто описать).

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

При этом «интерфейс» по-прежнему остается просто браузером. Языки браузеров, HTML, CSS и JavaScript по-прежнему остаются ключевыми технологиями. Эти языки развиваются, как и сами браузеры, но медленнее. Они делают полную противоположность любимому лозунгу Силиконовой долины: двигайся быстро и ломай вещи . Они двигаются медленно и очень редко что-либо ломают.

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

Итак, что вы делаете как фронтенд-разработчик?

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

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

Что меняется, так это то, что браузер способен выполнять все больше и больше работы. Для этого есть множество причин, например, API-интерфейсы браузеров становятся более функциональными, библиотеки становятся более привлекательными, а компьютеры в целом улучшаются. Перенос работы с сервера на браузер с годами приобретает все больший смысл (одностраничные приложения!). Хотя интересно наблюдать, как маятник качается в обратную сторону (предрендеренные сайты!) и находит золотую середину (JAMstack!).

Фронтенд-разработка в наши дни может также включать:

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

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

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

Удачи!

Что дальше: почему Крис Койер выбирает Local и Flywheel для поддержки своих веб-сайтов

Узнайте, как Крис использует Local и Flywheel, чтобы вывести свои сайты на новый уровень. Посмотрите, какие его любимые функции, как он полагается на Flywheel для переноса своих сайтов (бесплатно!), и многое другое! Кликните сюда, чтобы узнать больше.