За сколько можно освоить javascript

Что вы сможете запрограммировать через год, занимаясь по два часа в день: фронтенд

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

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

Алексей Ладейщиков
CTO в aim digital agency

Всем привет! Меня зовут Алексей, свои первые шаги в разработке я начал ещё в 1999 году, а сейчас руковожу командой веб-разработчиков. Не первый год я занимаюсь обучением фронтенд-разработчиков с нуля. Что это за профессия?

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

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

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

С чем вы столкнётесь при изучении frontend-разработки

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

Основные три компонента технологического стека:

• язык разметки гипертекстов HTML;
• язык стилизации CSS;
• язык программирования JavaScript.

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

Что вам предстоит изучить, если вы будете придерживаться моего плана:

• основы HTML;
• основы CSS;
• команды и аббревиатуры Emmet;
• основы работы с препроцессором HTML;
• функциональность сборщика проектов gulp;
• основы работы с препроцессором CSS — Sass;
• основы JS;
• углублённый курс чистого (Vanilla) JS;
• библиотека jQuery;
• основы библиотеки React;
• основы фреймворка Vue.

Вам понадобится постоянная практика: оттачивание мастерства путём решения мини-задач и работа над крупным тестовым проектом.

Первый этап: среда разработки, основы HTML, CSS — 2–2,5 месяца

В первую очередь вам необходимо выбрать среду разработки. Не нужно пытаться сразу найти «лучшую», это вопрос вкуса и привычек. Из наиболее популярных среди профессионалов могу посоветовать WebStorm, VSCode, NetBeans. Или, если интересует более «легковесный» вариант, — Atom, Sublime Text.

HTML, Hypertext Markup Language — язык разметки. Он позволяет создавать текстовые документы, дополненные гиперссылками и разнообразными объектами: изображениями, элементами форм, видеороликами, аудиозаписями, холстами для создания виртуальных миров и т.п.

Изучать HTML стоит примерно в таком порядке:

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

CSS, Cascading Style Sheets — язык стилизации. Он позволяет управлять размерами элементов, их цветом, формой, положением, видимостью в разных состояниях; создавать простые трансформации и анимации, настраивать типографику, задавать правила адаптации документа к различным устройствам и т.д.

Изучать СSS стоит примерно в таком порядке:

• синтаксис языка;
• способы внедрения в документ;
  селекторы, псевдоклассы и псевдоэлементы;
• основные свойства;
• наследование и группировка свойств;
• свойства для работы с текстами и графикой;
• медиа-запросы;
• работа с анимацией.

Второй этап: надстройки и аббревиатуры Emmet — 1–2 недели

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

Использование аббревиатур Emmet ускоряет первоначальную разработку, но не позволяет быстро править код. Полученный после преобразования код — это всё тот же «обычный» HTML.

Третий этап: препроцессоры HTML и CSS — 5 недель

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

Препроцессоры HTML

Наиболее популярные — Pug и Haml. Технология препроцессинга позволяет устранить многие недостатки HTML, ускоряет составление HTML-документа и его последующее редактирование. Используя препроцессор, не нужно повторять ключевые слова class , id ; не нужно закрывать контейнерные теги; можно объявлять и использовать переменные, применять условия и циклы; можно разбивать весь документ на блоки и хранить их в разных файлах и т.п.

Побочный эффект этого удобства — формат документа, который браузер «не понимает». Для того, чтобы преобразовать полученный документ в понятный для браузера формат, можно использовать watcher, встраиваемый в IDE. Альтернативный способ — использовать сборщики проектов. Можно начать с gulp и постепенно перейти к более сложным продуктам-бандлерам: например webpack или Parcel.

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

Для CSS также существуют препроцессоры. Они позволяют создавать более компактный код, а также использовать переменные, функции, миксины, вложенности блоков, циклы и условия и т.п. С помощью этих инструментов можно избежать большого количества рутинной работы, а также снизить вероятность дублирования стилей и ошибок. К этой группе относятся: Sass, LESS, Stylus. Базовые возможности у них очень близки друг к другу, существенная разница лишь в деталях.

От себя могу посоветовать разновидность Sass, которая называется SCSS. Основная разница между ними заключается в том, что у второй технологии используются фигурные скобки для выделения блоков и точки с запятыми для обозначения конца текущей инструкции, а у первой блоки создаются при помощи отступов, точки с запятыми не используются. Поэтому вопрос выбора — скорее вопрос вкуса или пристрастия к какому-либо языку программирования. Те, кому нравится C-подобный синтаксис (C++, PHP, Java, JS и т.д.), скорее всего полюбят SCSS. Приверженцы Ruby и Python более привычным найдут Sass.

