Front end разработка что это

Что должен уметь фронтенд-разработчик

Редактор Нетологии Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен) и за что ему платят прекрасную зарплату (или не очень).

Кто такой фронтенд-разработчик

Согласно ежегодному исследованию StackOverflow, самая популярная профессия среди пользователей сервиса в 2017 году — это Web developer. Именно в эту категорию входят все фронтенд-разработчики.

Данные StackOverflow

Если зайти на первый попавшийся сайт по поиску работы, например, на hh.ru, создастся впечатление, что фронтенд-разработчик — это специалист-хамелеон.

Начинается все с путаницы в названиях вакансий: можно встретить и «front-end developer», и «front end разработчик», и «фронтендщик», и «фронтенд девелопер», и «web developer», и «фронтенд-разработчик». Иногда даже можно увидеть какого-нибудь «веб-верстальщика» с требованиями под фулстак-разработчика. Реакция на это одна: WTF?!

Беда в том, что часть работодателей не отличают (или не хотят отличать) верстальщика от фронтенд-разработчика, — это понятно по описанию вакансий. Разберемся, какие умения отделяют фронтенд-разработчика от «верстака» (верстальщики, не обижайтесь, вы тоже хорошие).

Верстальщик — боец узкого фронта. Его задача — сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.

Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Получается сборная солянка навыков, к которым добавляется понимание принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а иногда и навыков мобильной разработки.

Фронтендщик в обязательном порядке умеет работать с контролем версий (Git, GitHub, CVS и т. д.), использовать графические редакторы, «играть» с шаблонами различных CMS.

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

Итак, какие технологии должен освоить фронтенд-разработчик:

Что говорит статистика

Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:

Данные StackOverflow

Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:

Данные StackOverflow

А набор самых популярных фреймворков и библиотек всех разработчиков выглядит следующим образом (см. иллюстрацию). Приятно видеть среди этого списка инструменты фронтенда:

Данные StackOverflow

Карьерный путь и зарплата фронтенд-разработчика

Карьерный путь фронтендера обычно начинается с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на нее «наслаиваются» знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.

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

У готового фронтенд-разработчика в целом есть три основных варианта развития:

Какой из них выбрать — зависит лишь от самого специалиста и его пожеланий/навыков.

Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Все зависит от навыков и умения подать себя. Ну, и от везения иногда 🙂

Средняя зарплата фронтенд-специалиста по России, рублей/месяц

Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц

По данным «Моего круга»

Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании — вам такой разрыв, скорее всего, не страшен.

По данным PayScale

Как стать фронтенд-разработчиком

Для начала снять розовые очки. Обучение — это труд и самодисциплина. Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении. В этом и сложность, и прелесть IT-сферы. Если вас это не пугает — круто! У вас есть все шансы стать отличным специалистом.

Главное правило будущего специалиста — ставить реальные цели в процессе обучения. В этом поможет планирование. Составьте список инструментов, которые планируете изучить, и держите его перед глазами.

Тем, кто стартует с нуля, надо начинать с HTML и CSS и освоить их на уровне идеальной верстки PSD-макетов. На этом этапе также надо научиться работать с текстовыми и графическими редакторами и знать основные принципы дизайна (как плюс). Затем взяться за JavaScript: синтаксис, архитектура и возможности языка. Освоить популярные фреймворки и библиотеки, параллельно полюбить системы контроля версий и какой-нибудь из популярных таскраннеров. Добавить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. А дальше можно пить смузи на Бали шлифовать полученные знания до бесконечности.

Примерный путь начинающего фронтенд-разработчика.
У вас он будет свой.

Пройти этот путь можно как в одиночку, так и с наставниками (вузы, курсы). Вот какие самые популярные форматы обучения разработчиков по версии StackOverflow:

Данные StackOverflow

На первом месте находятся онлайн-курсы, за них проголосовали 64,7% опрошенных разработчиков, затем идут: самообучение по книгам, офлайн-курсы, опенсорс-разработка и лагери программирования. Интересно, что высшее образование (Master’s degree) стоит практически на последнем месте.

Вывод

Фронтенд-разработчик — это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.

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

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

Стать фронтенд-разработчиком может каждый, кто не пасует перед самообучением: как мы выяснили, полагаться на вузовское образование сложно. Идеальный вариант — различные онлайн и офлайн-курсы + литература по теме, практика и великий Гугл.

Нетология запускает полноценную программу подготовки фронтенд-специалистов — «Профессию front-end разработчик». Это 6-месячный курс, посвященный базовым технологиям фронтенд-разработки: HTML и CSS, JavaScript, Web API, AJAX, веб-сокеты, библиотека React.

По итогу курса студенты создадут собственное одностраничное веб-приложение. Обучение ведут 10 практикующих фронтенд-специалистов — это позволяет получить всестороннее понимание инструментов и задач фронтенд-разработки. В течение всего обучения студенты получат не менее 100 практических заданий, максимально близких к «боевым», и реализуют 3 проекта среднего объема и 1 полноценный проект в качестве дипломной работы.

Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом Нетологии.

Источник

Профессия: фронтенд-разработчик

ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im

Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»

Кто это?

Сперва немного лирики и отступления от темы.

На пороге третьего десятилетия XXI века кажется, что интерес пользователей и разработчиков сместился c веб-интерфейсов в сторону мобильных приложений и IoT. Но это только кажется. Проведём простой мысленный эксперимент. Подумайте, сколько сайтов вы посещаете со всех своих гаджетов в неделю и проанализируйте, какие мобильные приложения у вас установлены. Скорее всего, получится, что все информационные и новостные ресурсы вы просматриваете на полных и мобильных версиях сайтов (в браузере), а мобильные приложения выполняют «специфические» задачи: социальные сети, мессенджеры, планировщики, хобби и т.д. То есть о вымирании веба говорить слишком рано.

Более того, одним из трендов 2019-2020 года (а мне думается, что и до года 2025) стали так называемые PWA (Progressive Web Apps), которые называют будущим мобильного веба. Если говорить максимально просто, то PWA — это не что иное как мобильный сайт здорового человека такой, каким он должен быть. Лучше всего PWA определил один из создателей этой концепции и автор самого термина Алекс Рассел: «Progressive Web Apps are just websites that took all the right vitamins.» («PWA это всего лишь сайт, который принимает все необходимые витамины»).

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

Кстати, если вам интересно познакомиться с PWA поближе, есть классная страница о нём и, конечно, рекомендации Гугла.

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

Что-то меня в бэкенд унесло. Не суть. Суть в том, что при любом бэкенде любого сайта должна быть «морда» сайта и он должен как-то работать. И всё происходит, когда приходят они — фронтенд-разработчики. Они отвечают за разработку внешнего интерфейса сайта, то есть того, как бэкенд и дизайн сайта взаимодействуют с пользователем (если вдруг вы на Хабре случайно, поясню — за каждым сайтом скрывается куча всего: дизайн, различные прослойки и огромный бэкенд, то есть вся логика работы, СУБД и проч). В общем, когда-то истина крылась вот в этой картинке:

Эта эпичная и знакомая всем картинка уже сегодня трансформировалась и действительно, профессия фронтенд-разработчика стала несравнимо сложнее и многокомпонентнее, чем каких-то 7-10 лет назад. Теперь это выглядит так, и 2028 по ощущениям гораздо ближе 🙂

Фронтендеры отвечают за логичную работу всех компонентов сайта, включая контент, кнопки, изображения, навигацию и внутренние ссылки. Нередко именно они проектируют первичную структуру сайта, работают с требованиями пользователей (заказчиков), то есть отвечают за клиентскую сторону пользовательского интерфейса. И если бэкендеры отвечают за программно-аппаратную часть и им скорее важно, как софт взаимодействует с железом, то фронтендеры взаимодействуют с гораздо более сложной «аппаратной частью» — органами зрения, слуха и иногда осязания обычных людей. Задача сделать так, чтобы было удобно, быстро, прозрачно, ожидаемо и т.д. В общем, если косячит фронтендер, это заметят все и сразу.

