Что должен знать FrontEnd разработчик в 2021 году
30.03.2021
18949
Рейтинг: 5 . Проголосовало: 9
Вы проголосовали:
Для голосования нужно авторизироваться
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2021 году? Давайте разберемся.
HTML5 & CSS3
HTML5 и CSS3 — это фундаментальные технологии, без знания которых не обойтись ни одному веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид. Помимо этого, необходимо владеть:
- кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров;
- семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта;
- валидной версткой, которая предполагает полное соответствие кода разработчика всем стандартам W3C — организации, которая создает и внедряет технологические стандарты для World Wide Web.
Уделите особое внимание верстке под мобильные устройства, так как современный веб-потребитель очень много времени проводит в смартфоне. Существует даже специальный подход, при котором сначала верстается веб-сайт под мобильные устройства, а только потом под десктопы — называется Mobile First.
Это общие требования по верстке. Теперь же рассмотрим более детально требования конкретно по языку стилей. Здесь вы должны знать основные свойства CSS3: фоны, градиенты, тени, анимации, трансформации, переходы, а также технологии Flex и Grid, о которых мы еще поговорим.
Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.
Качественно изучить HTML и CSS вы сможете при помощи следующих наших курсов:
- HTML5 & CSS3 Стартовый;
- HTML5 & CSS3 Базовый;
- HTML5 & CSS3 Углубленный.
Flex и Grid CSS
Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку — cssgridgarden.com.
На нашем ресурсе также есть курсы, которые хорошо объясняют темы Flex и Grid верстки: “Верстка сайта на CSS Grid”, “Верстка сайта на FlexBox CSS”.
Bootstrap 4
Популярная HTML/CSS платформа для разработки адаптивных веб-приложений, которую применяют при создании сайтов и интерфейсов администраторских панелей. Основные преимущества Bootstrap:
- высокая скорость верстки;
- кроссбраузерность и кроссплатформенность;
- наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов;
- низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).
Также, будет полезно знать еще 2 CSS-фреймворка: Foundation и Materialize. Первый является комплексным и профессиональным инструментом, который следует принципу Mobile First. Имеет продвинутый интерфейс и позволяет создавать действительно уникальные, элегантные и легко настраиваемые веб-сайты. Под эгидой Foundation были созданы такие веб-сервисы, как: Facebook, Mozilla, Adobe, Amazon, eBay и многие другие.
Materialize исповедует принципы Material Design от компании Google, которые преследуют идеи цифровой унификации для более легкого и комфортного восприятия интерфейса. На сайте material.io можно более детально ознакомиться с идеологией материального дизайна. Фреймворк Materialize незаменим при разработке несложного многостраничного веб-сайта или лендинга за счет богатых возможностей уже готовых и встроенных компонентов и стилей. Также, Materialize предоставляет разные компоненты и варианты поведения, обычно не встречающиеся в других фронтенд-фреймворках (поведение волн, scrollFire, scrollSpy, или специфичные для мобильных устройств выдвижные меню и всплывающие подсказки и т. д.).
Foundation подходит разработчикам с опытом, в то время, как Materialize — отличный выбор для начинающих девелоперов, которые хотят как можно плотнее познакомиться с материальным дизайном.
CSS препроцессоры
CSS препроцессор — это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для:
Тема связана со специальностями:
- ускорения процесса написания кода;
- упрощения чтения кода и дальнейшей его поддержки;
- минимизации рутинной работы при написании кода.
Для повышения эффективности написания CSS кода вполне достаточным будет изучение лишь одного препроцессора.
Git & GitHub
Git — наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии.
Помимо этого, стоит уметь работать с сервисом онлайн-хостинга проектов, использующих систему контроля версий. В данном случае это GitHub. В тандеме с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах.
Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы.
Git & GitHub — очень важные инструменты для любого IT-разработчика, изучением которых следует заняться как можно раньше.
Мы рекомендуем изучать Git на ITVDN при помощи курса “Основы работы с Git”.
Знания о веб-технологиях и сети интернет
Чтобы качественно выполнять свою работу, фронтенд разработчик должен разбираться в вебе и понимать принципы его функционирования. Таким образом, необходимо знать:
- как работает интернет;
- протоколы HTTP/HTTPS, веб-сокеты;
- как работают браузеры;
- что такое DNS и как он работает;
- что такое доменное имя;
- что такое хостинг.
Также, будет неплохо, если вы попробуете настроить сайт на каком-нибудь бесплатном хостинге, привяжете домен к этому хостингу.
JavaScript
Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно — JS) можно писать даже настольные и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:
- динамически изменять разметку;
- осуществлять интерактивное взаимодействие с пользователем;
- анимировать изображения;
- совершать валидацию форм;
- управлять мультимедиа и т. д.
Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.
Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:
“JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник)
JavaScript использует официальный стандарт ECMAScript (сокращенно — ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6+.
Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.
ITVDN предоставляет возможность изучить JavaScript с нуля до продвинутого уровня при помощи курсов:
- JavaScript Стартовый;
- JavaScript Углубленный;
- JavaScript: Расширенные возможности.
Линтеры
Инструменты, которые позволяют анализировать качество JavaScript-кода согласно определенному стандарту ES. Они встраиваются в среду разработки и указывают на наличие несоответствий стандарту в коде, если таковые имеются. Данный механизм полезен как для одиночной разработки (для самоконтроля), так и для командной, когда каждый разработчик должен следовать одним и тем же языковым конструкциям, дабы на выходе получить единый, целостный проект. Среди известных линтеров можно выделить ESLint и Prettier.
Тестирование
Jest, Cypress и Enzyme — главные инструменты модульного тестирования, которое возлагается на плечи разработчика. Но что это такое?
Unit тестирование (оно же — модульное тестирование) — процесс, который заключается в создании тестов для проверки работоспособности отдельных участков написанного программистом кода. Выполняется непосредственно автором кода.
Какую пользу приносит Unit тестирование:
- существенное сокращение багов в коде;
- упрощение рефакторинга кода;
- обеспечение качественного отделения интерфейса от реализации;
- лучшее понимание написанного кода;
- возможность протестировать мельчайшие участки кода.
Все три инструмента учить не надо — достаточно научиться управляться лишь с одним из них.
Паттерны проектирования JavaScript
Это лучшие практики, которые описывают типичные способы решения распространенных задач, возникающих в ходе проектирования программного обеспечения. Знание шаблонов проектирования позволяет писать более чистый, понятный и читаемый код, а также избегать “изобретения велосипеда”. Более того, владение паттернами показывает вашу грамотность, как разработчика, и повышает вашу ценность в глазах работодателя, что поможет выделиться на фоне конкурентов.
Видео курсы по схожей тематике:
Visual Studio 2013 Tips & Tricks
Как стать программистом?
HTML5 Web Components
Чтобы вы могли хорошенько разобраться с темой шаблонов в JavaScript, рекомендуем курс “JavaScript Шаблоны”.
Алгоритмы и структуры данных
Понимание алгоритмов и структур данных — обязательные знания для любого программиста.
К структурам данных относятся: стеки, очереди, связанные списки, графы и т. д. Изучив их, вы сможете управлять сложностью своих программ, делая их более доступными для понимания, а также разрабатывать высокопроизводительные программы, которые будут эффективно работать с памятью.
Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач. Когда говорят об алгоритмах, обычно имеют ввиду алгоритмы сортировки и поиска: сортировки прямым включением, прямым выбором, слиянием, пирамидальная, прямой поиск, бинарный, индексно-последовательный и другие.
Важно разбираться и в нотации Big O, которая описывает сложность каждого алгоритма. Данный механизм помогает определить, при каких условиях выгоднее использовать тот или иной алгоритм.
Отметим, что как новичку, вам не надо нырять вглубь этих тем. Будет достаточно теоретического владения, а также умения написать несколько алгоритмов. В разработке сайтов это не сильно нужно, но практически ни одно собеседование не обходит стороной тему шаблонов, алгоритмов и структур данных.
Фреймворки JavaScript
Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.
Самыми популярными фреймворками для фронтенд-разработки можно назвать Vue.js, React и Angular. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js — самый легкий (но и с наименьшим сообществом), React — средней сложности, Angular — высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий.
Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. На данный момент наибольшей популярностью пользуется React, поскольку он сбалансирован как с точки зрения сложности, так и с точки зрения богатства функционала. К тому же, наибольшее количество вакансий припадает именно на этот фреймворк, а значит, что он интересен не только разработчикам, но и бизнесу.
Каждый из фреймворков доступен для изучения на платформе ITVDN. По направлению Angular:
- Angular 11.0 Базовый;
- Angular Углубленный.
По направлению React:
По направлению Vue.js:
Инструменты управления состоянием приложения (State Management)
Большие веб-приложения постоянно растут в сложности, а потому хранить данные, которые могут использоваться в разных местах становится все сложнее. Для решения этой проблемы были придуманы отдельные библиотеки, идущие параллельно с фреймворками — они служат для управления глобальным хранилищем данных всего веб-приложения и называются менеджерами состояний. Их применение уже стало стандартом во FrontEnd разработке. Для девелоперов, которые используют Vue.js, это VueX, для React-разработчиков — Redux и MobX, для Angular-девов — RxJS, NgRx.
JavaScript Core (DOM, AJAX, JSON)
DOM (Document Object Model) — объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.
AJAX (Asynchronous JavaScript And XML) — это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию:
- встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера);
- JavaScript и HTML DOM (чтобы отображать или использовать данные).
AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке — обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях).
JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP.
Все три технологии являют особую ценность для каждого веб-разработчика и раскрывают организацию работы интернет-приложения.
БЭМ
“Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.).
Webpack
Мощный сборщик модулей, который позволяет скомпилировать в один файл несколько разных модулей. Используется во время работы над объемными проектами. Успешно применяется как во фронтенд-разработке, так и при создании бэкенд-приложений.
Gulp / Grunt
Системы сборки, которые автоматизируют рутинные задачи разработчиков: минификацию кода, оптимизацию изображений, тестирование, анализ качества кода и прочее. Подходят при разработке небольших проектов.
TypeScript
Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать. В большинстве случаев его необходимо изучать лишь тем, кто ориентирован на работу с фреймворком Angular.
Бесплатные вебинары по схожей тематике:
Инструменты современного фронтенда: Yarn, webpack, React, Angular, Babel, ESLint, TypeScript, Sass, Styled-Components.
Как стать Frontend-разработчиком в 2023 году
10 ключевых ошибок во время собеседования
SVG
Язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением, не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других.
Английский язык
Знание английского языка является одним из основных требований к фронтенд-разработчику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.
Итоги
FrontEnd разработчик — достаточно универсальный боец в мире веб-разработки. Он должен уметь и верстать, и создавать логику работы клиентской части, и понимать работу серверной части веб-приложения. Для освоения такого обширного инструментария стоит запастись временем, терпением и упорством. Перечисленные в статье средства разработки сайтов также имеют аналоги, поскольку для решения разных задач подходят разные веб-инструменты. Однако мы выбрали самые популярные и эффективные из них.
Если у вас остались вопросы о последовательности и необходимости изучения тех или иных технологий, ответы вы можете найти в видео ”Как стать FrontEnd разработчиком?”, в котором подробно рассматриваются основные технологии создания клиентских веб-приложений.
Для тех, кто хочет стать FrontEnd разработчиком, на ITVDN создана комплексная программа обучения, которая включает в себя 42 видео курса.
Желаем вам успехов в достижении ваших целей!
Путь в ИТ: фронтенд-разработчик
Меня зовут Дима, мне 34 года, я руководитель команды фронтенд-разработчиков в Тинькофф.
В компанию я пришел в 2015 году, за восемь лет вырос из джуна в тимлида в разных командах и проектах. А в целом в ИТ попал извилистым путем. Подростком меня в какой-то момент потянуло в медицину, я собрался стать врачом, даже окончил медицинский университет и почти стал офтальмологом.
Как такового образования в ИТ-сфере я не получал, даже не проходил курсов. Учился опытным путем, много гуглил. Базовые книги для программистов и учебники для чайников я, конечно, освоил, но в основном плыл по течению. Помню, у меня была и книжка по HTML, бумажная, кто-то когда-то мне подарил, и я ее долго изучал.
Конечно, мне действительно помог Гугл: вбиваешь в поиск интересующие темы — и всегда что-то находишь. Этот принцип работал десять лет назад, отлично работает и сейчас для тех, кто набирается опыта в разработке.
Расскажу о своей карьерной и образовательной траектории: как стал фронтендером, где набирался знаний и учился руководить.
Мое рабочее место
Что такое фронтенд-разработка
Фронтенд — внешняя часть сайтов и приложений. Все, что мы видим и с чем взаимодействуем. Фронтенд-разработчик верстает веб-страницы и разрабатывает функциональность сайтов: прописывает логику обработки данных пользовательских форм, работы кнопок и других элементов взаимодействия с интерфейсом.
Ступени роста: стажер — джуниор — мидл — сениор. С каждым новым уровнем сложность задач и ответственность увеличиваются. Чем опытнее разработчик, тем меньше, как правило, он пишет код и тем больше руководит, если у него есть склонность и желание — становится тимлидом.
Бывает так, что команде срочно нужен тимлид, и им просто становится лучший разработчик. Или начальство не может предложить других вариантов развития, кроме как стать лидом.
В задачи тимлида команды фронтендеров входит менеджмент задач и организация рабочего процесса, пипл-менеджмент (развитие людей, отслеживание мотивации и так далее), составление отчетности. Это дела другой специфики, более сложные, чем может показаться на первый взгляд, особенно если ты никогда этим не занимался.
Как выбрать лучший ИТ-курс
Сравнятор поможет: покажет, какие курсы есть на разных платформах и как отзываются о них люди
Подобрать курс
Если опытный фронтендер не хочет руководить, он может продолжать кодить, глубже погружаться в процесс: писать бэкенд, разбираться в инфраструктуре, на каких серверах что крутится. В таком случае образовательная траектория похожа на букву T: специалист неплохо разбирается в нескольких технологиях, но глубоко и хорошо знает одну.
Популярные языки фронтенд-разработки — HTML, CSS, JavaScript. HTML позволяет создавать веб-страницы и приложения для любого браузера, но в современных системах нужны и JavaScript, и CSS, плюс большое количество библиотек и фреймворков и умение выбирать нужные языки и приемы под задачи конкретного проекта. Все эти языки не альтернативы друг другу, а используются для разных целей. HTML необходим для разметки страницы, CSS — для стилизации, JS — для интерактивности. Хочешь стать фронтендером — учишь все.
Термины
HTML, HyperText MarkUp Language — язык гипертекстовой разметки веб-страницы. Он используется для того, чтобы браузеру было понятно, как отображать сайт: его структуру, его вид и его контент.
CSS, Cascading Style Sheets — язык, который служит для описания оформления внешнего вида документа, который был написан на языке разметки ( тот же HTML). CSS незаменим при оформлении страниц сайтов, ведь в одном файле содержится вся информация об отображении всех элементов документа.
JavaScript — динамический язык программирования, который тоже может встраиваться в HTML. Он дает возможность сделать сайт более интерактивным, интересным и динамичным. Например, когда пользователь нажимает «лайк» на фотографии, а у автора снимка выскакивает сердечко — это все JavaScript.
Библиотека — сборник подпрограмм или объектов, которые используются для разработки.
Образование и первые шаги в программировании
Я родился, вырос и получил образование в Москве. Окончил обычную, хотя и хорошую, среднюю общеобразовательную школу № 1285 с углубленным изучением английского языка. Меня интересовали естественные науки: химия, биология, физика.
Первый компьютер в моей жизни появился, когда я был уже классе в шестом, в 2000 году. Я стал делать небольшие сайты с помощью хостинга narod.ru, прописывал их проекты в тетрадках, но потом увлечение сошло на нет.
Одна из книжек, которая повлияла на меня в молодости: «Новейшая энциклопедия — интернет 2003», «Олма-пресс»
Семья уговорила меня пойти в медицину. Я поступил в Московский государственный медико-стоматологический университет имени А. И. Евдокимова на лечебный факультет.
Учился на дневном отделении шесть лет: было сложно, но интересно. В конце пятого курса появились сомнения, хочу ли я дальше развиваться в этой области. Тогда же я с приятелем начал делать интернет-клуб для путешественников, мы собирали разные мероприятия и проекты. В мою зону ответственности входили написание и поддержка одного сайта. Однако это было скорее хобби, несмотря на то, что нужные навыки были со мной с того подросткового увлечения.
С четвертого курса я посещал студенческий кружок по глазным болезням, где мы разбирали разные интересные случаи из практики. Наблюдая за микрохирургическими операциями на глазах, я думал, что именно этим и хочу заниматься. Потом я поступил в ординатуру на кафедру глазных болезней ФПДО, которая базируется в НИИ им. Гельмгольца, где пришлось плотно взаимодействовать с пациентами в ходе поликлинической практики. За несколько месяцев стало понятно, что в жизни мне нужно что-то другое.
Первый рабочий опыт в ИТ
Еще на первом курсе ординатуры мой приятель, с которым мы занимались упомянутым сайтом, предложил открыть веб-студию . Я согласился, проработал в ней почти два года, с 2014 по 2016. Мы занимались разработкой и продвижением веб-сайтов , ивентами и пиар-обслуживанием проектов.
Самое начало работы в офисе
Доска с задачами
В компании я занимался всем чем только можно: делал сайты, искал клиентов, думал над продвижением, руководил маленькой командой разработчиков. Чем больше мы развивались, тем больше я занимался разработкой, а для всего остального нанимали других людей.
Я писал в основном на PHP — по большей части создавал небольшие модули для готовых движков сайтов WordPress и ModX, но были и более сложные проекты, для которых приходилось с головой залезать в Гугл, чтобы сделать фронтенд посложнее: хитрые калькуляторы, мудреные формы со сложным поведением и так далее. Для одного из заказчиков я, например, создал систему работы с клиентами, включавшую CRM, систему управления расписанием и генерации документации. Стек на бэкенде — PHP + MySQL, фронтенд был несложный, максимум библиотека jQuery.
Что касается дизайна — своего работника внутри компании у нас не было, обычно мы нанимали кого-нибудь на фрилансе. В принципе для многих вещей у нас своих людей в компании не было, мы часто нанимали также копирайтеров и даже разработчиков, если все наши были заняты.
Термины
PHP, Hypertext Preprocessor — язык программирования общего назначения с открытым кодом. По большей части он используется для разработки веб-приложений . Программы, написанные на РНР, могут получать данные от пользователей, обрабатывать их, обращаться к базам данных и возвращать на сайт обработанную информацию. Код, написанный на РНР, может внедряться непосредственно в HTML.
CMS, Content Management System — информационная система или компьютерная программа, которая помогает создавать контент сайта, редактировать его и управлять им; как я упоминал выше, ее называют движком сайта. С помощью CMS можно редактировать содержание сайта, дополнять информацию, загружать аудио и видео, управлять их оформлением.
CRM, Customer Relationship Management — система, с помощью которой можно контролировать все каналы коммуникации с клиентами и автоматизировать продажи. Обычно в нее входят программы для сбора данных о клиентах, управления сделками, контроля за менеджерами, аналитики и прогнозирования.
MySQL — система управления базами данных, распространяемая в виде свободного ПО. Фактически MySQL создает базу данных для хранения и управления данными.
jQuery — библиотека JavaScript или JavaScript Framework, по сути, набор готовых функций языка JavaScript.
Мой личный доход с 2014 по 2016 мог колебаться от нуля до нескольких сотен тысяч рублей в месяц — в зависимости от количества проектов. Ноль был результатом того, что все уходило на зарплаты сотрудникам, а каких-то новых выгодных проектов не появлялось.
Заказчики были самые разные — от строительных компаний до банков и учебных заведений, вот пара примеров: сайт для НОУ «Арт-алекс» и управляющей компании «Садко-финанс» — одной из дочерних компаний «Дил-банка», нашего постоянного клиента.
Один из проектов нашей компании
И еще один
«Дил-банк» был нашим постоянным и самым крупным клиентом, мы делали сайты для его многочисленных дочерних компаний. Банк приносил нам львиную долю дохода, но в какой-то момент у него отозвали лицензию, он закрылся. По нам закрытие сильно ударило — исчезло 80% выручки.
В 2015 году, когда случилась история с банком, я задумался о том, чтобы найти более стабильную работу, к тому же у меня появился ребенок. Я наконец серьезно подошел к вопросу о том, чем хочу заниматься в сфере разработки, с опорой на предыдущий опыт. В 2016 году я ушел из компании. Насколько я знаю, она жива и занимается тем же , чем и раньше — под руководством того же моего приятеля.
Как я попал в Тинькофф
Еще до поисков работы я начал изучать JavaScript, хотя занимался бэкенд-разработкой на PHP, а версткой — на HTML и CSS. Когда в нашей с другом компании стали появляться сайты с динамикой на фронтенде, захотелось научиться делать ее самому. Сначала я пользовался jQuery — относительно простой библиотекой для фронтенда. Но ее не хватало, поэтому я и взялся за JavaScript.
В изучении языка мне помог сайт learn.javascript.ru — «библия», известная каждому фронтендеру. Площадка помогла мне и с точки зрения подготовки к собеседованиям — я освоил почти все, что было на ней в свободном доступе, хотя там есть и платные курсы. Скажем, курс для новичков в 2023 году стоит 23 000 ₽.
Освоение информации и обучение новым навыкам мне всегда давалось легко, так что я быстро вобрал в себя нужную информацию и отправил резюме в пару компаний, одной из которых и был Тинькофф — сюда резюме я передал через знакомого.
Под «быстро вобрал» я имею в виду, что я не погружался в учебники с головой, скорее закрывал пробелы в определенных темах, с которыми был знаком по предыдущему опыту. Да и пробелы были не систематическими, а ситуативными: когда мне нужно было узнать, как решить ту или иную задачу, искал конкретное решение.
Получается, на образование в сфере ИТ за несколько лет я не потратил ни рубля.
Подчеркну: все сразу выучить невозможно, да и смысла в этом нет. У веба множество инструментов взаимодействия с пользователем, а у клиентов всегда будут самые разнообразные задачи. Интернет-магазины, различного рода приложения — от простых прикладных калькуляторов до сложных редакторов.
Знания одного или даже двух инструментов не хватит, чтобы развиваться и работать разработчиком. Поэтому важно просто быть знакомым с разными фреймворками, библиотеками и прочими инструментами, и если не владеть ими профессионально, то хотя бы понимать, что они из себя представляют и в каких ситуациях понадобятся.
Через пару недель после собеседования мне позвонили из Тинькофф, и я узнал, что мне одобрили кредитную карту. Это было не совсем то, что я ожидал, но предложением все же воспользовался. Спустя еще неделю я решил позвонить сам и вскоре после этого получил оффер.
Собеседования в ИТ
Выходит, у меня в карьере было всего два собеседования: в Тинькофф и в ту другую компанию. По ощущениям, интервью в банк я прошел средне: показалось, не знал ответов на половину вопросов из теоретической части.
Лет шесть назад собеседования проходили достаточно просто и быстро — задавали стандартные вопросы, в основном теоретического характера о наследовании или контексте, давали алгоритмические задачи. Разве только у «Яндекса» и еще пары крупных компаний проявлялся «синдром гугловости». Они стали делать все «как положено»: делить процесс собеседования на раунды, где каждый последующий сложнее предыдущего.
Но и рынок был другим. Раньше и конкуренция за разработчиками между компаниями была поменьше, и сам поиск работы отнимал гораздо больше сил и времени — ты выбирал максимум три-пять компаний, желательно в транспортной доступности, а потом ехал в офис на собеседование.
Сейчас есть возможность удаленно проходить хоть по два-три собеседования в день. В этом плане выбор заметно вырос, ведь вырос и спрос на разработчиков. Кроме того, теперь разбивка собеседований на различные этапы — подход, принятый почти во всех крупных компаниях.
Количество раундов ограничивается более-менее адекватным значением — например, до четырех, чтобы процесс не превращался в гонки на выживание. Долгий процесс найма никому не выгоден. Разработчик, если его долго мучить, может легко решить, что ему незачем проходить очередные два-три раунда и уйти в другую компанию. Как я уже говорил, спрос на фронтенд-специалистов высокий.
Вместе с тем, если слишком просто подходить к собеседованию, всегда есть риск нанять некомпетентного человека. Кто бы что ни говорил, разработчик — интеллектуальная профессия.
Может, не всегда — рокет-сайнс, но курсы, которые говорят, что разработчиком может стать каждый, на мой взгляд, врут. Не каждый может стать разработчиком: необходимые компетенции приобретаются только трудом и усилиями, а для этого нужны предрасположенность и интерес к профессии. Никакой человек не будет в поте лица изучать программирование, если ему это неинтересно. Полагаю, это касается едва ли не любой специальности.
Раньше на собеседованиях практических задач было мало, и в основном была теория, но в Тинькофф мы ушли от этого несколько лет назад: сейчас делаем упор на практические испытания. Например, найти ошибку в коде и закодить какое-то решение. Такие испытания больше говорят о реальных навыках и гораздо лучше воспринимаются кандидатами — бессмысленные теоретические вопросы о прототипном наследовании надоели всем еще десять лет назад.
В Тинькофф кандидат, проходя собеседование, попадает в череду фильтров, в воронку.
Первый фильтр — отбор резюме рекрутером. Второй — отбор резюме из базы, набранной рекрутером. Резюме выбирает человек, который разбирается в специфике профессии и непосредственно интервьюирует кандидатов.
Далее идет фильтр технического скрининга: интервьюер связывается с кандидатом и в недолгой беседе выявляет его софт-скиллы и базовые технические знания. Беседа состоит из 15 вопросов с односложными ответами. Вопросы простые, если человек не справляется хотя бы с пятью вопросами — мы его не берем.
Далее следуют две или три технические секции, в других компаниях бывает и больше. Первая секция называется платформенной, на ней мы проверяем знания и навыки кандидата в области JS и его рабочего фреймворка. Вторая секция посвящена программированию: проверяем навык решения абстрактных алгоритмических задач и способность кандидата ясно выразить свои мысли в коде. Для кандидатов высокого уровня мы проводим архитектурную секцию. Код на ней мы не пишем, вместо этого голосом обсуждаем, как бы кандидат спроектировал какое-нибудь крупное приложение или сайт.
Рынок растет большими шагами. Мой личный доход за пять лет вырос в 7—8 раз . Стартовые зарплаты на разных позициях можно распределить так:
- джуниор: от 56 000 ₽;
- мидл: от 150 000 ₽;
- сениор: от 230 000 ₽.
По поводу синдрома самозванца, о котором иногда говорят, затрагивая тему работы в ИТ, — сам я им точно не страдаю. На мой взгляд, если такие проблемы есть, их надо решать с психологом. Напротив, как человек, непосредственно участвующий в найме, могу сказать, что у разработчиков часто встречается обратная проблема — многие себя переоценивают.
Половина разработчиков, считающих себя сениорами, проходят у нас собеседование на джуна. Иногда это происходит из-за того, что их слишком сильно и часто повышали на предыдущем месте работы. И «зарплату в 100 000 рублей» на позиции джуна воспринимают как плевок в лицо.
Поток «Психотерапия» — о ментальном здоровье и о том, как его поддерживать
Процессы в большой компании
За годы в Тинькофф меня помотало. Один коллега, который пришел в банк в одно время со мной, рос именно как разработчик, теперь он архитектор и руководитель кор-команды . Отвечает за разработку общих инструментов, которыми пользуются в работе другие команды в компании. Круто, но это не мой путь.
В компанию я пришел как джуниор в 2015 году. Оставалось несколько месяцев до запуска новой версии интернет-банка. Всего в Тинькофф тогда работало человек 40 фронтендеров, а в команде интернет-банка 15—20 . Я оказался среди них.
Постепенно мы начали делиться на подкоманды, но я работал обособленно над объемными задачами. Создавал онбординг для новой версии сайта, систему отслеживания действий пользователя, написал библиотеки для трекинга и пуш-уведомлений .
Термины
Архитектура — совокупность важнейших решений об организации программной системы. Важные понятия и составляющие архитектуры — это выбор структурных элементов и их интерфейсов (а также их поведение, то есть то, как они работают), соединение этих самых элементов и их поведение в более крупных системах, а также архитектурный стиль (который обуславливает, как именно сделано все перечисленное выше).
React-архитектура — разработка архитектуры программного обеспечения с помощью JavaScript-библиотеки React, которая обладает открытым исходным кодом для разработки пользовательских интерфейсов.
Flux-архитектура — архитектурный подход, решение ( или же набор шаблонов программирования) для построения пользовательского интерфейса веб-приложений . Одна из самых популярных реализаций такой архитектуры — это библиотека Redux.
Создание системы пушей на сайте банка — одна из моих первых рабочих задач, и я не был близко с ней знаком. Но принцип «нашел информацию, обучился, сделал, решил проблему» не подвел и тут. Нужно было работать с уведомлениями, которые приходят пользователю перед автоматическим разлогином из системы, когда тот бездействует долгое время, или же с рекламными уведомлениями — и это две разные технологии.
С задачей подобного рода мне больше работать не приходилось. А вот глубже погружаться в архитектуру я начал спустя пару лет после прихода в банк. Тут недостаточно прочитать одну книжку, погуглить или изучить один сайт.
Каждый день я учился чему-то новому, всегда было интересно и посильно. Так что не скажу, что было сложно. Не накатывало паническое ощущение, что я слишком многого не знаю и никогда не узнаю — и поэтому что-то обязательно не получится. Возможно, такое отношение осталось с учебы в меде. Учиться там всегда сложно, ты многого не знаешь и не можешь знать: если постоянно загоняться по этому поводу, никаких сил и нервов не хватит. Поэтому, когда я понимаю, что чего-то не знаю, я уверен, что смогу изучить и понять проблему, если будет нужно. Ведь я знаю, что это реально — так все работает.
Я участвовал в работе над интернет-платформой три месяца. После успешного релиза всей команде пришла премия, и мне в том числе — было очень приятно. Уже в 2017 году весь коллектив окончательно разбился на мини-команды, а меня повысили — я стал лидом одной из них. В сферу ответственности моей команды входили главная страница сайта, профиль и несколько других разделов сайта. Одна из самых интересных задач — реализация персонализированной главной страницы для неавторизованных пользователей.
Тогда я не понимал, в чем заключаются обязанности лида, кем мне быть и что делать. Казалось, ты должен разбираться во всем, что делает команда и каждый отдельный сотрудник, проводить код-ревью , самому выполнять отдельные задачи, развивать процессы в команде. В 2017 я не был готов к такой нагрузке, к тому, чтобы правильно включиться в подобный процесс.
Видимо, так со мной и случилось первое выгорание. Сейчас есть четкое определение этого термина, но тогда я не ходил к психологу и справлялся с ситуацией самостоятельно. А именно — в один момент я отказался от руководства и снова стал только писать код.
Были задачи, на которые можно было переключиться: сначала я ушел в команду разработки банкоматов, затем занимался библиотекой для работы с формами. В проектах пригодились мои знания по архитектуре, я узнал о ней, о ее основах много нового. Решения, которые я придумал, приняли, оценили по достоинству и взяли в использование.
Затем позвали в следующую команду — команду ныне закрытого ипотечного брокера. Предыдущий тимлид выгорел, и кому-то нужно было его заменить. Руководитель предложил мне, и я согласился, но с условием, что перестану писать код и дальше буду развиваться как менеджер.
На этом проекте я и научился работать с командой — в нее входило семь разработчиков — выстраивать рабочий процесс и экспериментировать с ним. Получилось много всего организовать и попробовать. Мне помогло осознанное решение перестать писать код и сосредоточиться на обязанностях менеджера, а еще то, что я был в хорошем рабочем состоянии, без выгорания и с огромным интересом к происходящему. Сыграли на руку и предыдущий опыт, и учеба на своих ошибках и ошибках коллег.
Качества хорошего разработчика
Чтобы быть классным фронтом, одних технических навыков мало — нужно уметь работать в команде. Софт-скиллы — от тайм-менеджмента до урегулирования конфликтов — важны. Если у разработчика их нет, у него появятся проблемы с коммуникацией, выгоранием, балансом между жизнью и работой.
Стереотип о разработчике, сидящем в пещере без людей и пишущем код всю свою жизнь, не имеет никакого отношения к реальности — в продуктовых компаниях такое точно невозможно. В любом случае придется взаимодействовать с командой и заказчиками, обучать новичков, общаться и обмениваться опытом с коллегами из своей и других команд.
Важно помнить — всегда можно прокачаться в направлении мягких навыков, было бы желание. Я знаю много удачных примеров. Сходите на курсы, мастер-классы, воркшопы, тренинги. Сам я на таких тренингах был только внутри банка, в качестве корпоративного обучения. Поэтому за пределами не могу порекомендовать что-то конкретное, но более чем уверен: найти что-то возможно.
Конечно, тренинги не сделают из разработчика приятного, потрясающего профессионала, которого будут все любить. Но вот решать проблемы и коммуницировать, скорее всего, научат.
Насчет токсичности в коллективе скажу так — неплохо периодически задумываться о ней со своей стороны. Если постоянно думаешь о том, что вокруг тебя только ужасные люди, ужасные процессы, ни с кем нельзя договориться и это вина других, — возможно, это звоночек для тебя. Опираясь на опыт, могу сказать, что среднестатистический уровень осознанности по этому поводу страдает. Если видите токсичного человека в команде, нужно подойти к нему и указать на его поведение, вряд ли он сможет понять сам, что от его поведения страдают люди и рабочий процесс.
Переход в управление и обучение
С момента перехода в команду ипотеки я ни разу не пожалел о своем решении перейти из разработчиков в руководители. Для меня это стало прекрасным временем знакомства с различными методологиями разработки и управления командами. В то время многие команды в Тинькофф работали (вернее, пытались работать) по Scrum, и команда ипотеки не была исключением. К самому скраму я вопросов не имею, проблема была в том, что никто толком не выстраивал этот процесс в команде, он сложился стихийно и был крайне неудобным.
Дело в том, что Scrum довольно-таки сложно выстроить самостоятельно, без помощи квалифицированного специалиста. Кроме того, проектирование хорошего процесса в Scrum требует крайне быстрой перестройки всей команды. Мы были к этому не готовы.
Один мой коллега, Павел Ахметчанов, познакомил меня с методологией канбан. Для меня в принципе стало открытием, что управлять процессами разработки можно, основываясь не на интуиции и внутренних ощущениях, а на четкой математике, метриках и правилах. А главное — канбан не предполагает резких изменений, предлагает подходить к изменениям эволюционно и начинать с того, что есть сейчас.
После закрытия направления ипотеки руководитель предложил мне стать лидом одной из команд разработчиков личного кабинета физлиц, состоящей из 15 инженеров — разработчиков и тестировщиков. Команда фактически была наследницей моей той самой первой команды. Она уже не занималась главной страницей, но и без этого разделов хватало — страница с бонусами, карты банкоматов, модули сквозной навигации, дэшборд (главная страница, на которую попадает пользователь после авторизации), личный кабинет страхования и многие другие.
Управлять такой большой командой мне еще не приходилось, и это стало еще одним испытанием. К этому времени я познакомился с теорией ограничений — управленческой методологией, которая буквально перевернула мое отношение не только и не столько к процессам разработки (канбан прекрасно укладывается в теорию ограничений), сколько к управлению вообще. Теория ограничений помогла мне решить множество проблем, существовавших в команде на тот момент. Тогда мое желание заниматься именно менеджментом укрепилось еще сильнее.
Я был руководителем этой команды почти год, пока не произошла переприоритезация проектов, приоритет веб-версии личного кабинета был понижен, и команду пришлось распустить. Разработчиков распределили по более приоритетным направлениям, разделы, которыми занималась команда, распределили по оставшимся двум командам личного кабинета, и одну из этих команд, «Платежи», я взял под свое крыло. К тому моменту бывший тимлид у них стал продакт-менеджером, а новый не очень любил работать с планированием и людьми. Он стал техлидом, а я — руководителем команды.
Что такое agile, Scrum, канбан
Agile — это группа гибких методологий для разработки ПО. Философия agile базируется на взаимодействии с людьми, действительно работающими в продукте, сотрудничестве с заказчиком и готовности к изменениям.
И Kanban, и Scrum — методологии, по фундаментальной природе базирующиеся на agile-философии. Подробнее о ней можно прочитать в agile-манифесте.
Scrum — методология управления разработкой, помогающая организовать эффективную командную работу. Суть в том, чтобы команда предоставила готовый продукт в фиксированный временной отрезок, который называется спринтом. Структура Scrum включает в себя определенные правила, роли, события и артефакты, которые строятся по принципу « 3—5—3»:
- 3 роли: владелец продукта, команда разработчиков, scrum-мастера;
- 5 событий: события, связанные со спринтом и его структурой;
- 3 артефакта: работы, которые нужно сделать для завершения спринта.
Если хотя бы один из этих элементов отсутствует, технологию работы над проектом уже нельзя назвать Scrum — именно поэтому выше я писал, что наши команды больше пытались работать по Scrum, нежели действительно это делали. Подробнее о методологии можно почитать на «Юнисендере».
Kanban — еще одна методология управления командой (не обязательно разработки). Опасно пытаться объяснить канбан в двух словах: от этого рождаются неправильная интерпретация и использование метода, но я попробую.
Канбан держится на трех столпах: WIP-лимиты (work in progress), визуализация потока задач и метрики. WIP-лимиты — это ограничение количества текущей работы. За счет этого срабатывает закон Литтла, и сильно ускоряется прохождение задачи через весь процесс.
Ключевая особенность канбана и его отличие от Scrum — опора на уже существующие в команде процессы. Для того чтобы начать работать по канбану, не требуется выстраивать целую систему новых процессов, обучать ей всю команду, договариваться о выделении дополнительных ролей и так далее. Достаточно обучить руководителя канбан-методу и начать постепенно внедрять инструменты и практики канбан один за другим.
Чтобы узнать о канбане чуть больше, советую:
- «Канбан. Краткое руководство» Дэвида Андерсона и Энди Кармайкла — книга, которая, по-моему , служит необходимым минимумом в понимании, что такое канбан в принципе;
- сайт Kanban University на английском — для тех, кто готов и хочет глубже разбираться в системе, на площадке много бесплатных материалов, а при желании можно даже выучиться на коуча по канбану.
Теория ограничений — управленческая методология, основывающаяся на выявлении причинно-следственных связей при помощи четких логических правил и набора инструментов. Методология базируется на убеждении, что в каждой системе (независимо от того, чем эта система занимается) есть одно ключевое ограничение, предопределяющее успех всей системы. Если найти это ограничение и научиться им управлять, можно с минимальными усилиями добиться существенного роста эффективности.
Самый простой (хоть и немного утрированный) пример из мира разработки — если в команде много разработчиков и всего один тестировщик, который физически не успевает проверить все задачи, которые делают разработчики, не имеет никакого смысла улучшать процессы разработки, никакого прироста эффективности команды это не даст. Вместо этого нужно заняться процессами тестирования — привлечь к тестированию разработчиков, внедрить новые инструменты, нанять еще тестировщиков и так далее.
Теория ограничений применяется не только в разработке. Сфера ее применения — абсолютно любое производство, как физическое, так и интеллектуальное, сфера обслуживания.
Знакомство с основами теории ограничений я рекомендую начать с книги «Цель» Элияху М. Голдратта. Она читается очень легко (жанр книги — бизнес-роман) и будет полезна любому человеку независимо от сферы его деятельности.
Еще во время работы в команде ипотеки я начал читать лекции по фронтенду в Финтех-школе Тинькофф — это учебные курсы по аналитике и разработке, куда может прийти кто угодно. А в 2020 году стал куратором курса по фронтенду. В задачи кураторов входит составление программы, подбор лекторов и менторов и помощь им в подготовке, отбор студентов на курс, организация учебного процесса.
Также я курировал программу «Путь джуна» во фронтенде, задача которой — быстрый рост джуниор-разработчиков до мидл-уровня . Программа состояла из трех полугодовых циклов, в ходе которых джун развивался по его собственному плану развития, проходил техническое ревью и получал очередное повышение.
Что нужно знать junior Front-end разработчику в 2021 году
Позиция Front-end разработчика выглядит заманчиво не только из-за размера заработной платы, но и из-за большого спроса на эту должность среди работодателей. Верстальщики и фронтенд девелоперы уже долгое время входят в топы самых востребованных специальностей в IT сфере. Если вы читаете эту статью, наверняка вас тоже посетила мысль о том, чтобы пополнить ряды front-end разработчиков.
Если вы уже успели изучить информацию в интернете, посмотреть видеоролики о том, что должен уметь фронтенд разработчик и с чего начать изучение, или промониторить список требований в вакансиях, у вас могли встать дыбом волосы от списка всех этих необходимых навыков, даже на позицию джуна. С первого взгляда может показаться, что стек необходимых знаний и умений веб-разработчика настолько большой, что желание стать на путь изучения может пропасть сразу же.
Проблема в том, что понимание того, что же должен знать junior frontend в действительности очень расплывчато как у так называемых экспертов с ютуба, так и у самих работодателей.
По этому специалисты из test-dan-it.inweb-dev.in.ua составили подробный гайд скилов, которые в действительности соответствуют позиции junior front-end developer.
В этом материале мы расскажем, какие есть требования к веб-разработчику и почему они часто завышены, с чего начать новичку изучать фронтенд, какими навыками должен обладать и какие вопросы чаще всего задают на собеседованиях разработчику.
Почему требования к начинающему веб-разработчику завышены?
Сегодня front-end разработка — вторая после QA возможность войти в айти. Соответственно, количество верстальщиков-самоучек и только окончивших курсы фронтенд-разработки растет с каждым днем. Несмотря на то, что эта позиция достаточно востребована на рынке труда, такое большое количество желающих начать свой путь в IT заставляет работодателей ужесточать отбор потенциальных кандидатов, тем самым намеренно повышая требования на позицию чуть ли ни до уровня middle-разработчика.
Кроме того, в компании может просто не быть фактического разделения уровней junior, middle и senior. Многим владельцам бизнеса и стартапов проще и дешевле выкатить список необходимых скилов под каждый конкретный проект и найти человека, готового самостоятельно изучить технологии, чтобы получить заветную должность джуна, при том, что по факту эти требования могут относиться к уровню middle.
Также следует отметить, что очень часто информацию о необходимых требованиях для начинающих веб-разработчиков размещают некомпетентные блогеры, фрилансеры и прочие авторы, не имеющие отношения не только к разработке, но и к айти в целом.
В результате, из-за таких неадекватных требований многие начинающие разработчики просто боятся идти на собеседование, ведь считают что им не хватает знаний. Не стоит ждать нужного момента или «достаточного уровня», освойте базовые скилы из списка ниже и начинайте пробовать свои силы в разных компаниях. Спустя несколько собеседований вы получите новый опыт и убедитесь, что вопросы зачастую задают одни и те же. О них вы также узнаете в этой статье.
С чего начать изучение фронтенда
Прежде чем начать изучение веб-разработки, нужно понимать, что верстальщик и фронт-енд разработчик — это не одно и тоже, но эти понятия часто путаются самими работодателями. Верстальщик конвертирует графический макет дизайна в HTML+CSS разметку, может добавить простые плагины и анимацию. Front-end разработчик же превращает это в более сложный и динамический интерфейс.
Процесс веб-разработки включает в себя верстку страниц, но не ограничивается этим.
Фронтендер способен создавать функциональные приложения и наполнять сверстанные страницы полноценными данными. Современные сайты становятся все сложнее и требуют новых решений, из-за чего очень часто просто сверстать страницу недостаточно. Хотя все еще можно найти компании или частных заказчиков, которые ограничиваются только версткой. В любом случае качественная верстка — это база, которой нужно владеть уверенно и свободно как верстальщику, так и фронтенд специалисту.
Все необходимые знания и навыки можно разделить на hard skills, то есть технические, и soft skills — личные качества:
Хард скилы
Техническая база обязательных основ, которую вам следует освоить выглядит следующим образом:
- HTML(HTML5). Понимание языка разметки — это самый первый маст хэв в вашей копилке навыков. Вы должны понимать анатомию HTML-разметки веб-страницы и освоить базовые теги, их атрибуты и вложенные элементы. Также нужно знать как они должны правильно выглядеть.
- CSS (CSS3). Следует научиться стилизовать элементы, при чем делать это правильно, не оставляя огромных полотен неиспользуемых стилей. Для начала вам нужно освоить:
- блочная модель и позиционирование содержимого (float),
- компоновка и выравнивание элементов на странице (flexbox),
- очистка потока и его методы,
- выравнивание и центрирование элементов,
- видимостьэлементов (display, visibility, overflow),
- панель инструментов xbox,
- специфичность селекторов и как она работает,
- базовые знания CSS grid layout
- responsive design (верстка под мобильные устройства),
- подходы mobile-first/desktop-first на уровне понимания,
- кроссбраузерность верстки.
Чтобы закрепить оба навыка, потренируйтесь в верстке — сверстайте хотя бы 5 шаблонов разной сложности (их можно легко найти в свободном доступе).
Сначала вам может показаться, что выучить все эти нюансы нереально, но немного практики — и вы словите основной принцип, появится общее понимание логики построения всех этих элементов.
- JavaScript. На данном этапе многие начинающие веб-разработчики допускают большую ошибку, пренебрегая основами JavaScript и перепрыгивая сразу на фреймворки. Знать основы важно, и изучить вам необходимо следующее:
- базовое понимание языка и его особенности,
- структуры данных,
- строки, числа, объекты и массивы (нужно знать методы, чтобы добавить значение в массив, перевернуть слово задом наперед),
- замыкание и области видимости (как работает и что значит),
- методы объекта (Bind, Call и Apply),
- контекст выполнения и стек вызовов функций (следует хорошо понимать разницу и уметь применять на примерах)
Фактически, это все, что должен знать junior frontend разработчик на начальном этапе. Важно также не просто ознакомиться с информацией, а сразу же применять все знания на практике. Чем больше практики, тем быстрее получите результат.
Софт скилы
Эти скилы раскрывают ваши индивидуальные характеристики. Их освоение необходимо как для работы в команде, так и для собственного личностного роста, поэтому важно не пренебрегать ими, а отнестись с ним так же ответственно, как и к техническим знаниям.
- Self-management — самый главный скилл, ведь вам необходимо будет стать самому себе начальником. Позиция джуниор фронтенд разработчика подразумевает постоянное самообучение, при чем вы должны будете научиться самостоятельно находить ответы на все вопросы. В толковой компании у вас будет наставник, который поможет разобраться в сложных вопросах, но в среде программирования спрашивать одно и то же несколько раз считается едва ли не моветоном.
Научитесь сразу запоминать информацию, или хотя бы записывать.
Качество вашего кода должно улучшаться, а количество комментариев уменьшаться. Если команда будет видеть, что по истечению полугода вы стоите на одном месте, это может стать звонком для увольнения. Поэтому очень важно не только показать желание к самообучению, но и доказать это на практике.
- Работа в команде. Сюда же можно отнести коммуникацию и общение. Умение слушать людей и прислушиваться к чужому мнению поможет вам продвинуться на пути разработчика. Более опытные коллеги дадут необходимую информацию быстрее и компактнее, нежели если бы вы учили ее самостоятельно. При этом также важно уметь формировать свое мнение и отстаивать его.
- Английский язык. Для веб-разработчика очень важно умение говорить (даже если нет идеального знаний правил грамматики) и читать документацию на английском языке.
Дополнительные, но не обязательные навыки
Эту информацию зубрить не обязательно, и вряд ли на собеседовании от вас будут требовать суровую практику, но наличие этих знаний на базовом уровне будет однозначно плюсом:
- Основы JS DOM (Document Object Model):
- знать о документе и объектах страниц (научитесь передвигаться по DOM-дереву элементов, находить их разными способами)
- понимать основы работы с событиями (вешать элементарные обработчики, знать про модель распространения событий, уметь их перехватить, обработать и отменить).
Вопросы на собеседовании junior фронтенд разработчика
Техническое собеседование на позицию джуниор фронтенд разработчика в 99% случаев начинается с вопросов об HTML. А самый распространенный вопрос их тех, что нужно знать front end разработчику: что такое Doctype и зачем он нужен.
Далее вас спросят о семантике HTML. Здесь не нужно зубрить информацию по каждому тегу и его атрибутам, но вы должны понимать общую структуру их построения, и уметь объяснить разницу между тегами для заголовков, секций, навигации. Также, нужно понимать как правильно их оформлять.
Вас могут спросить о типах полей инпут и их особенностях. Также, вас могут попросить рассказать какие теги вы используете, например, для формы, и каким образом вы будете ее создавать.
Очень важно не просто сказать результат, а рассказать последовательную цепочку своих действий, продемонстрировать свой алгоритм мыслительного процесса для решения задачи.
Даже если с каким-то тегом вы ошиблись, ход ваших мыслей даст работодателю понять, что вы имеете понимание того, что от вас требуется.
Покажите на собеседовании, что вы горите фронтендом, что вы постоянно учитесь и хотите расти. Технологии в айти развиваются со стремительной скоростью и вы должны быть готовы не только постоянно учить новое, но и следить за обновлением уже существующих знаний. Здесь очень важно научиться фильтровать информацию и не распыляться на множество статей «обо всем и ни о чем». Самостоятельное обучение может занять больше года, в то время как оптимизированные курсы помогут освоить направление фронтенд за 5-7 месяцев. Записаться на полный курс Frontend с нуля можно тут.
Ознакомиться с программой поступления на курс по фронтенду также можно на сайте https://dan-it.com.ua/program/kiev/front-end/.
Заключение
В этом материале мы рассказали, какие есть требования к веб-разработчику, почему они часто завышены, с чего начать новичку изучать фронтенд, какими навыками он должен обладать и какие вопросы чаще всего задают на собеседованиях разработчику.
Что нужно учить фронтенд-разработчику в 2021 году
Пошаговое руководство для тех, кто хочет начать свой путь в сфере фронтенд-разработки
Published in
NOP::Nuances of Programming
6 min read
Feb 27, 2021Вступление
Фронтенд-разработчик — это специалист, занимающийся созданием интерфейсов или веб-приложений. Такие разработчики в основном работают над созданием визуальной составляющей, а также придают ей динамичность, чтобы пользователь мог взаимодействовать с продуктом.
В настоящее время фронтенд-разработка стала намного сложнее. Теперь это уже не просто связка HTML, CSS и JavaScript. Существует множество технологий, которые следует изучить, и задач тоже довольно много. Однако, имея стремление и соблюдая дисциплину, вы без всяких сомнений можете стать успешным фронтенд-разработчиком.
1. Как работает интернет?
Любой разработчик должен знать, как работает интернет и как он зарождался. Вам нужно будет узнать о таких вещах, как HTTP, доменные имена, хостинги и браузеры.
Вот список некоторых тем, к которым следует присмотреться:
- Что такое интернет?
- Как он работает?
- Что такое HTTP и какие изменения он претерпел?
- Как работают браузеры?
- Что такое доменные имена и хостинги?
- Как работает DNS?
2. Изучите основы HTML и CSS
HTML расшифровывается как Hypertext Markup Language, или «язык гипертекстовой разметки». Он используется для построения “скелета”, разметки вашего сайта. В этом разделе вам нужно будет изучить основы HTML, однако кроме этого можно обратить больше внимания и на формы в HTML, поскольку они точно пригодятся в будущем.
Как только у вас появится базовое понимание HTML, вы можете начать изучать основы CSS. CSS расшифровывается как Cascading Style Sheets, или же «каскадные таблицы стилей». Они используются тогда, когда нужно задать, как должны выглядеть ваши HTML-элементы. Помимо этого, они применяются для создания адаптивных макетов, а также делают ваш сайт более привлекательным.
CSS легко изучить, но трудно овладеть. Есть несколько тем, на которые следует обратить больше внимания, например:
- Боксовая модель: как работают поля, отступы и границы.
- Единицы измерения CSS: они используются для выражения длин ( rem , vh и vw ).
- Позиционирование: как задавать тип расположения элементов. Эта тема сбивает с толку многих, поэтому уделите ей достаточно времени.
- Переменные: переменные — это сущности, которые могут быть повторно использованы во всем документе. Переменные делают работу с CSS настолько удобной, что вы можете создавать свои стили всего лишь с помощью нескольких строк кода.
- Медиа-запросы: медиа-запросы решают, что показывать при разных размерах экрана. Такие запросы являются ключевым компонентом адаптивного дизайна.
- Анимации: анимации позволяют элементам менять один заданный стиль на другой. Если вы знаете, как правильно использовать анимации, то это знание несомненно поможет вам выделить ваш сайт, в ином случае он будет выглядеть нелепо, так что будьте осторожны.
- Flexbox, CSS-сетка: эти технологии применяются для создания адаптивных макетов.
Советуем вам также изучить основы веб-дизайна и дизайна пользовательских интерфейсов. Это даст вам возможность создавать красивые веб-сайты.
3. Научитесь пользоваться Git и Github
Git — это система контроля версий, которая позволяет отслеживать изменения в вашем коде и файлах с течением времени. Git поможет вам вернуться к предыдущей версии программы без каких-либо проблем.
Изучить основы Git и то, как использовать его в командной строке, — очень важно. Заведите учетную запись на Github и разберитесь, как создать свой первый репозиторий, чтобы загрузить в него HTML и CSS-код с помощью Git. Это выработает привычку использовать Git и Github для будущих проектов при создании интерфейсов.
4. Развертывание веб-сайта
Теперь, когда вы знаете HTML и CSS, уже есть возможность создавать простые веб-сайты, используя эти две технологии. Но для этого нужно разместить их в Интернете, чтобы люди могли увидеть ваши творения.
Раньше это было сделать гораздо труднее, но теперь вы можете использовать инструменты вроде GitHub Pages или Netlify.
5. JavaScript
JavaScript — это царь веб-разработки, без него нельзя представить веб в нынешнем виде. Это лучший язык программирования и скриптов для веб-разработчиков. С его помощью можно создавать фронтенд, бэкенд, мобильные приложения и многое другое.
Когда дело доходит до JavaScript, сначала стоит изучить его основы: переменные, типы данных, функции, массивы, объекты и так далее. Вам также нужно будет узнать, как манипулировать DOM.
Вот список вещей, которые следует рассмотреть поближе:
- Синтаксис и базовая конструкция.
- Манипуляции с DOM
- Работа с Fetch API/Ajax
- ES6+
- Модульный JavaScript
А ещё разберитесь с этими понятиями: замыкания, область действия функций, Async/await, прототипирование, «всплытие» событий, Shadow DOM, «подъёмы», strict-режим.
6. Изучайте Sass
Sass расшифровывается как Syntactically Awesome Style sheets, или «синтаксически потрясающие таблицы стилей». Это CSS-препроцессор, который облегчает работу с CSS, сокращает повторения кода и экономит время разработки. Он помогает с лёгкостью стилизовать страницы, используя меньше строк кода. Это как CSS со сверхспособностями.
Sass — мощный инструмент, если приходится много работать с CSS. Он облегчает жизнь и помогает не повторяться в CSS.
7. Пакетные менеджеры и веб-бандлеры
Когда дело доходит до менеджеров пакетов, первое, что приходит на ум, — это NPM и Yarn, поэтому нелишним будет изучить основы одного из них.
Менеджер пакетов — это инструмент, который автоматизирует процесс установки, обновления, настройки и удаления программ или проектов.
После этого вам нужно будет взять во внимание инструменты сборки. Среди них такие вещи, как системы запуска задач (NPM или Gulp) и веб-бандлеры (Webpack или Parcel).
8. Выберите фреймворк
Изучив все вышеперечисленные основы и инструменты, уже можно подбирать себе любой JavaScript-фреймворк. Разумным решением будет начать с React или Vue. Можно также попробовать Angular.
React — это, по сути, библиотека JavaScript для создания пользовательских интерфейсов. Она основана на «компонентах» и имеет виртуальный DOM, который увеличивает производительность веб-приложения. Vue тоже удобен для использования, вокруг него основано потрясающее сообщество и есть полезная документация.
Выберите любой фреймворк, который будет вам удобен, а также в зависимости от рынка в вашем регионе. В любом случае это всего лишь инструменты — главное, чтобы вы знали основы JavaScript.
Также стоит узнать об управлении состоянием, и есть много инструментов, которые можно использовать в зависимости от того, какой фреймворк вы выберете (Redux, VueX и другие). На картинке вы можете посмотреть на популярные варианты.
9. Серверный рендеринг и статические генераторы
Next.js используется для рендеринга на стороне сервера или для генерации статических веб-сайтов. Технология Next.js ещё довольно нова, но это точно тот навык, который никогда не будет лишним в багаже любого React-разработчика. Если вы используете Vue, вам предстоит узнать о другом инструменте под названием Nuxt.js, который также используется для рендеринга на стороне сервера. Для Angular таким инструментом будет Universal.
После этого вам стоит попробовать создать различные приложения, как, например, сайт для поиска работы, блог или страницу для просмотра документов.
10. Тестирование приложений
Что касается тестирования, то нужно знать разницу между модульными, интеграционными и функциональными тестами, а также следует научиться их писать.
Заключение
Как можно заметить, фронтенд-разработка стала сложнее. Теперь ещё есть куда расти. Но если у вас есть стремление, то вы сможете преодолеть все преграды и стать высококлассным разработчиком. Постоянно практикуйтесь, потому что без практики вы никогда не будете хороши в том, что делаете.
- Почему стоит избегать динамических ссылок
- 10 UX-трендов для мобильных приложений в 2021 году
- Путешествие строки скомпилированного кода