Конечно же, для преобразования файлов препроцессора в понятный браузеру формат тоже нужен обработчик. В качестве такового удобно использовать те же сборщики проектов: gulp, webpack, Parcel.

Четвёртый этап: Изучение JavaScript — 3–4 месяца

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

Набор HTML + CSS даёт возможность создавать красивые веб-страницы, на которых можно и увидеть изображения или видео, и послушать музыку.

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

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

Советую для начала погрузиться в язык без каких-либо надстроек: «чистый», так называемый Vanilla JS.

Ключевые этапы базового курса:

• синтаксис языка;
• управляющие конструкции;
• функции и функциональные выражения;
• контекст вызова this;
• области видимости;
• «строгий режим»;
• наследование в функциональном стиле;
• наследование в прототипном стиле;
• классы;
• стандартные объекты JS;
• объекты надстройки браузера;
• DOM;
• механизмы коллбеков;
• отложенное исполнение кода и исполнение через «равные» промежутки времени.

Ключевые этапы углубленного изучения:

• промисы;
• итераторы;
• генераторы;
• асинхронные функции;
• импорт/экспорт;
• подключение модулей;
• делегирование поведения;
• проксирование.

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

Пятый этап: Фреймворки JavaScript — 2–4 месяца

После освоения «чистого» JavaScript можно перейти к изучению JS-фреймворков и библиотек. Чем отличается фреймворк от библиотеки?

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

Из наиболее популярных библиотек можно назвать React, jQuery (хотя её популярность быстро падает), D3, lodash, three. React используется для создания пользовательских интерфейсов. jQuery упрощает выбор элементов в документе (в DOM), помогает унифицировать работу с одиночными элементами и группами элементов, упрощает реализацию AJAX-запросов, облегчает работу с анимациями и т.п. D3 — библиотека для визуализации данных при помощи HTML, CSS и SVG.Lodash позволяет более полно использовать в JS парадигму функционального программирования и даёт дополнительную функциональность по работе с массивами.Three используется для создания и отображения графики (в том числе и анимированной) в 3D.

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

Сейчас наиболее популярными фреймворками для фронтенд-разработки можно считать Vue, Angular, Ember.

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

Где и как получать все эти знания?

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

Для того, чтобы выбрать подходящий формат обучения, ответьте себе на три вопроса:

1. «Мне достаточно внутренней мотивации для ежедневного последовательного обучения?»
2. «Склонен ли я перепроверять и анализировать информацию, которую получаю?»
3. «Я могу не зацикливаться на решении отдельной узкой задачи и заставлять себя двигаться вперёд?»

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

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

• Ресурс для разработчиков от Mozilla, кладезь информации, изучив которую в полном объёме, можно стать теоретиком уровня «гуру». Многие материалы ресурса доступны на русском языке, но лучше изучать в оригинале.
• Современный учебник JavaScript — русскоязычный информационно-обучающий ресурс по JS. Если прочесть все разделы и выполнить все задания, можно смело называть себя junior frontend разработчиком.
• Официальная документация по веб-стандартам.
• Документация от альтернативной организации по развитию веб.

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

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

• Web Developer Blog;
• канал Владилена Минина;
• JavaScript.Ninja;
• канал Тимура Шемсединова (хардкор для тех, кто хочет по-настоящему глубоких знаний).

Для оттачивания скилов в программировании можно пользоваться специальными онлайн-ресурсами, например:

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

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

Что дальше?

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

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

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

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

За сколько можно освоить javascript

Фронтенд-разработчик: кто это, что должен знать и чем занимается

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

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

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

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

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

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

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

• создание структуры для страницы сайта;

• проверка удобства для пользователей;

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

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

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

Примерный список базовых инструментов, необходимых frontend developer, выглядит так:

• адаптивность и мобильный дизайн;

• тестирование и отладка;

• Git и системы контроля версий.

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

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

Для работы на больших проектах необходимо знание фреймворков, например React, Angular, Backbone, Vue.js, Ember. Фреймворки — это своеобразная база шаблонов, которая помогает разработчику создавать пользовательский интерфейс. Выбор инструментов здесь ограничен, но его вполне достаточно, чтобы решить типовую задачу при разработке.

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

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

Адаптивность и мобильный дизайн

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

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

Тестирование и отладка

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

Git и системы контроля версий

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