Вы ещё не напугались от таких перспектив? Тогда едем дальше.

Где нужен?

Если коротко, то везде, где есть веб-разработка, а именно:

Средняя заработная плата

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

Базовые требования к профессионалу

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

Наиболее популярные веб-фреймворки по версии отчёта StackOverflow. Очень рекомендую перейти на страницу отчёта и просмотреть его весь, хотя бы по графикам, попереключать вкладки, — так вы получите целостную картину происходящего в мировом IT. Много инсайтов даже для продвинутого, опытного айтишника.

Важные личные качества

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

Необходимость знания иностранных языков

Для любого программиста крайне желателен английский язык не ниже upper-intermediate с уклоном в технический английский. Так вы сможете читать в оригинале многочисленные рекомендации Google и других компаний для оптимальной разработки (очень много полезной документации!), самообучаться с помощью зарубежных лекций, общаться с коллегами на форумах, задавать вопросы, а также читать книги по юзабилити и дизайну, среди которых очень много крутых англоязычных и пока не переведённых изданий.

Развиваться именно в программировании без знания английского языка крайне затруднительно, особенно в веб-технологиях.

Где учиться

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

Конечно, первое, с чем вы столкнётесь, выбирая профессию фронтенд-разработчика, это онлайн-школы. Пока я писал эту статью, я погуглил несколько картинок и отчёты площадок по теме фронтенда. У меня весь яндекс и гугл теперь в объявлениях, которые обещают меня сделать гуру JavaScript за 2-3-6-12 месяцев. Соблазнился бы, если бы не знал, что такое JavaScript и как его выучить за 21 день.Брать курс для старта или систематизации знаний или не брать — дело вашего желания, времени и дохода. В любом случае, просто прослушать не получится — придётся сидеть и бить по клавишам, делать тестовые сайты или пилить свой пет-сервис (включая бэкенд, кстати).

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

Лучшие книги и средства обучения

Список книг и ресурсов зависит от того, какой стек вы выберете. Но есть несколько, которые нужны абсолютно любому фронтендеру (а то и любому программисту в принципе). Сделаю сумбурный список — по мере силы собственных впечатлений.

Будущее фронтендера

У фронтендера три основных пути развития.

Мифы профессии

▍Фронтенд умирает

Главный миф — это то что профессия фронтенд-разработчика умирает. Конечно, нет. Более того, интерфейсы год от года становится всё сложнее, и ИТ-сфера будет нуждаться в продвинутых специалистах, способных разобраться в этих усложнениях. Фронтенд-разработка будет нужна ещё довольно долго, и никакие шаблоны, визивиги, CMS и прочие средства её не заменят. О важности и нужности профессии можно судить по ряду графиков — думаю, всё наглядно и не нужно ещё раз повторяться о том, что не может умереть профессия, которая обеспечивает самое главное — взаимодействие пользователя и интерфейса.

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

Наиболее популярные языки программирования из отчёта StackOverflow. Кстати, JavaScript здесь удерживает лидерство уже седьмой год.

А вот и тренды Гугла.

Динамика запроса «frontend developer» в мире, 5 лет

Динамика запроса «frontend» (красным) и «фронтенд» (синим) в России, 5 лет

▍Работодатели не очень понимают в видах программистов

А вот второй миф нифига не миф, а чистая правда. Работодатели часто не понимают, кого они нанимают на работу и ищут не того, кто готов решать конкретные задачи и брать на себя ответственность за их решение, а того, кто «должен знать» какой-то им одним ведомый стек технологий. Именно поэтому нужно быть готовым к тому, что вакансия фронтендера будет один раз похожа на вакансию верстальщика, а второй — на вакансию фулстека. Если работодатель выучил аббревиатуру TDD (test driven development), то вакансию можно найти и среди тестировщиков 🙂 На самом деле, такой дичи, как в требованиях к фронтенд-программистам не встречается практически нигде (хуже дела обстоят только у пиарщиков и маркетологов, те вообще должны быть МФУ). Если вам очень хочется в компанию и вы понимаете, что собеседование идёт не туда, постарайтесь перевести разговор на задачи и рассказать, как конкретно вы собираетесь их решать и с помощью какого стека. Впрочем, если не туда пошло уже на собеседовании, может, вы слишком хорошо думаете о компании?

Главный совет

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

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

Источник

Чем различается фронтенд- и бэкенд-разработка

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

Иллюстрация: Merry Mary для Skillbox Media

Артём Садиков

Разработчик в компании VVDEV. Пишет на JavaScript и Golang.

Фронтенд и бэкенд — это как сцена и закулисье веб-приложения. Фронтендеры разрабатывают интерфейсы, изучая и учитывая пользовательский опыт (UX), а бэкенд-программисты — создают «внутрянку» сервиса, которая работает без участия пользователя.

Рассмотрим подробнее, чем занимаются специалисты по обе стороны «веб-сцены».

Что такое фронтенд‑разработка

Фронтенд-разработка — это создание пользовательского интерфейса на клиентской стороне веб‑сайта или приложения. Это всё, что видит пользователь, когда открывает веб-страницу, и с чем он взаимодействует: кнопки, баннеры и анимация. Фронтенд связан с бизнес-логикой продукта (клиентская часть постоянно «общается» с серверной), но её разработкой занимаются бэкенд-программисты.

В процессе работы фронтендер взаимодействует с дизайнерами, бэкенд-разработчиками и UX-аналитиками.

Чтобы понять, что собой представляет фронтенд, откройте страницу любого сайта — вы увидите интерфейс. Щёлкните правой кнопкой мыши по странице, выберите пункт «Исходный код страницы», и перед вами откроется… её исходный код 🙂

Это и есть пример работы фронтенд‑разработчика. Браузер запускает код, который описывает цвета, вёрстку, шрифты и расположение графических элементов, а мы видим такую красоту.

Компоненты фронтенд‑разработки

Фронтенд сайта или веб-приложения можно разделить на три большие части:

Что такое бэкенд‑разработка

Бэкенд — это разработка бизнес-логики продукта (сайта или веб-приложения).

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

Когда водитель садится в салон автомобиля, он видит перед собой «пользовательский интерфейс»: панель управления, руль, педали газа и тормоза. При нажатии на педаль газа машина начинает двигаться вперёд. Так вот, фронтенд — это те самые педали: водитель знает, что будет, когда он на них нажмёт. А бэкенд — это внутренние процессы, которые происходят в автомобиле после нажатия на педаль. Пользователь не видит, как заводится двигатель, и не знает, как он устроен.

Теперь посмотрим, как работает бэкенд сайта.

Когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, вы переходите из области фронтенда в бэкенд. Запрос отправляется на сервер Google или «Яндекса», на котором расположены сложные алгоритмы поиска, — там и происходит всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вы возвращаетесь в область фронтенда.

По большому счёту, сервер — это тот же компьютер, только удалённый и более мощный. Он хранит данные и отвечает на запросы пользователей.

Компоненты бэкенд‑разработки

Бэкенд-разработчик применяет инструменты, которые доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования — например, Ruby, PHP, Python или Java. Всё зависит от конкретного проекта и задачи заказчика.

Также для бэкенд-разработки используются системы управления базами данных:

Также используются инструменты загрузки (деплоя):

