Современные архитектуры фронт-энда

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

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

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

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

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

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

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

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

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

Знать HTML и CSS. Под этим подразумеваются навыки кроссбраузерной и адаптивной верстки, знание популярных CSS-фреймворков, препроцессоров и HTML-шаблонизаторов.

Знать JavaScript, в частности стандарт Ecmascript 6 — спецификацию 2015 года, принесшую языку новые элементы синтаксиса и новый уровень производительности.

Иметь базовые навыки работы в консоли и пользования пакетным менеджером NPM, позволяющим быстро и удобно загружать JavaScript-библиотеки и приложения.

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

Уметь работать со сборщиком проектов (это небольшой код, определяющий последовательность действий при автоматическом запуске приложения из командной строки)

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

Базово знать один из современных фреймворков: React, Angular или Vue.js

С их помощью разработчик может минимизировать количество обращений к DOM (Document Object Model — объектная модель документа) и организовать мгновенный обмен данными с сервером через API. Вместо того чтобы по каждому клику перезагружать страницу целиком, фреймворк управляет состоянием ее отдельных компонентов, обеспечивая пользователю мгновенный отклик приложения. Подразумевается, что если человек сумел освоить один из них, то сможет достаточно быстро разобраться с другим, если возникнет необходимость. Есть довольно много вакансий, где требуется какой-то конкретный фреймворк.

Знать английский. Не факт, что от соискателя сразу потребуется обсуждать что-то со штаб-квартирой Facebook, но реакции «Тут нет документации на русском, поэтому я не смогу разобраться» тоже уже не принимаются.

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

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

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

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

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

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

Траектории того, как приходят во frontend, разные. Читайте историю Марка Соболева, который служил в полиции, а теперь разрабатывает образовательные сервисы.

Web performance. Adopt

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

Важно, чтобы скорость интерфейсов была в культуре разработки

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

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

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

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

В нашем блоге мы подробно раскрывали тему производительности, рекомендуем ознакомиться:

• Клиентский мониторинг производительности
• Синтетический мониторинг производительности

Dependency Injection. Adopt

Мы рекомендуем использовать паттерн DI и вместе с ним IoC-контейнеры. Кажется, что DI не сильно распространен во фронтенд-разработке за пределами Angular, но у нас в компании этот паттерн получил широкий охват, в том числе на проектах с React, где мы используем собственный фреймворк Tramvai.js, который построен на DI.

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

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

Наш коллега Сергей Нестеров сделал доклад Dependency injection в React-приложении — советуем посмотреть.

Какие направления существуют в веб-разработке

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

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

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

Универсальные знания, которыми должен обладать любой веб-разработчик — это Git и работа с Linux-окружением

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

Рефакторинг кода на Javascript. Мартин Фаулер

Мы поняли как работают события, что такое замыкания, как использовать генераторы, как убежать от адской пирамиды вызовов и самое главное — с помощью чего. Теперь время писать код. Вот только мы не знаем самого главного в любом коде — способов его организации. На просторах интернета и в книгах, о которых я напишу ниже вы сможете увидеть такие понятия как DRY, SOLID, KISS, YAGNI — это все общие положения, немного размытые, о построении архитектуры кода, приложения.

В Книге Фаулера идет полное описание каждого действия в момент рефакторинга кода. И да, Мартин Фаулер описал все способы — поверьте, Фаулер докопался и описал даже способ рефакторинга «Вынос в функцию». По факту — книга полноценный справочник или очень хорошая настольная энциклопедия, которая служит на благо архитектуры вашего кода.

Как стать front-end разработчиком

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

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

1. Совершенствовать свои навыки как специалиста, занимаясь различными проектами в роли фрилансера – это горизонтальный путь развития.
2. Устроиться в компанию и расти по карьерной лестнице – это вертикальный путь развития.

Основное правило в процессе обучения и совершенствования – ставить реальные цели и постоянно заниматься практикой

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

React + Flux

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

JavaScript-библиотека для построения интерфейсов

Facebook создал React и Flux для решения некоторых недостатков MVC и проблем с масштабированием. Посмотрите их широко известную презентацию Hacker Way: Rethinking Web App Development at Facebook. В ней говорится о происхождении и особенностях Flux.

Чтоб начать работу с React и Flux, сперва изучите React. Хорошим учебником для начинающих будет документация React. После этого переходите к React.js Introduction For People Who Know Just Enough jQuery To Get By, чтобы помочь себе отойти от jQuery-мышления.

Когда у вас появится общее представление о React, начинайте изучать Flux. Стоит сперва прочитать официальную документацию Flux. После этого посетите Awesome React — сборник ссылок, которые помогут продвинуться дальше в вашем обучении.

Практика с фреймворками