Еще несколько инструментов, которые пригодятся в работе фронтенд-разработчика:

• MS WordPress, Drupal, Joomla;

• принципы построения бэкенда и серверные технологии, в частности Node.js, PHP, Ruby, .NET;

• инструменты дебагинга Chrome Dev Tools, Firebug;

• графические редакторы Photoshop, Illustrator.

Требования к frontend developer в вакансиях порой отличаются. Они зависят от конкретной компании и особенностей проекта. К примеру, чтобы стать частью команды SberLive, предоставляющей технические решения для организации и проведения событийных мероприятий Сбера, нужно иметь опыт работы с React, стейт-менеджерами, styled-components, обладать навыками в проектах TypeScript, уметь писать юнит-тесты. Преимуществом станет опыт работы с инструментами для организации монорепозитория, опыт разработки верстки писем, использования NodeJS/Express, CI/CD (Jenkins).

Чтобы получить должность фронтенд-разработчика на существующих и новых проектах Сбера, включая Platform V DataGrid, необходимо иметь опыт работы в frontend от 1,5 лет. Кандидат должен знать React, Git, Node.js (express, npm), Redux, иметь общее понимание работы систем управления состоянием и архитектуры клиентской части приложения. Не менее важное требование в Сбере — постоянно развиваться, проявлять инициативу, стать активным участником гильдии фронтенд-разработчиков.

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

• верстка страниц: добавление текста, картинок, анимации, интерактивных кнопок, иконок, чатов и других элементов;

• тестирование сайта или приложения: проверка работоспособности интерактивных кнопок, поиск и устранение различного рода ошибок;

• адаптация страниц под разные устройства и браузеры.

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

Сколько зарабатывает фронтенд-разработчик

Заработная плата фронтенд-разработчика зависит от нескольких факторов. В первую очередь значение имеет опыт работы. Специалист, который только что освоил профессию и устроился в свою первую компанию, так называемый джуниор, может получать от 40 000 рублей. Месячный заработок опытного тимлида порой достигает 380 тысяч рублей. К тому же стоит учитывать регион — в крупных городах IT-специалисты зарабатывают больше, поэтому многие работают на удаленке. Средняя зарплата frontend developer составляет 155 000 рублей.

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

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

10 причин стать JS-разработчиком в 2022 году

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

Что делает JS-разработчик

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

1. Frontend-разработка. В ходе нее создается интерфейс сайта или веб-приложения, прорабатывается базовый функционал, анимации и переходы. На этом этапе JavaScript используется для создания анимации, всплывающих окон, базовой проверки правильности заполнения форм. Для фронтендера не обязательны углубленные познания JS, так как на первое место выходит работа с HTML и CSS. Их освоить достаточно просто.
2. Backend-разработка. Отвечает за проработку внутреннего функционала сайта или приложения: обработка форм, реакция на действия пользователей и так далее. Здесь уже желательны более углубленные знания JavaScript. На начальных позициях можно обойтись только знаниями JS, но для дальнейшего роста потребуется изучение других языков программирования: PHP, Python, Ruby и так далее.
3. Fullstack-разработка. Включает полную разработку сайта или приложения, то есть Frontend и Backend. Требует знания хотя бы на среднем уровне: HTML, CSS, JavaScript. Еще желательно будет изучить и другие языки программирования, используемые в Backend.

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

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

Почему JavaScript так популярен

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

Легкость изучения

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

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

Более низкий порог входа

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

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

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

Один из самых популярных языков программирования

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

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

Собственная экосистема

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

Легкость применения полученных знаний

JavaScript используется во многих сферах, особенно, если речь идет о веб-разработке. Его можно встретить в играх и обычных программах для ПК. Имея навык работы с JS будет легче сменить вид деятельности, например, с frontend-разработки перейти на backend, fullstack или вовсе переключиться с веб-разработки на что-то другое.

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

Язык постоянно развивается

Последнее крупное обновление версии JavaScript произошло в 2009 году. JavaScript постоянно меняется, адаптируясь к новым задачам. Регулярно обновляются версии популярных библиотек, типа, React, также создаются новые. В ближайшем будущем основные нововведения коснутся библиотек и плагинов, написанных на JS. Возможно, что будут внесены какие-то обновления и в сам язык.

JavaScript быстрый язык программирования

Многие крупные проекты, например, Netflix, PayPal и другие в качестве своей основы используют JavaScript. Все больше крупных проектов стараются перенести часть своего функционала на JS или его библиотеку Node.js. Данное решение обусловлено тем, что конечный продукт становится более отзывчивым, а затраты на его обслуживание снижаются.