Бэкенд — это не только написание кода, но и создание архитектуры приложения. Архитектура в разработке определяет структуру и порядок использования баз данных. Важно, чтобы база данных корректно взаимодействовала с кодом приложения и непрерывно доставлялась на сервер — за это отвечает бэкенд-разработчик.

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

Как взаимодействуют фронтенд и бэкенд

Взаимодействие фронтенда и бэкенда происходит по кругу:

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

Существует несколько вариантов взаимодействия фронтенда и бэкенда:

Когда вы вводите текст в «Google Документах», то сразу же получаете обратную связь от сервера: программа подсвечивает синтаксические ошибки и предлагает исправления. При этом перезагружать страницу не нужно. Фронтенд и бэкенд взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

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

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

Источник

Фронтенд-разработка: ключевые технологии и понятия

Когда вы гуляете по городу, что вы видите? Взгляд часто останавливается на стильных витринах, созданных с целью привлечь внимание. Вы выбираете самую красивую из них и заходите внутрь.

То же самое происходит и в интернете. Блуждая по интернету в поисках необходимого, вы натыкаетесь на самый подходящий на первый взгляд сайт и заходите на него.

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

Что такое фронтенд-разработка? Фронтенд vs бэкенд

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

Для разработки фронтенда в качестве базовых инструментов используются: HTML (для создания базовой структуры страниц и контента), CSS (для стилизации внешнего вида) и JavaScript (для добавления интерактивности). Такой же набор инструментов используется в процессе создания прогрессивных веб-приложений — мобильных приложений, которые выглядят, как нативные, но при этом создаются с участием фронтенд-технологий. Подробнее об этом можно почитать в статье по ссылке.

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

Бэкенд разрабатывается с использованием другого стека технологий, включая Java, PHP, Ruby, C# и иногда JavaScript, о которых мы поговорим в соответствующем разделе статьи.

Цикл запрос-ответ

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

HTML: ключевая фронтенд-технология

HTML (от англ. Hypertext Markup Language) — это язык гипертекстовой разметки, предназначенный для создания веб-сайтов, которые впоследствии могут просматриваться при помощи доступа к интернету. HTML обычно используется для структурирования веб-документа. Он определяет такие элементы, как заголовки или абзацы, и позволяет вставлять изображения, видео и другие медиафайлы.

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

Гипертекст — способ, с помощью которого мы путешествуем по интернету, переходя по гиперссылкам, которые ведут на другие страницы. «Гипер» отсылает к нелинейности, которая позволяет перемещаться в любое место, поскольку этот процесса не подразумевает предопределенного порядка.

Разметка определяет качества, которыми наделяется текст внутри HTML-тегов. Теги определяют, как браузеры форматируют и отображают содержимое страницы.

Будучи языком, он содержит кодовые слова и синтаксис, как и любой другой язык.

Пример HTML-кода

Парный тег / определяет границы веб-страницы, а текст между тегами /

Источник

Кто такой frontend-разработчик?

Эта профессия — как кажется, один из самых простых входов в IT, хотя если копнуть немного глубже базовых знаний верстки, оказывается, что она едва ли не сложнее всех остальных. Вместе с ментором курса «Frontend-разработчик» Алексеем Видякиным сравниваем разработку сайта с созданием автомобиля, раскрываем нюансы специальности и ищем подводные камни.

Кто такой frontend-разработчик?

Frontend-разработчик (frontend developer) — это специалист, который отвечает за создание пользовательского интерфейса сайта, приложения или ПО.

Если backend — это то, что находится на веб-сервере, «под капотом», то фронтендом сайта называют все, что пользователь видит в браузере и с чем взаимодействует, когда вводит данные и получает обратную связь.

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

Здесь мы объясняем на мемах, чем frontend отличается от backend’а.

Где работает и какие задачи решает frontend-разработчик?

Он работает везде, где требуется создание сайта, приложения или любой другой программы, у которой есть интерфейс. Знание JavaScript (основного языка frontend-разработчика) не ограничивает программиста веб-разработкой. Язык используется и для создания десктопных приложений, например офисных пакетов Microsoft и OpenOffice или приложений Adobe, и в программировании оборудования и бытовой техники (платежных терминалов, телевизионных приставок и т.д.).

Помимо студий веб-разработки, для frontend-разработчика есть масса вариантов трудоустройства:

Научитесь разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML и получите востребованную IT-профессию. Дополнительная скидка 5% по промокоду BLOG.

Чем задачи фронтендера отличаются от задач верстальщика?

Базовые инструменты для создания страницы сайта — язык разметки веб-страниц HTML, каскадные таблицы стилей CSS и язык программирования JavaScript. На HTML пишут скелет страницы, благодаря CSS она приобретает привлекательный внешний вид.

Когда странице задана структура и для нее описаны стили — она сверстана. Этими инструментами владеет верстальщик. В его обязанности иногда входят несложные операции с JavaScript, например подключение плагинов и скриптов, отвечающих за оживление статичных страниц.

На небольших проектах задачи верстальщика и frontend-разработчика нередко выполняет один человек.

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

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

Сколько получают frontend-разработчики?

По данным «Хабр.Карьеры», во второй половине 2020 года медианная зарплата специалиста составила 110 тыс. рублей. Но JavaScript-джедаи с опытом от пяти лет могут зарабатывать в два раза больше. Средняя зарплата джуниора составляет 53 тыс. рублей.

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

Как стать frontend-разработчиком?

Чему учиться?

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

«В 2017 году я устроился на свою первую работу, зная лишь HTML, CSS, немного JavaScript и JQuery, — рассказывает Алексей Видякин. — Сегодня, в 2021 году, требования очень выросли, поскольку выросла конкуренция. Базовыми знаниями верстки уже никого не удивишь».

Вот примерный список требований к джуниор-специалисту в 2021 году:

Где начать работать?

Существует три основных варианта трудоустройства: фриланс, студия веб-разработки и работа на стороне заказчика.

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

«На позиции trainee (стажера) я выполнял ту работу, за которую не хотели браться более опытные сотрудники, — вспоминает Алексей. — В основном это были правки от заказчика, то есть дополнения на сайте, которые нужно просто внести по определенному шаблону, ничего не поломав при этом. Дополнительная ценность такой работы в том, что ты начинаешь понимать, как устроены реальные проекты именно в вашей студии».

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

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

С чего начать?

«Для многих, и для меня в том числе, frontend был хобби, прежде чем стать профессией. Создавая с нуля свой первый, далеко не идеальный сайт, вы сможете понять, увлекает ли вас это занятие. Но на первой работе вам, особенно поначалу, потребуется больше терпения и внимательности, чем креативности, — рассуждает Алексей. — Чтобы не перегореть на этом этапе и вырасти до действительно креативных и высокооплачиваемых задач, важно иметь изначальный интерес к веб-разработке».

Лучший способ понять, интересна ли вам frontend-разработка, — взять и попробовать. Вот несколько полезных ссылок, с которых можно начать:

Бесплатные курсы:

Сообщества программистов:

Книги:

Начать учиться можно и без самостоятельной подготовки. На курсе SkillFactory Frontend-разработчик вы пройдете путь от самых основ до создания сложных продуктов. Сначала вы научитесь создавать веб-сайты, затем — разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML, писать сложные компоненты на React.

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

Изучите HTML, CSS и Javascript, чтобы получить перспективную и творческую IT-профессию.

Источник

Начало пути Frontend-разработчика

Дисклеймер: данный пост сделан мной, чтобы рассылать его друзьям, которым нужна помощь с началом изучения Frontend- разработки. Если он поможет и тебе, заглянувшему сюда от нечего делать — буду очень рад. Ну а если не поможет — чего ты ожидал от поста с таким дисклеймером? В любом случае, любые вопросы, фидбек, и критика приветствуются.