Теперь вы имеете общие знания о JavaScript-фреймворках и архитектурных шаблонах и настало время применить их на практике

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

И не забывайте развлекаться

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

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

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

P.S. от переводчика:

Machine learning in Frontend. Trial

ML может применяться в задачах разработки веб-интерфейсов. Благодаря библиотеке Tensorflow, которая является одной из популярных библиотек для ML и имеет версию для Node.js и браузера, мы получаем возможность машинного обучения на известном стеке. Здесь JavaScript подтверждает свою универсальность.

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

Одна из наших команд экспериментировала и сделала сервис, предсказывающий вероятность посещения следующей страницы. Затем интегрировала этот сервис в стратегию предзагрузки одного из проектов — теперь в некоторых случаях пользователь при переходе на следующую страницу увидит ее моментально, без ожидания загрузки. Мы разработали свое решение на базе Tensorflow.js. Конкретно для этой задачи существует open-source-решение от Google — Guess.js, которое на основе данных из Google Analytics делает похожее. Советуем попробовать.

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

Фронт + бэк = фулстэк

Если в двух словах, то фронтенд (Front-end) — это сцена, бэкенд (Back-end) — закулисье, а фулстек (Full Stack) — их совокупность, то есть вся подготовительная работа к спектаклю и сам спектакль.

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

• Превращает макет дизайнера в код. Щелкните правой кнопкой мыши прямо сейчас, выберите «Исходный код страницы» — его написал фронтендер.

• Оживляет дизайн с помощью интерактивных элементов, например, онлайн-калькулятора на строительном сайте.

• Следит, чтобы информация корректно отображалась на разных устройствах. Если в мобильной версии все «поехало», это недочет фронтендера.

• Готовит данные к отправке на сервер или в сторонние приложения.

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

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

Коды для фронта и бэка пишутся на разных языках. Для первого наиболее актуальны HTML, CSS, JavaScript, для второго — Ruby, PHP, Python, Java.

Фулстэк-разработчик владеет сразу несколькими языками, отвечает и за «темную» серверную сторону, и за «светлую» пользовательскую. Иногда он также обладает компетенциями UI/UX-дизайнера. В общем, универсал.

Перспективы в профессии

Веб — перспективная отрасль для роста: профессионального и финансового. Даже новички могут претендовать на достойную зарплату. По состоянию на 26 апреля 2021 года на HeadHunter опубликовано 183 вакансии для фронтендеров без опыта работы. В 58-и из них предлагают от 65 000 рублей в месяц. Есть и более высокооплачиваемая работа. Специалист с опытом 3-6 лет может получать 300 000 — 400 000 рублей в месяц.

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

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

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

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

Доход фронтендера, выбравшего «узкий» путь развития, растет в соответствии с категориями.

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

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

Результат

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

1. За отображение отвечает фронтенд, а за данные — бэкенд.
2. На фронтенде сохранилась гибкость в плане запросов и получения данных. Интерфейс знает, что можно попросить у сервера и какие ответы должны быть.
3. На бэкенде появилась возможность менять код с уверенностью, что интерфейс у пользователя продолжит работать. Стал возможным переход на микросервисную архитектуру без необходимости переделывать весь фронтенд.
4. Появилась возможность использования mock-данных для фронтенда, когда ещё не готов бэкенд.
5. Создание схем совместной работы исключило проблемы взаимодействия, когда команды понимали одну и ту же задачу по-разному. Сократилось количество итераций по переделке форматов данных: действуем по принципу «семь раз отмерь, один раз отрежь».
6. Появилась возможность планировать работы на спринт параллельно.
7. Для реализации отдельных микросервисов теперь можно набирать разработчиков, не знакомых с C++.

Из всего этого главным достижением я бы назвал возможность осознанно развивать команду и проект

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

Стать профессионалом во всём невозможно, но для нас это теперь и не нужно.

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

Интерактивность

Одна из областей применения JavaScript — добавление интерактивности вашей странице

Теперь, когда у вас есть представление о JavaScript как о языке, можно перейти к его применению в вебе. Для понимания того, как JavaScript взаимодействует с сайтами, вы должны сначала узнать об объектной модели документа (DOM).

DOM является отражением структуры HTML-документа. Это древовидная структура, состоящая из объектов JavaScript, которые соответствуют узлам HTML. Для дальнейшего изучения DOM, прочитайте Что такое DOM? в переводе Frontender Magazine. Статья даст вам простое и понятное объяснение понятия DOM.

Инспектируем DOM

JavaScript взаимодействует с DOM и изменяет или обновляет его. Вот пример, в котором мы выбираем HTML элемент и изменяем его содержимое:

var container = document.getElementById(“container”);container.innerHTML = 'New Content!';

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