Легкость в поиске работы

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

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

Высокий уровень зарплат

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

• начинающий frontend-разработчик получает 30-50 тысяч рублей;
• начинающий backend-разработчик 40-60 тысяч рублей;
• fullstack-разработчик с небольшим опытом может претендовать на оклад в 50-60 тысяч рублей.

С опытом растет уровень и зарплаты. За пару лет вполне реально перейти с начинающего уровня (Junior) на средний (Middle). Там уровень зарплат уже составляет 100-120 тысяч рублей. Еще через пару лет можно выйти на продвинутый уровень и претендовать на вакансии Senior-разработчика, где часто встречаются вакансии с окладом по 200 тысяч рублей.

Работать JavaScript можно полностью удаленно. На платформах с вакансиями много предложений именно удаленной работы. Устроившись работать дистанционно на какую-нибудь московскую компанию можно получать оклад около 60 тысяч рублей на начальных позициях без необходимости менять свое место жительства.

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

Будет легче изучать другие языки программирования

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

Заключение

JavaScript можно изучить примерно за 3-5 месяцев особенно не напрягаясь. Вот несколько советов, которые помогут осилить этот язык программирования:

1. Постройте последовательность изучения. Начинать нужно с основ языка, изучить его логику, попытаться написать первые небольшие проекты. Не стоит сразу же пытаться изучать библиотеки и фреймворки, не изучив сам JS. В таком случае вы потратите больше времени, а в полученных навыках будут серьезные пробелы.
2. Определитесь с какими библиотеками и другими инструментами, за основу которых взят JavaScript, вы будете работать. Современную разработку сайтов и приложений стараются организовывать с помощью сторонних решений, например, Node.js, React и так далее. Выберите несколько библиотек, которые вы считаете перспективными и начинайте их изучать, когда освоите JS на начальном уровне.
3. Постарайтесь найти наставника. Это можно сделать, устроившись в какую-нибудь веб-студию на начальные позиции. Часто к новичкам прикрепляют опытных коллег. Они помогут освоить язык на более высоком уровне.
4. Изучайте процесс работы с проектами. Чем больше у вас будет понимание, как организована разработка, тем быстрее вы освоите не только язык, но и сможете претендовать на более крупный оклад или открыть собственное дело.

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

8 шагов, чтобы получать 200 тысяч за код

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

1. Познакомьтесь с веб-разработкой

Продолжительность этапа: 1 месяц.

Сначала будет много непонятных слов, аббревиатур и голова пойдёт кругом. В одном JavaScript десятка три направлений, поэтому нужно понять, ваше ли это вообще. Смотрите видео на Ютубе или тренируйтесь на тренажёрах. Другой вариант — по учебникам, но с ними сложнее всего. Электронные пока держатся, а вот бумажные устарели ещё до публикации.

Что знать на этом этапе:

1. Структуру HTML.
2. Отличия фронтенда и бэкенда.
3. Разметку и оформление текста.
4. Как размечать страницу по макету.
5. Как ставить ссылки и вставлять изображения.
6. Основы CSS — правила, селекторы, свойства и каскадирование.
7. Хотя бы немного понимать, как работает и где применяется JavaScript.

Для начала вам даже не нужен сайт. Чтобы было проще и дешевле — настройте на домашнем компьютере сервер и экспериментируйте там. Можно и код покрутить, и вёрстку поломать, и написать пару скриптов на PHP.

Где применять знания. Пока просто поймите, какая из областей веб-разработки нравится больше (и нравится ли вообще хоть что-то).

Что читать:

• Веб-разработка, с чего начать
• Книжки по разработке
• Книжки по JavaScript
• Сколько человек делают сайт
• Чем отличаются фронтенд, бэкенд и фулстек

2. Постепенно увеличивайте уровень сложности

Продолжительность этапа: 2 месяца, деньги — до 10 тысяч.

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

База. На этом этапе нужно знать обо всём, из чего строятся страницы — о формах, таблицах, медиа-элементах и всём остальном. Хорошо строить сетки, отличать флексы от гридов и декорировать страницы. Ещё хорошо бы не путать друг с другом переменные, типы, условия, циклы, массивы и объекты. Хотя бы со словарём и StackOverflow.

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

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

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

А ещё не бойтесь, что всё сломалось или не получается. Это как в качалке — сначала тяжело, а потом бицуха.

3. Запишитесь на полноценный курс и пройдите его