После того, как все предупреждены, приступим к делу

Что такое Frontend?

Frontend/фронтенд/разработка клиентской части приложений/разработка интерфейсов/верстка with benefits — одно из самых презираемых «труъ программистами» направлений разработки. Причина тому — достаточно низкий порог входа (можно не обладая мощной базой довольно быстро начать делать коммерческие проекты) (быстро — это месяца три изучения, а не неделя, закатай губу обратно) и полное незнания большинства фронтендерами таких понятий как «управления памятью» и «строгая типизация».

Суть занятия фронтендера заключается в том, что ты с помощью кода на html/css/js (с вариациями, о которых я расскажу чуть позднее) рисуешь те страницы сайтов, которые видит пользователь, и прописываешь логику взаимодействия с этим контентом: при нажатии на кнопку делаем вот это, после заполнения формы отправляем её на сервер и т. д. Как правило для этой деятельности НЕ НУЖНО обладать выдающимися дизайнерскими навыками, потому что чаще всего, когда нужно сверстать сайт, тебе дают нарисованный в figma (графический редактор, заточенный под веб-дизайн) макет сайта и говорят «сделай вот так же, но чтоб это было сайтом и работало». Иногда придётся самому додумывать, как это должно выглядеть на устройствах той или иной ширины, потому что твой любимый коллега дизайнер сделал макет только под десктоп. Ещё реже у тебя просто есть ТЗ в духе «здесь нужно фильтр для таблички сделать чтоб вот по этим параметрам можно было выбирать, дизайна не будет дедлайн вчера». Тут уж либо тебе это нравится, либо выбора не было, либо сам дурак, что согласился. В целом нечастая ситуация.

Что необходимо знать для старта?

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

Кроме этого, желательно иметь немного воображения, чтобы визуализировать в голове схемы расстановки компонентов, ну и некоторое количество алгоритмического мышления/знания программирования на недостижимом уровне «хоть сколько-то». Если этого нет — придет в процессе. Если не придëт — а нужно ли тебе это IT?

Немножко философии и экономики.

Возможно ты уже слышал что-то про Тильду и всякие движки для сайтов типа «Joomla», «WordPress», «Drupal», «1C Bitrix», которые также известны как CMS. Вкратце: это вещи, которые позволяют очень быстро и очень недорого, даже почти не зная программирование, создать на коленке свой интернет-магазин, форум или что-то подобное.

Так вот, с вероятностью близкой к 100% ты не сможешь писать подобные вещи дешевле, чем это делают разработчики, использующие данные системы, не умирая с голоду. Значит ли это, что тебе стоит перейти на подобные технологии?

Тебе решать. Для меня лично ответ «Нет».

Скорее всего, я не смогу отхватить хорошую часть рынка и составить конкуренцию людям, которые могут интернет-магазин сделать за 10к. Я за лендинг обычно больше беру. И путь, который я буду описывать ниже, он не совсем для тех, кто хочет быстро научиться и сидеть клепать лендосы/простые штуки за недорого. Есть много гораздо более интересных вещей (маркетплейсы, CRM, LMS и т. д.), которые очень и очень сложно сделать быстрыми и качественно работающими, используя готовые решения. И лично я топлю за то, чтобы вы — те, кто читает этот текст — тоже учились с заделом на то, чтобы создавать сложные и интересные вещи. За это неплохо платят (статистику найдете сами), и это весело.

Стек технологий, с которыми вы столкнетесь: языки разметки, оформления, программирования, фреймворки и другое.

ВНИМАНИЕ! Бóльшую часть технологий, описанных ниже, НЕ НУЖНО учить и использовать сразу. Понимание, что они нужны и необходимость их использовать придëт с крупными проектами. Если придет раньше — супер, дерзайте. Просто не пугайтесь такого обширного списка.

1) HTML (HyperText Markup Language) (не язык программирования). Это база. Язык разметки содержимого любой веб-страницы

2) CSS (Cascade Style Sheets). Данная технология позволяет задавать стили для того, что ты написал на HTML. Существуют препроцессоры, которые позволяют писать его проще и приятнее (например, с простым использованием переменных и примесей, какими-то математическими вычислениями и т.д.): Less, SASS, SCSS и другие. Сам CSS является must know технологией фронтендера, без него вообще никуда, а препроцессоры — это просто чертовски удобно. Попробуйте обязательно

3) JavaScript. Один из самых популярных и самых ненавидимых языков программирования. Медленный, неприятный, тупой, нелогичный и. все это по большей степени неправда. Во-первых, со времён создания первых мемов про JS прошло чертовски много времени, и этот язык реально изменился в лучшую сторону. Во-вторых, за счëт, емнип, гугловского движка V8, который научился его быстро компилировать, он просто летает. Самое «узкое место» в производительности клиентской части сайтов сейчас — это изменение содержимого страницы (операции с DOM, об этом чуть позже).

Также многие не любят этот язык из-за хреново сделанного ООП, но есть проблема. Это не объектно-ориентированный язык. Это прототипо-ориентированный язык. Неважно. В начале вам это не нужно, когда будет нужно — разберетесь.

5) React, Vue, Svelte, Angular — фреймворки и библиотеки для того, чтобы создавать такую штуку как SPA (одностраничные приложения). Если по-русски: сайт не перезагружается целиком чтобы перейти в другой раздел иди отобразить обновившийся контент — обновляется и изменяется только та часть, которую нужно перерисовать (отрендерить).

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

Из того, что перечислено выше, можете выбрать любую понравившуюся технологию (посмотрите видосы, как выглядит код, как на них пишут, чтобы понять, что приятнее). Мой любимец — Vue, React тоже хорош, про Svelte ничего не знаю, а ангуляр мертв. (На самом деле нет, но брать его для обучения — очень и очень сомнительная идея).

6) JSX и TSX. Улучшения синтаксиса JS и TS, позволяющие удобно писать простую логику и разметку вместе. Полезные вещи, рекомендую. Отдельно их учить не придется, сами все поймете в процессе освоения одного из фреймворков, перечисленных выше.

7) Nuxt.js/Next.js. Библиотеки для простого создания сайтов с использованием Vue/React. Нужны, чтобы поисковики их лучше понимали, и чтобы у пользователей первая загрузка происходила быстрее. Полезные вещи.

8) Vuex/Redux. Библиотеки, которые позволяют не перекидываться данными между компонентами вашего SPA, а централизованно и хранить и изменять. Сейчас вы скорее всего не понимаете, зачем это нужно, но в процессе изучения Vue и React обязательно поймёте.

9) Jest/Mocha (моча, ахахах). Фреймворки для тестирования. Очень важная штука на больших проектах.

10) UI-фреймворки (Bootstrap, Vuetify, Material Design и т. д.). Позволяют очень быстро создавать симпатичные кнопочки, формы и прочие элементы интерфейсов, не тратя время на написание хреновой горы CSS-кода. Также ПРЯМ РЕАЛЬНО ЗНАЧИТЕЛЬНО упрощают создание адаптивных (подстраивающихся под размер экрана) кроссбраузерных (даже в IE будет норм отображаться) сайтов.

Маслята. Теперь это вы

С чего начать?

0) Установи VSCode или WebStorm, не мучайся с плохими IDE.

1) Изучи HTML и CSS на достаточном уровне для вëрстки какого-нибудь простого одностраничника без взаимодействия с пользователем. Могу порекомендовать вот этот курс на степике. Есть ещё курс Веб-разработчик 10.0 от Glo Academy, рекомендую там посмотреть как минимум видео 1, 4-13.

Обязательно пойми, что такое флексбоксы, основы блочной модели и позиционирования. Это крайне важно.