• Введение в DOM
• Events
• Examples of web and XML development using the DOM
• How to create a DOM tree
• Locating DOM elements using selectors

Опять же, сосредоточьтесь на понимании концепции, минуя синтаксис. У вас должны быть ответы на следующие вопросы:

• Что такое DOM?
• Как обратится к элементам?
• Как добавить обработчик событий?
• Как изменить свойства узла DOM?

Для получения полного списка доступных манипуляций с DOM при помощи JavaScript, обратитесь к JavaScript Functions and Helpers от PlainJS. Этот сайт содержит объяснения того, как, например, менять свойства стилей HTML-элементов или обрабатывать события клавиатуры. Если вы хотите копнуть глубже, то вы всегда можете прочитать раздел о DOM в книге Выразительный JavaScript.

Где пройти обучение на frontend-разработчика

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

1. «Профессия frontend-разработчик» от SkillFactory

SkillFactory – онлайн-портал дополнительного образования в сфере IT. Партнер компании Mail.ru и участник проекта Сколково.

• Чему научитесь: разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML, адаптивные веб-сайты с использованием CSS и Flexbox; делать веб-верстку; изучите архитектуру приложений и бекенд.
• Формат обучения: теоретические уроки и практические тренажеры; живые вебинары.
• Длительность: 7 месяцев.
• Преимущества курса: обучение в удобное время; пять проектов на JavaScript (сайт-визитка, верстка лендинга по макету; слайдер на JavaScript; канбан-доска на React; клиентская часть веб-приложения на сервисе проката велосипедов); именной сертификат о профессиональной подготовке; возможно обучение за счет работодателя.
• Кому подойдет: новичкам и программистам.
• Стоимость: от 42 500 рублей.

2. «Профессия frontend-разработчик с нуля» от Нетологии

Нетология – онлайн-университет удаленных профессий по разным направлениям (дизайн, маркетинг, управление, IT). На рынке более 10 лет. Участник Skolkovo.

3. «Профессия frontend-разработчик» от SkillBox

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

• Чему научитесь: верстать веб-страницы, создавать веб-приложения на React.js или Vue.js, работать с JavaScript и его фреймворками; применять основные алгоритмы и структуры данных; работать в Photoshop и Figma.
• Формат обучения: 18 тематических курсов – 130 модулей и 700 уроков; практические видео уроки, домашние задания, проверка и работа с преподавателями, защита диплома.
• Длительность: 12 месяцев.
• Преимущества: доступ к материалам курса навсегда; помощь с устройством на работу; отсрочка платежа до 3 месяцев.
• Кому подойдет: новичкам и начинающим программистам.
• Стоимость: от 4 745 рублей в месяц сроком до 1 года; полная цена около 100 тысяч рублей.

Что нужно знать и уметь

Фронтенд-специалист – это человек, который знает основы работы по нескольким направлениям. Например, знает как минимум на начальном уровне веб-дизайн и обязанности верстальщика.

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

Профессиональные навыки frontend-разработчика:

• знать и понимать основы верстки и ее методологий;
• создавать одинаковые страницы во всех браузерах и в разных устройствах;
• должен уметь работать с HTML и CSS;
• разбираться во фреймворках – наборе готовых решений, которые помогают создавать интернет-сервисы быстрее;
• иметь знания и навыки работы в JavaScript;
• знать английский язык на уровне Intermediate и выше;
• иметь представление о начальных этапах работы с адаптивным дизайном;

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

Личностные характеристики:

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

Основные инструменты для работы

Frontend-разработчик – это не самая легкая должность. И универсальные инструменты будут упрощать работу специалиста и станут для него незаменимым помощником.

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

1. HTML мы уже затрагивали. Простыми словами это машинный язык для общения с поисковыми системами.
2. CSS – это язык, на котором описывается внешний вид элементов на веб-страницах.
3. JavaScript – язык программирования, на котором написаны библиотеки готовых приложений (скриптов). Он является самым важным для frontend-разработчиков.
4. jQuery – библиотека, которая нужна для создания анимационных деталей и форм онлайн-заявок.
5. Photoshop – используется для разделения макетов, присланных веб-дизайнером, на составные части.
6. Шаблонизаторы – позволяют использовать данные для создания конечных html-страниц в динамическом режиме.

Общий монорепозиторий. Hold

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

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

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

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

Эксперимент 3

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

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

Не важно сделать правильно с первого раза. Важно сделать правильно в конечном результате

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

• Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
• Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
• Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
• Работает ли мой код в Safari так же хорошо, как в Chrome?
• Нельзя ли заменить часть кода на систему сеток, например Skeleton?
• Не слишком ли часто я использую !important? Как я могу это исправить?