Продолжительность этапа: до полугода.

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

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

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

В курсах по вёрстке должны быть:

• Семантическая разметка
• Сетки на флексах и гридах
• БЭМ
• Адаптивная вёрстка
• Анимация интерактивных элементов
• Векторная графика
• Ретиновая и адаптивная графика
• Доступность
• Автоматизация

В курсах по JavaScript. Хорошо бы, чтобы там давали понятную базу: типы, операторы, функции, циклы, массивы, объекты, алгоритмы и структуры данных.

Концепции:

• Работа с DOM-деревом
• Встроенные API
• Шаблонизация
• Асинхронность
• Валидация форм
• Области видимости функций
• Модульность
• Объекты, иммутабельность и компонентный подход
• Связывание данных

Аббревиатуры:

• HTTP: XML, JSON, JSONP, XMLHttpRequest
• REST API
• DRY, KISS, SOLID
• ООП

Инструменты для вёрстки и JavaScript:

• Препроцессоры (LESS, Sass)
• Gulp или webpack для автоматизации сборки
• Git для контроля версий
• Figma для графики
• Chrome DevTools для отладки
• Терминал

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

Делайте проекты, которые интересны лично вам или полезны в хозяйстве.

Идеи проектов для тренировки: **

• Клон несложной игры из восьмидесятых: Space Invaders, Pacman или что-нибудь с Atari 2600. Да хоть крестики-нолики (но против компьютера).
• Интерфейс для умного дома. Выведите на одну страницу показания датчиков.
• Время прибытия транспорта на остановку у дома. Берём открытые данные и крутим их.
• Таск-трекер. Их делают все, но вдруг у вас получится первый нормальный.

Деньги. После курсов по вёрстке можно пойти младшим верстальщиком за 25–45 тысяч (в зависимости от города) и делать хорошие сайты. Обычно верстальщикам быстро наскучивает верстать, и они идут на курсы по JavaScript — это увеличивает количество задач и поднимает зарплату до 63 тысяч. К тому же хорошие разработчики быстро растут, так как их меньше, чем нужно в индустрии.

4. Найдите знакомого, который разбирается в теме

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

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

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

5. Выучите какой-нибудь фреймворк

Продолжительность этапа: 1–3 месяца, в зависимости от занятости.

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

Что учить. Самые популярные и прибыльные для фронтендеров — React, Angular, Vue, Svelte и Preact. Для бэкендеров — Laravel, Flask, Django, Express.js и Ruby on Rails.

Если вы знаете JavaScript, но вам понравилось делать бэкенд, попробуйте Express.js — это фреймворк для Node.js.

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

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

Деньги. На этом этапе можно зарабатывать ещё больше — средняя зарплата React-разработчика около 150 тысяч. И чем дольше и лучше вы работаете, тем больше получаете.

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

6. Пройдите стажировку с командой

Продолжительность этапа: до полугода.

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

Где стажироваться. Это или несколько месяцев в крупной компании летом (обычно туда берут студентов старших курсов), или от 3 месяцев до полугода в компании, которая целенаправленно берёт стажёров на вырост.

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

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

Компании, которые берут себе стажёров, часто встраивают их в команду с менеджером, тестировщиком и другими программистами — вот тут-то и нужно проявить себя.

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

Что читать: **

• Как устроен «Акселератор» в HTML Academy
• Всё о стажировке в «Лиге А.»

7. Найдите работу

Продолжительность этапа: у кого как.

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

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

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

Что читать:

• 17 ошибок, которые испортят ваше резюме
• Как написать хорошее сопроводительное письмо
• Как пройти собеседование
• Как попасть в компанию мечты, если там закрыты все вакансии

8. Участвуйте в жизни сообщества

Продолжительность этапа: всю остальную карьеру.

Если вам есть чем поделиться, ваша ценность растёт.

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

Куда ездить. На митапы из этого календаря.

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

Учитесь вообще всё время

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

Как получать 200 тысяч за код

1. Познакомиться с веб-разработкой и определиться с направлением.
2. Постепенно доучивать более сложные вещи (здесь нужно завести Гитхаб).
3. Пройти курсы по фронтенд-разработке (начиная с этого пункта можно искать работу).
4. Найти наставника.
5. Выучить популярный фреймворк и регулярно на нём писать.
6. Пройти стажировку и научиться работать в команде.
7. Уже точно найти работу и проработать там год.
8. Разбираться в новом, писать об этом и выступать на митапах.
9. Постоянно учиться.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.