2) Сверстай одностраничник. Это может быть твоя визитка, сайт для продажи ссаных тряпок, и прочие интересные вещи — макеты подобных сайтов легко найти в сети Internet. Добавь какую-нибудь простейшую форму обратной связи (не обязательно рабочую), анимируй наведение на кнопки и сделай так, чтобы при нажатии на одну из них, например, на секунду на сайте появлялась какая-то надпись.

3) Изучи основы адаптивной вëрстки. Почитай про @media запросы. Переверстай свой сайт с новыми знаниями (Видео с курса)

4) Попробуй сделать то же самое с использованием Bootstrap.

5) Научись пользоваться гитом. В дальнейшем создавай репозиторий под каждый твой учебный проект, ибо без опыта это будет единственным весомым аргументом для работодателя «почему на стажировку нужно взять именно тебя». Небольшой видеокурс (1 час)

6) Пришло время вплотную заняться JavaScript. В этом тебе очень поможет сайт https://learn.javascript.ru/ Это в принципе один из самых лучших учебников по программированию на русском языке, который я знаю, и, если ты потратишь время на то, чтобы прочитать и отработать там весь материал по JS — это будет очень здорово. В качестве практики можно участвовать в интенсивах от тех же Glo Academy, где они верстают «Соцсети», «Онлайн плееры» и прочие нереализуемые за несколько часов вещи, которые звучат круто. Забей на кликбейтные заголовки — это даст тебе неплохое понимание применения JS.

7) Подучи сложные CSS- селекторы. >, псевдоклассы и :not(nth-last-child(3)) должны стать для тебя кристально понятны. (ссылка) Проверь, знаешь ли ты, что значит fit-content, calc(), min(), max(), clamp() и другие подобные вещи. Также будет очень неплохо, если ты решишь изучить БЭМ (Блок-Элемент-Модификатор, технология Яндекса, позволяющаяся не запутываться в именовании классов для больших проектов)Попробуй понять gridы.

8) Научись отправлять запросы на сервер с помощью fetch/axios, если ещё не научился этому в 6 пункте. База. Важно.

9) Примерно тут ты уже можешь верстать годные лендинги и даже чет посложнее. Если повезет — кто-нибудь из знакомых может подкинуть заказ. Но не останавливайся — время расти дальше.

10) Пройди курс по React + Redux от Юрия Бура (Вот ссылка). Даже если потом ты перейдешь на другую технологию. Даже если ты на 100% в этом уверен. Пройди. Он реально хорош, преподаватель все очень приятно и подробно объясняет. По итогу курса ты должен будешь уже уметь создавать пригодные для коммерческого использования SPA и поймешь, как и зачем использовать менеджеры состояний типа Redux/Vuex. Перейти на другой фреймворк после данного курса — как нефиг делать. Если финансы позволяют — рекомендую взять его на Udemy и поддержать автора, благо, он довольно дешевый.

11) После прохождения курса и практики в виде нескольких проектов с применением этих штук (которые ты конечно же не забыл залить на гитхаб, да?) можешь попробовать найти работу джуном. Шанс на успех не самый низкий.

Источник

Фронтенд-разработка в компании: что это и как сделать её эффективной

Мы в компании КОРУС Консалтинг СНГ уже больше десяти лет занимаемся организацией разработки веб-сервисов для наших заказчиков. У нас за плечами уже несколько десятков серьёзных проектов в банковской сфере, некоторые из них получили международное признание.

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

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

Из этой статьи вы узнаете о нашем пути к ответам на следующие вопросы:

Что такое современный фронтенд

Фронтенд-часть сайта или приложения — это то, что вы видите у себя в браузере, эта часть активно взаимодействует с серверной (backend) частью, которая находится на каком-либо сервере, постоянно обмениваясь с ней данными.

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

Как-то у меня спросили, на чём сейчас нужно делать приложения, чтобы они не устарели ещё несколько лет?

Как программист, могу дать совершенно точный и совершенно бесполезный ответ: на HTML, CSS и JavaScript. Что конкретно выбрать, jQuery, Angular или React — это уже детали.

Если углубиться в эти детали, можно дать ещё один такой же правильный и бесполезный ответ: на чём угодно. Да, это действительно так. Приложение может быть написано на чём угодно, оно будет работать, его можно будет менять и развивать.

В чём же всё-таки разница?

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

Итак, на чём сейчас нужно делать приложения, чтобы разработка шла быстро, качественно и не разорила заказчика?

Скорость разработки

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

Скорость разработки с использованием определённого фреймворка зависит от опыта и квалификации программистов, которые на нём пишут, сам фреймворк здесь имеет второстепенное значение.

Качество продукта

Здесь то же самое: и хорошо, и плохо можно писать на любом фреймворке. Можно заложить правильную и неправильную архитектуру куда угодно.

Всё зависит от опыта и знаний разработчика.

Стоимость

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

Отсюда вывод: нужно делать ставку не столько на технологии, сколько на разработчиков и организацию их работы.

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

Поэтому дальше будет про эффективность фронтенда с точки зрения организации разработки.

Как это было у нас

К 2017 году у нас были приложения практически на всём, что заслуживало внимания в мире JavaScript: от jQuery до разных версий Angular и React на Typescript и Flow. Над клиентской частью наших приложений работали верстальщики и backend/fullstack-разработчики. Каждый разработчик выбирал инструменты под свои задачи, в зависимости от своих знаний фронтенд-технологий.

Сейчас я могу только предполагать, но мне кажется, что выбор фреймворков и библиотек fullstack/backend-разработчиками происходил примерно так:

«Посмотрим, что у нас пишут в интернетах. »

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

В разные моменты времени этот выбор может быть разным даже у одного и того же разработчика (см. иллюстрации выше). При этом менее аргументированным он не становится. Чего же тогда ожидать от разных разработчиков с разным опытом?

Незаметно к 2017 году мы превратились в настоящий зоопарк фронтенд-технологий.

Фронтенд как отдельное подразделение

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

Качественная документация может смягчить негативные последствия такого разнообразия, но на её изучение и погружение в незнакомые технологии обычно требуется значительное время.

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

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

Как вылечить зоопарк?

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

Поэтому нашим следующим шагом стала унификация стека компании силами экспертов нового подразделения.

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

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

Главная задача здесь — не решить, что мы теперь пишем на React или Angular, а сделать так, чтобы разработчики пользовались одинаковыми инструментами для создания приложений и одинаковыми подходами к решению типовых задач.

Для справки: наш основной инструмент — React, но мы также развиваем экспертизу и в Angular.

Вот тут и начинается самое интересное. Принудиловка в мире программирования работает очень плохо.

Поэтому вместо принуждения нужно сделать так, чтобы разработчики сами хотели следовать определённым правилам разработки.

Для этого нужно:

Вопрос с мотивацией мы решили следующим образом: лучше всякой документации — дать разработчику полуготовое приложение (шаблон).

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

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

Что нужно заложить в шаблон приложения

При старте новых проектов разработчики обычно решают следующие типовые задачи:

Шаблон приложения, который мы разработали, закрывает первые три пункта из этого списка. Мы выразили в этом шаблоне не только наши пожелания к единому стеку для разработки, но и основные правила архитектуры приложения.
По сравнению с популярными решениями, которые находятся в открытом доступе (например, create-react-app), наш шаблон уже содержит:

Но дальше разработчика ждёт большое количество других интересных (и не очень) задач.

Выбор библиотеки компонентов

Всё, что касается вёрстки, компонентов интерфейса (выпадающих списков, календарей и т.д.), форм и валидации мы решили с помощью собственной библиотеки. Это была самая сложная часть.

