24 Сентябрь 2018 Roadmap front-end разработчика в студии Верный Код

Начинающему веб-разработчику бывает сложно разобраться в большом количестве технологий, которые существуют на конец 2018 года. Возникают вопросы "С чего начать?", "Куда двигаться дальше?", "Как попасть на стажировку?". Также существует путаница в понятиях и терминах, которыми часто оперируют опытные разработчики. Я хочу рассказать о пути, который проходят новички, приходя к нам в студию на стажировку.

Любому начинающему Front-end разработчику необходимо пройти путь обучения

Практически каждый, кто захотел освоить ремесло разработки сайтов, начинает с изучения HTML и CSS. Современные учебники, в большинстве своем, объединяют эти технологии в стек, потому как уже сложно представить одно без другого. Для изучения HTML и CSS я рекомендую обратить внимание на такие ресурсы как HTML Academy и Codecademy, где есть множество бесплатных уроков, разбитых по темам и степеням сложности, а также платные интенсивы для погружения в профессию. Освоив этот стек уже можно попробовать себя в профессии «Верстальщик» и напроситься на стажировку в студию.

Стажировка проходит под чутким руководством тимлида
Далее существует несколько путей углубления в веб-разработку: Front-end, Back-end и DevOps.
Front-end — это все, что относится к разработке клиентской части веб-сайта. Клиент в данном случае — это браузер, его еще называют тонким клиентом, потому что он лишь отображает информацию и транслирует скрипты, которые ему отправил удаленный сервер. Толстым же клиентом называют приложение, которое обеспечивает дополнительную функциональность и обрабатывает данные на локальной машине, а сервер является лишь хранилищем данных.
Освоив HTML и CSS вы уже встали на дорожку Frontend, потому как именно браузер понимает написанные вами инструкции и отображает визуальную страницу. Стоит отметить, что ни HTML, ни CSS не являются языками программирования, а относятся к языкам разметки и языкам стилей соответственно. Это становится понятно, если расшифровать аббревиатуры: HyperText Markup Language и Cascading Style Sheets. Чтобы развить свои навыки верстки, стоит обратить внимание на различные фреймворки и препроцессоры, а также изучить какую-нибудь методологию.
Front-end разработка - это непрерывное изучение технологий

Фреймворк — это своего рода каркас (заготовка) для вашего проекта: скачал, установил, пользуешься. Это ускоряет разработку и упрощает дальнейшую поддержку проекта. Существует множество фреймворков как для Front-end, так и для Back-end. Каждый фреймворк решает определенную задачу, таким образом в одном проекте можно скомбинировать несколько фреймворков. В нашей студии мы по объективным причинам отказались от использования таких фреймворков как Bootstrap или Foundation, им на замену пришла собственная дизайн-система, основанная на БЭМ-методолгии. Наши стажеры, в первую очередь, практикуются, осваивая именно эту методологию.

Препроцессор — это некая надстройка над языком. Препроцессоры добавляют расширенные возможности к основному языку, что позваляет вам писать код лаконичнее и структурированее. Препроцессорный код компилируется в «родной» код языка. LESS, SASS, Stylus — это препроцессоры языка CSS. Все они довольно похожи по базовым возможностям. В нашей студии мы активно используем SASS и обучаем этому наших стажеров.

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

Следующим шагом во фронтэнде может стать изучение JavaScript — единственного языка программирования, который понимает браузер. JavaScript довольно сложен в изучении, так как существует множество неявных моментов в его работе. Но в дальнейшем это может даже сыграть вам на руку. Для JavaScript также существуют различные фреймворки, препроцессоры и библиотеки. Путь JS-программиста в студии Верный Код лежит через освоение JQuery. Нет ничего плохого, чтобы не углубляться в чистый JavaScript, а решать задачи с помощью сторонней библиотеки. JQuery прост в изучении и решает 99% задач верстальщика.

И вот когда вы уже оперируете БЭМ-сущностями, пользуетесь препроцессором для написания таблицы стилей и обращаетесь к DOM через $, стоит задуматься об автоматизации всех процессов, чтобы сделать уровень рутины 0%. И тут на помощь приходит task-runner. Мы активно пользуемся сборщиком проектов Gulp. Наши стажеры говорят, что разработка до Gulp и после, это небо и земля. Никто уже не хочет делать те задачи вручную, что делает автоматически сборщик. А именно компиляция препроцессорного кода, конкатинация файлов, минификация файлов, оптимизация изображений, сборка спрайтов и многое другое.

В front-end разработке всегда есть, куда расти и чему учиться

Читать далее