dev.ua продолжает знакомить начинающих и свитчеров с профессиями в IT. На этот раз о том, как создавать страницу, с которой вы читаете этот текст, разницу между фронтендом и бэкендом и свой путь расскажет Евгений Жданов, Frontend Developer 3SS (3 Screen Solutions), который пришел в сферу с опытом работы в различных сферах, но, кажется, нашел свое.
dev.ua продолжает знакомить начинающих и свитчеров с профессиями в IT. На этот раз о том, как создавать страницу, с которой вы читаете этот текст, разницу между фронтендом и бэкендом и свой путь расскажет Евгений Жданов, Frontend Developer 3SS (3 Screen Solutions), который пришел в сферу с опытом работы в различных сферах, но, кажется, нашел свое.
Что такое Frontend
Frontend, или фронтенд-разработка, потому что это слово, как и многие другие термины из IT, уже стало привычной частью языка — это публичная часть web-приложений, вебсайты, с которыми пользователи — то есть вы — взаимодействуете и непосредственно контактируете. Все, что видит человек при открытии страницы.
Web-приложение при этом является клиент-серверным приложением, то есть оно связывает клиента, которым выступает браузер, с сервером, на котором находятся данные.
Вы открываете свой браузер, заходите на нужный сайт и пользуетесь его функционалом, разработанным фронтендерами. Именно функционалом, потому что дизайн в общем, — это задача как раз дизайнера. Первая задача фронтендера — веб-верстка, то есть сделать так, чтобы все элементы располагались на своем месте, выглядели целостно и не закрывали друг друга. Вторая задача — чтобы все эти элементы выполняли свое прямое назначение. Чтобы вы нажимали на корзину — и попадали в корзину, где можете купить продукт, а не запускали повторение видеофайла, и наоборот, клик на play в онлайн кинотеатре должен показать кино, а не вывести на страницу оплаты.
Существуют три ключевых компонента фронтенда.
HTML (HyperText Markup Language) — это «клеточное строение тела»: язык разметки элементов на странице и их структурное взаимодействие.
CSS (Cascading Style Sheets) — это «генотип и фенотип», язык, которым прописываются характеристики и стилизация внешнего вида страницы: с ее помощью можно разместить блоки, создать шрифты, цвета, адаптировать одну и ту же страницу в разных стилях, добавить озвучку.
JavaScript — это «нервная система» каждой страницы, язык, заставляющий сайты оживать в ответ на ваши действия — обрабатывать перемещение курсора и щелчки мышкой или нажатие клавиш, загружать данные «внутри» страницы без ее полной перезагрузки, спрашивать что-то у сервера, вводить сообщения и многое-многое другое.
Все очень просто: разрабатывать и создавать динамические интерфейсы. Все то, за что потом вам скажут или «вау, классный сайт, все супер», или «что за лажа, почему шрифты полезли на фотки, а кнопочка, которая должна съезжать, вылетает за экран».
Основная задача фронтендера — взять графический макет от дизайнера и связать его с бэкендом сайта так, чтобы все «летало».
Часто люди путают эти три профессии. Если очень просто, то фронтендер должен быть верстальщиком, но не каждый верстальщик — это фронтендер. То есть верстка — это узкопрофильная работа, которая состоит в том, чтобы получить макет от дизайнера и сверстать его с помощью HTML+CSS. Превратить картинку в простую страницу.
Что касается дизайна, это отдельная специальность, и вы можете ее изучить, чтобы стать более широкопрофильным специалистом и иметь возможность самостоятельно создавать всю внешность сайтов.
Опытный фронтендер не просто «заверстывает макет», он разбирается в JavaScript, который этот макет оживляет и делает приятным для пользователя; понимает, что находится на сервере и часто знаком с дополнительными языками — такими, как PHP.
С опытом приходят и другие знания: препроцессоры и сборщики (GULP, LESS, SASS, GRUNT), работа с SVG-объектами, понимание UI/UX, кроссплатформенность, кроссбраузерность — потому что ваш сайт будут смотреть люди со всего мира и использовать для этого разные гаджеты и браузеры, а он должен выглядеть и, главное, работать одинаково.
На самом деле, список колоссальный, и следует понимать, что он может расти вместе с ростом того, что нужно прикрутить к вашему сайту. Одно дело — это маленький блог, а другое — гигантский онлайн-кинотеатр или маркетплейс. Потому давайте попробуем собрать хотя бы основное.
Итак, нужно:
Также хорошо, если вы знаете инструменты контроля версий (Git, GitHub, CVS и т. п.), базы данных и язык запросов (SQL, MySql, NoSQL, MongoDB).
На самом деле, писать полный список того, что должен знать или уметь фронтендер, — бесполезно. Есть базовые вещи, которые точно нужно знать, все остальное, включая умение продавать себя и презентовать проект, так или иначе приходят с опытом. Это касается и языков программирования, и новых инструментов: вы сможете разобраться с этим постепенно, когда поймете, что хотите делать. К примеру, одному из моих коллег больше понравилась дизайнерская сторона работы. Другой заинтересовался бэкендом и взаимодействием с сервером.
Backend — это, если говорить на ресторанном языке, кухня. Там есть плиты, холодильники, работают повара, идет доставка продуктов, гудят вытяжки — делается все то, ради чего вы пришли в это заведение, то есть еда.
Frontend, если продолжать ту же аналогию, это интерьер заведения и обслуживания.
То есть, вы заходите на маркетплейс, любуетесь его красотой и тем, как дизайнерские элементы удобно расположены на странице — так же, как посещаете любимое заведение, садитесь на дизайнерский стул из IKEA и берете красиво сверстанное меню. После чего заказываете обед, то есть, выбрав нужный товар, жмете на кнопку «оплатить». Официант принимает заказ — на этом фронтенд заканчивается, потому что официант идет на кухню — на сервер, то есть ваш платеж пошел. Дальше — дело за бэкендом, повара получают ваш заказ, скажем, борщ, и начинают варить мясной бульон, рубить капусту, открывать свежую сметану. Деньги прошли, заказ оформлен — и официант (опять работа фронтенда) несет вам тарелку душистого юнесковского достояния.
Бекенд-разработчики работают с серверами, то есть с серверными языками (Java, Python, PHP, Ruby), знают базы данных, архитектуру и даже аппаратную часть — характеристики сервера, что он может, а что не может. Эта работа тоже может быть творческой — например, если вам вдруг нужно выжать с сервера то, на что он не способен, но возможно станет способным. В общем, фронтендеры, которым нужно считать пользовательским опытом и удобством, да еще и по-доброму удивлять какими-то особенностями сайта, имеют гораздо больший потенциал для раскрытия своих творческих навыков, чем бекендеры, занятые анализом и вычислением.
Мои образования вряд ли можно назвать профильными — бухучет и аудит в Госакадемии статистики. Раньше была мечта — пойти в госаппарат и улучшать ситуацию в стране. Чуть-чуть работал по специальности — главбухом на госпредприятии — и там на меня, неопытного специалиста, пытались навесить ответственность за действия предыдущего бухгалтера, что навсегда отбило желание работать непосредственно на государство.
Работал в банках — от менеджера по работе с клиентами до руководителя департамента обслуживания физлиц.
Затем открыл фотостудию, женился, поехали в путешествие, попали в Непале под то самое знаменитое землетрясение.
Вернулся. Открыл спортивную студию — Alfa Gravity — закрыл, когда жена забеременела. Начал копаться в крипте, майнил на одном майнере, потом накупил видеокарт и майнил эфирообразные монеты, накопил несколько биткоинов, стал миллионером и потерял основную часть монет, потому что они были на аппаратном кошельке. После пика битка на 19 тысяч и его падения решил завязывать: слишком большие качели, в крипту нужно идти, когда у тебя основной доход. Поэтому сейчас просто покупаю время от времени нравящиеся монеты и храню на разных кошельках.
Запасов хватило на год — потом по классике пытался таксовать, взял в аренду авто, оно перестало ездить на третий день, пришлось разбираться, возвращать заведение.
Пытался сдавать квартиры, но, откровенно, амортизация собственной квартиры в таком объеме, как получилось у меня после студентов, нелогична.
Я люблю компьютеры с детства, даже пытался пойти на программирование в техникум радиоэлектроники, но попал на кафедру радиоэлектроники, и с третьего курса меня выгнали.
В общем, к прошедшим курсам по GOIT уже дважды пытался проходить нечто подобное, но оба раза курсы показались слабыми, и я не выдерживал. А здесь на презентации дали гигантскую программу на 9 месяцев ежедневных занятий — как в универе, только жестче. Это был уже вызов. Девять месяцев мой мозг взрывался, несколько раз приходилось без сна сидеть сутки или два. Я думал, что ничего не понимаю, и никогда ничего не напишу.
Но просто во время учебы мы с сокурсником начали писать приложение для складского учета — на чистом JS без использования фреймворка. Больше, чтобы потренироваться в чистом языке программирования.
Эта программа получилась хорошая, имела большой функционал: приход и расход товара, перемещение по удаленным складам, кабинеты складов со своими данными, клиенты, отчеты, графики. Было сложно, но за 4 месяца без ТС и практики я написал более 40 тысяч строк полезного кода.
После чего на меня вышел рекрутер компании 3SS — создание стриминговых сервисов. Я не рассылал резюме. Я пришел на собеседование и показал этот проект.
Это непростой вопрос, поскольку все зависит от работодателя и проекта. Условно, можно сказать, что трейни зарабатывают до $600, джуниор — до $1200–1600, мидл — до $2500–3000, синьор — уже трудно сказать, поскольку на временном проекте и мидл может получать $5000.
На мой выбор повлияло то, что когда был предпринимателем, у меня были вечные проблемы с разработчиками: ни разу не написали нормальный сайт. Можно сказать, решил проверить, врали мне тогда или нет. Оказалось, врали.
Пошел учить JavaScript, потому что здесь есть полная экосистема, почти все можно написать на этом языке: сайт, мобильное приложение, десктоп-приложение, бэкенд, есть куча фреймворков, миллионы написанных библиотек и просто кусков кода.
Иногда бывает тяжело, ведь большую часть своей осознанной жизни работал на себя или руководил кем-то. Здесь расписание другое — хорошо прорабатывается командная работа.