В 2017 основной библиотекой компании была платная библиотека компонентов Kendo, которая предоставляла UI-решения для разных технологий, начиная с jQuery. По разным причинам она нас не устраивала, и мы решили рассмотреть альтернативные библиотеки, в том числе и вариант с созданием собственной.

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

Готовые библиотеки

Плюсы готовых библиотек:

Собственные разработки

Плюсы собственных разработок:

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

Ни один из вариантов нас полностью не устраивал, и мы нашли другое решение.

Мы решили сделать свою надстройку над готовой библиотекой.

Напомню, что на тот момент мы уже пользовались в чистом виде библиотекой Kendo, альтернативу которой мы хотели найти. Именно её мы и решили взять за основу нашей основной библиотеки компонентов для приложений на React. А сама наша новая библиотека представляла из себя фасад над Kendo. Я опущу технические детали, скажу только, что такое решение позволило сразу получить весь функционал Kendo, а то, чего нам не хватало, в том числе и оперативное исправление багов, мы делали сами в прослойке между клиентским API библиотеки и Kendo.

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

Со временем мы заменили все компоненты на собственные реализации и выпустили вторую версию библиотеки, где учли весь предыдущий опыт, переработали API и сделали собственную документацию.

Мы решили выложить наши наработки в открытый доступ, скоро их можно будет скачать и использовать в своих проектах, следите за анонсами.

Что в итоге у нас получилось

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

Статистика показывает, что эффективность работы за два года выросла более, чем в три раза. Проекты, на которые мы раньше тратили 4-6 месяцев, теперь мы делаем за 1-2 месяца (речь идёт о фронтенд-части).

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

Я уже приводил список задач, которые решали разработчики два года назад:

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

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

С пожеланиями эффективности и до новых встреч!

Источник

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

Кто такой фронтендер и чем он занимается?

Допустим, вы хотите арендовать квартиру: у вас есть компьютер с выходом в Интернет, вы знаете адрес другого, более мощного компьютера, который хранит огромное множество объявлений. Если представить, что привычных сайтов не существует и вы не можете, например, посмотреть объявления на карте, отфильтровать ненужные, заполнив удобную форму, вам придётся самим составлять сетевой запрос и разбираться в том, как и куда отправлять данные.

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

Фронтенд-разработчиками называют программистов, которые отвечают за создание такой внешней стороны (англ. front end) веб-сайтов. Это клиентская часть сайта, с которой пользователь непосредственно взаимодействует на своем компьютере или телефоне (клиенте).

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

С чего начать и что читать? Чек-лист обучения

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

В начале пути некоторых пугает список технологий, названий и аббревиатур во фронтенде. Их огромное множество. Но даже опытный разработчик не знает, да и не должен знать абсолютно все технологии и библиотеки, которые только существуют (ходят слухи, что каждую секунду в мире фронтенда выпускается новая библиотека:)

Три кита разработки под браузеры — это HTML, CSS и JavaScript, с которых и стоит начать.

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

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

Сохраняйте в закладки и пользуйтесь.

1. Как работает Веб

Прежде чем начать разрабатывать сайты, необходимо иметь представление о том, что происходит при открытии сайта в браузере, как работает клиент-серверная модель и что такое HTTP-протокол.

2. Среда разработки

Писать код и разметку можно даже в блокноте, но удобнее использовать специальные редакторы. Наиболее популярные среди фронтендеров:

3. Основы HTML

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

4. CSS

Добавление стилей для элементов страницы. Изучаем блочную модель, позиционирование, каскадирование стилей, специфичность селекторов, псевдоэлементы, адаптивную верстку (для компьютеров, планшетов и телефонов). Учимся верстать современные макеты с помощью Flexbox и Grid.

5. Система контроля версий Git

Git поможет вам выйти на новый уровень в процессе написания кода. Это незаменимый инструмент для разработчиков, который позволяет поэтапно сохранять информацию обо всех изменениях в коде, возвращаться к разному состоянию, и многое другое. Желательно научиться работать с Git в терминале, а также попрактиковаться: создать репозиторий на Github или Gitlab и опробовать основные возможности Git на своём тестовом репозитории.

Практика. Практика. Практика!

На этом этапе я предлагаю побольше попрактиковаться и сделать свой небольшой проект, чтобы запомнить пройденный материал. Необязательно самостоятельно придумывать дизайн сайта, вы можете взять готовый макет. Создайте landing page или, например, сверстайте сайт-портфолио, сохраняйте код на Github в процессе разработки и попробуйте разместить сайт на бесплатном хостинге для статических сайтов — Github Pages. Если вам недостаточно практики, попробуйте посмотреть, как верстают другие, и повторить. На YouTube достаточно видеоуроков на эту тему (например, по запросу «верстка сайта по макету figma»).

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

6. Язык программирования JavaScript

Не путайте JavaScript с Java. Изучите основы языка: переменные, объекты, типы данных, функции, контекст и замыкания, классы. Сравните отличия спецификаций EcmaScript старых и новых версий. После понимания основ переходите к более сложным вещам: тонкостям асинхронного программирования (коллбеки, промисы, async-await) и выполнению запросов на сервер (XmlHttpRequest, Ajax, Fetch, Cookie).

7. DOM (Document Object Model)

DOM — это объектная модель документа, дерево, которое строит браузер, чтобы отрисовать вашу страницу на экране. Научившись работать с DOM, вы сможете с помощью JavaScript создавать или изменять элементы на странице, реагировать на клики пользователей и многое другое. Работе с DOM и событиям в браузере посвящена отдельная часть LearnJavascript.

Подробно тема DOM также описана в книге «Выразительный JavaScript», автор Марейн Хавербек.

8. Node.js, NPM

Благодаря программной платформе Node.js язык JavaScript можно использовать не только в браузере. С помощью этого инструмента можно написать консольную программу или серверную часть приложения.

Попробуйте написать свой собственный небольшой сервер.

В своих JavaScript-программах вы можете использовать модули, написанные другими разработчиками. Ознакомьтесь с онлайн-хранилищем пакетов NPM.

9. Babel

Babel Js — компилятор JavaScript-кода, который позволяет использовать последние возможности языка, например, стрелочные функции, классы, optional chaining, не дожидаясь их полной поддержки браузерами. Вам необходимо лишь правильно сконфигурировать Babel под нужную версию EcmaScript или список поддерживаемых вами браузеров, исходный код будет преобразован автоматически.

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

10. Сборщики модулей, Webpack

При создании приложений разработчики делят код на части (модули), подключают дополнительные обработчики кода, настраивают приложения для различных окружений (development и production). Чтобы это было возможным, а нам не пришлось вручную подключать модули в HTML-файле в нужном порядке и следить за изменениями, в приложениях используются сборщики модулей (бандлеры).

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

Webpack — один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков (пре- и пост- процессоров CSS и HTML, Babel и др.), оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое.

11. Препроцессоры CSS

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

Наиболее популярные препроцессоры:

12. Препроцессоры HTML (Шаблонизаторы)

Препроцессоры HTML имеют те же преимущества, что и CSS-препроцессоры. Они позволяют более эффективно писать HTML-разметку, разбивать код на модули, а также использовать условия, циклы, миксины, наследование.

13. Стиль кода и линтеры

Стиль кода (code style) — набор правил, который позволяет сделать код единообразным, максимально удобным для восприятия и читаемым для вас и других разработчиков. Такие правила описывают, где и какие отступы и скобки должны быть, максимальную длину строк, названия переменных, позволяют определить слишком запутанный или лишний код и множество других аспектов.

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

Существуют специальные инструменты, которые могут проверять ваш код автоматически и позволяют легко поддерживать код в определенном стиле, настроив конфигурацию проекта один раз:

14. Изучение фреймворка/UI-библиотеки

React, Angular или Vue? На 2020 год основная борьба идет между этими библиотеками. Вы можете выбрать любую из них. Если вам симпатизирует какая-то конкретная компания, в которой вы хотели бы работать, можете выбрать используемый ими фреймворк.

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

Начните изучать React с официальной документации, она достаточно подробная. Если её вам покажется недостаточно, можно найти на Udemy полноценный курс (например, Modern React and Redux — на английском языке, с очень понятным и подробным объяснением для начинающих, практическими заданиями и всем необходимым материалом по React и библиотекам).

Уделите внимание описанию типов входных параметров для React-компонентов (проверка типов с помощью PropTypes), а также написанию комментариев по стандарту JSDoc (цикл статей по использованию JSDoc).

По мере вашего продвижения необходимо будет научиться управлять состоянием приложения. Библиотеки, которые помогают в этом: Redux и Mobx. Начать рекомендую с Redux — это наиболее популярная библиотека в связке с React. Ознакомьтесь с официальной документацией или переводом. Также советую курс от одного из авторов библиотеки (Getting Started with Redux от Дэна Абрамова).

Затем приступайте к изучению библиотеки для удобного выполнения асинхронных действий (например, запросов к серверу). Самая простая библиотека, с которой стоит начать — Redux Thunk (документация).

15. Автоматическое тестирование

Тестирование — это процесс оценки того, что все модули приложения ведут себя так, как ожидалось. Благодаря тестированию можно избежать большого количества ошибок, которые вы могли бы не заметить. Изучите, что такое тестирование и какие виды бывают (Тестирование для «чайников»). Научитесь писать модульные тесты к вашему коду, используя одну из библиотек для тестирования, например, Jest.

16. Углубленное

Какие трудности могут быть? Ошибки в начале пути

Изучение фреймворков вместо базовых знаний

Иногда будет казаться, что лучше сразу изучать какой-нибудь популярный фреймворк или библиотеку. Это достаточно частая ошибка, особенно во фронтенде: люди начинают изучать React или верстают с помощью Bootstrap и Material UI, не разобравшись в основах и не получив достаточных знаний по HTML, CSS и JavaScript. Можно использовать такой подход, если вы «бежите на короткую дистанцию» и вам нужно быстро сделать какой-нибудь проект. Но если вы планируете стать разработчиком, это не принесет нужного результата.

Нет необходимости знать наизусть абсолютно все CSS-свойства или методы в JS, вы сможете поискать их, если забудете. Важно понимание основных концепций и тонкостей: это то, что будет вашим крепким фундаментом во фронтенд-разработке.

Обучение — это труд, самодисциплина и много практики

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

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

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

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

Копирование чужого кода

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

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

Не доверяйте на 100% коду, который вы находите

Другие люди тоже могут ошибаться или иметь недостаточно опыта. Если вы находите видеоурок от магистра JavaScript или вёрстки, это не всегда значит, что преподносимое — идеальное решение и лучший возможный код.

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

Подготовка к собеседованию на Junior-разработчика

Собеседования в разные компании могут проходить совершенно по-разному, я бы хотела рассказать о необходимых знаниях, основываясь на своём опыте.

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

Вопросы могут быть как теоретические, так и практические, на решение небольших задач.

Сообщество разработчиков составило примерный список вопросов для интервью. Пройдитесь по всем вопросам и попробуйте дать ответ. Если вы не смогли на что-то ответить, это сигнал к повторению темы.

В подготовке к решению задач на JavaScript могут помочь сайты с задачами по программированию, на которых вы можете попрактиковаться онлайн и проверить свои навыки (начинайте с раздела с простыми задачами). Особенно популярными задачами являются задачи на применение методов работы с массивами. Пример таких задач: проверка на палиндром или анаграмму.

Сайты с задачами по программированию:

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

Маленький совет: если вы не уверены в своих силах, всё равно пройдите собеседование в какой-нибудь компании. И даже если вам не сделают предложение, вы поймете свои слабые места. К следующему собеседованию сможете подготовиться еще лучше!

Спасибо, что дочитали до конца. Надеюсь, статья была вам полезна. Если знаете, что она может быть полезна кому-то другому, то поделитесь.

Источник

Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют

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

Давайте начнем с определений.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».

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

Бэкенд — все, что работает на сервере, то есть «не в браузере» или «на компьютере, подсоединенном к сети (обычно к Интернету), который отвечает на сообщения от других компьютеров».

Прим. ред. Профессия бэкенд-разработчика вошла в топ наиболее сложных IT-профессий.

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

Когда страница загружена в браузере, HTML определяет, что будет показано, CSS — как это будет выглядеть, а JS — всякие особые взаимодействия.

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

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

Вне фронтенда и бэкенда

Автономный фронтенд

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

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

Легкий бэкенд

Бэкенд, в свою очередь, становится легче и легче. Такие технологии, как хранилища документов и графовые базы данных, приводят к сокращению количества обращений к бэкенду для повторного агрегирования данных. Задача клиента — уточнить, какие данные ему нужны (базы данных графов), или извлечь все различные фрагменты данных, которые ему нужны (REST API).

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

Размытые границы

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

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

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

Источник

Как стать Front-End разработчиком

Кто такой Front-End разработчик?

1. Азы которые нужно знать

Для написания Front-End кода можно использовать множество языков, но для начала я советую вам начать изучения с «языка» HTML. С помощью его вы сможете делать конечно не сайты, но стандартные интернет страницы с текстом, картинками и т.д, но HTML-я вам конечно же не хватит что бы считать себя Front-End разработчиком. Способов изучить HTML есть много их мы разберём немного позже

Далее я вам посоветую выучить азы языка CSS. Он вам пригодиться что бы уже делать неплохой дизайн сайта, стандартные анимации, оформление страницы. Также способов изучить CSS есть много их мы разберём немного позже

Что бы хорошо писать дизайн для сайта вам не всегда хватит языка CSS, поэтому вам нужны азы JavaScript-а. Но если-же вы полностью выучите язык JavaScript и Node.js вы вполне сможете писать даже Back-End и стать Full-Stack разработчиком

2. Время

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

3. Математика

Долго мы на этом заостряться не будем, если ты хорошо знаешь математику-отлично, если не очень это не беда. Тут вполне хватит курса математики до 9 класса

Источник

Фронтенд-разработчик — кто это? И что должен уметь такой разработчик?

Прежде чем перейти к рассмотрению вопроса, кто же это, давайте вспомним, откуда данный термин к нам пришёл. Как говорит википедия, слово фронтенд произошло от английского словосочетания front-end, и означает оно клиентскую сторону пользовательского интерфейса по отношению к программно-аппаратной части сервиса. Говоря о front-энд, нельзя не вспомнить и бекенд (англ. back-end), представляющий собой эту самую программно-аппаратную часть сервиса. Оба термина используются при обозначении вариантов архитектуры программного обеспечения. И появились они в программной инженерии из-за наличия принципа разделения ответственности между внутренней реализацией и внешним представлением. Например, разработчик front-end не всегда знает особенности реализации сервера (собственного говоря, ему это и не нужно), в то время как developer back-end не знает реализацию front-энд.

Говоря простым языком, frontend-разработка связана с программированием клиентской части веб-приложений. Такой специалист делает то, что конечный пользователь видит в своём браузере. К примеру, это красивый сайт: галереи, кнопки, формы сортировки, поиска, обратной связи и прочие элементы интерфейса.

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

Фронтенд-разработка на практических примерах

В процессе своей практической деятельности фронтэнд-разработчик может получать от веб-дизайнера макеты будущего сайта либо сервиса или другие задания, на основании которых он создаёт клиентскую часть, выполняя: — вёрстку дизайна сайта, создание шаблонов его будущих страниц с помощью HTML и CSS; — настройку работы слайдеров, кнопок, онлайн-форм и прочего запланированного функционала (специалист по frontend-разработке либо использует готовые скрипты из библиотек, либо создаёт свои); — проверку работы созданного функционала; — оптимизацию скриптов для ускорения загрузки страниц и т. д.

Также фронтендер может консультировать по вопросам реализации того либо иного функционала. При этом в отличие от обычного верстальщика, знающего HTML+CSS, frontend-разработчик способен программировать интерактивные элементы на web-страницах и хорошо владеет языком программирования JavaScript, а также рядом других технологий. Но давайте остановимся на этом подробнее.

Что должен знать и уметь разработчик фронтенда?

Если говорить об освоении данной профессии с нуля, то потребуется изучить следующие технологии: 1. HTML и CSS. Как известно, HTML – это язык разметки документов на сайтах. А CSS – это каскадные таблицы стилей, которые управляют оформлением разных элементов на веб-страницах (например, размером и типом шрифтов). И освоить эти инструменты нужно в первую очередь. 2. JavaScript. По сути, основной язык программирования, который должен знать front-end-программист. При этом есть разные библиотеки готовых скриптов, написанных на JavaScript. И их тоже желательно изучить, так как их применение упрощает и ускоряет работу. Одна из таких библиотек – jQuery. 3. Методология верстки. Подойдёт тот же БЭМ от Яндекса. Это методология «Блок-Элемент-Модификатор», которая помогает создавать web-приложения по определенным принципам. Так называемый компонентный подход в вёрстке, который упрощает поддержку структуры кода при росте проекта, позволяет использовать код повторно и вносить в него точечные изменения с минимальными затратами, добавляя функциональные элементы либо обновляя дизайн. 4. Фреймворки. Пригодится, в частности, Bootstrap. А вообще, фреймворк – это набор готовых решений и на их базе можно создавать сайты гораздо быстрее, чем если бы вы делали всё с нуля. 5. Кроссбраузерная вёрстка. Разумеется, нужно уметь создавать веб-страницы таким образом, чтобы они одинаково выглядели во всех браузерах, но это ведь очевидно, не правда ли? 6. Адаптивный дизайн. Речь идёт о дизайне, который может подстраиваться под размеры экрана пользователя. В результате сайт будет оптимально выглядеть и на персональном компьютере, и на планшете, и на смартфоне. 7. Язык серверного программирования. Рекомендуется хотя бы на базовом уровне знать, например, один из самых популярных языков в среде web. Как вы уже, наверное, догадались, мы говорим о PHP. 8. Git. Ну, без знания системы контроля версий сегодня никак, сами понимаете.

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

Источник

Подружить код с дизайном: чем занимается фронтенд-разработчик

Кто такой фронтенд-разработчик

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

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

Чем занимается фронтенд-разработчик

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

Для этого он выполняет следующие задачи:

Тренды профессии

За 2021 год на американском джоб-борде Glassdoor только в Америке и Великобритании опубликовали 45 тыс. вакансий фронтенд-разработчиков.

По данным сайта для поиска работы Zippia, фронтенд-разработчиков чаще всего нанимают в крупные компании, в том числе в корпорации из списка Fortune 500. Среди сфер, куда активно нанимают фронтендеров, на втором месте — технологические компании, а на третьем — финансовые организации. Также фронтендеры востребованы в ритейле.

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

Сергей Шалыгин, фронтенд-разработчик и преподаватель по JavaScript в Skillfactory:

«Сейчас появились разные конструкторы сайтов с зеро-блоками, которые уже запрограммированы. Все, что нужно сделать — это собрать из готовых элементов свой сайт. Я считаю, что такие инструменты фронтенд-разработчикам никакой конкуренции не составляют. Чаще всего конструкторы выбирают из соображений бюджета: нанять профессионального разработчика дороже, чем поручить собрать лендинг на Тильде маркетологов. Фронтендерам тоже не нужны такие клиенты: там обязательно будет много требований, при этом мало денег. Тем временем крупные компании, которым нужны сложные системы и продукты, индивидуально собранная для бизнеса архитектура, продолжат нанимать для этих целей фронтендеров. На мой взгляд, для начинающего специалиста лучше сразу выбрать IT-путь и начать учиться фронтенду. Это откроет больше путей карьерного развития: из фронтенда можно перейти в бэкенд, мобильную разработку, защиту данных. Было бы желание».

На момент написания статьи на Headhunter — 4698 вакансий по России России. По данным Habr.Карьера, за 2021 год средняя зарплата фронтенд-разработчика выросла на 21% и составляет примерно ₽149 тыс.

Какие навыки нужны фронтенд-разработчику

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

Hard skills:

Soft skills:

Сергей Шалыгин:

«Я проходил трехмесячную стажировку в одной компании, итогом которой должен был стать самостоятельно выполненный проект. Тогда мы писали приложение для учебных заведений России. Мне поставили квалификационную задачу: создать отдельную страницу в приложении с новой формой захвата и со своими правилами. Чтобы решить эту задачу, мне нужно было применить все навыки, которые я приобрел за время стажировки, и даже немного больше. Проблема была в том, что меня никто не учил, на три месяца меня бросили один на один с огромным legacy-кодом (код, который достается разработчику от предшественников, часто в нем есть много нерасшифрованных сокращений, решений без пояснения). По отдельности с задачами я справлялся и чему-то сам учился. Но квалификационный проект казался мне необъятным.

Я собирал решения по крупицам, что-то выспрашивал у коллег. Они были не очень отзывчивыми, поэтому приходилось выуживать, спрашивать аккуратно о другом, чтобы узнать нужную мне информацию. Решить задачу мне помогло упорство, ежедневный труд, я думал о задаче даже вне работы. В итоге я все выполнил, но меня все равно уволили. Однако я еще в самом начале пути решил, что не сдамся, пока число отказов не дойдет до сотни. Тогда можно будет думать, подходит ли мне профессия. Большинство историй успеха — о том, чтобы не бояться неудач, давать себе время развиваться и двигаться вперед. Этот позитивный настрой очень помог мне на старте».

Откуда приходят в профессию

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

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

Сергей Шалыгин:

«Чаще всего фронтендеры уходят в мобильную разработку: iOS, Android или кроссплафторменную. Также достаточно близкая сфера — бэкенд, мы постоянно сотрудничаем с бэкендерами, они присылают нам материал, мы его обрабатываем. Достаточно выучить PHP или Python, чтобы начать развиваться в бэкенд-разработке. Если есть управленческие амбиции, можно стремиться в тимлиды, а потом становиться хорошим продакт-менеджером, который разбирается в кодовой части сервиса».

Как стать фронтенд-разработчиком

Научиться фронтенд-разработке можно как самостоятельно на бесплатных материалах, так и на онлайн-курсах с кураторством. Однако для того, чтобы пойти на курс, для начала стоит получить минимальную базу самостоятельно. Например, ознакомиться с HTML и CSS, основами Web-разработки на YouTube, полистать бесплатный учебник по JavaScript, попробовать свои силы в бесплатных тренажерах (например, от HTML Academy).

Сергей Шалыгин:

«Хороший вариант — учиться на практике под руководством ментора. Можно, например, воспользоваться сервисом GetMentor. На нем можно найти платного или бесплатного консультанта, который поможет разобрать сложные задачи и поделится опытом. Также поискать опытного программиста можно по друзьям и знакомым. Важно показать ментору свою заинтересованность. Я, например, готов тратить свое время на обучение новичков, но мне важно, чтобы человек также отдавался этому, как я. Иначе мне просто нет смысла тратить время, мой час с каждым годом стоит все дороже».

Источник