Как стать javascript разработчиком

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

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

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

Почему JavaScript?

Стоит отметить открытость языка — компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые — при помощи фреймворка Electron, а вторые — на NativeScript или React Native.

Основы

Сперва необходимо изучить основные понятия JavaScript, веб-разработки и программирования в целом:

• объектно-ориентированный JS — конструкторы и фабрики, наследование;
• функциональный JS — функции высшего порядка, замыкания, рекурсия;
• спецификации тестов Jasmine;
• основы HTML, CSS и jQuery.

Git

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

• создание и перемещение файлов в каталогах;
• инициализация и коммиты в Git;
• настройка репозиториев в GitHub.

Алгоритмы и структуры данных

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

Бэкенд

Node.js

10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node — это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.

Серверы, HTTP, Express.js

После изучения Node стоит продолжить знакомство с бэкенд-разработкой и разобраться в серверах и маршрутизации. Можно начать с портов и протоколов с акцентом на HTTP, а потом заняться Express — Node-библиотекой для обработки запросов.

Асинхронный JavaScript

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

Базы данных, схемы, модели и ORM

Базы данных — один из важнейших элементов веб-разработки. Если вашему приложению нужно загружать или хранить какие-либо данные, не теряющиеся при обновлении страницы, придётся использовать БД. Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем изучить SQL и познакомиться с разными системами управления баз данных. Умение работать с ORM тоже не будет лишним.

Фронтенд

HTML и CSS

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

jQuery и манипуляция DOM

Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать трансляторы событий и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.

Инструменты разработчика Chrome

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

AJAX

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

Продвинутые темы

Разработка через тестирование

Test-Driven Development, или TDD — это такая техника разработки, при которой создание ПО разбивается на множество небольших циклов: сначала пишутся тесты, которые покрывают желаемое изменение, затем пишется код, который эти тесты проходит. После этого производится рефакторинг кода, при необходимости пишутся новые тесты. Если какие-то тесты участок кода не проходит, это исправляется.

В случае с JavaScript советуем обратить внимание на фреймворки Jasmine, Chai и Mocha. Кстати, на нашем сайте есть цикл статей, посвящённый тестированию фронтенда — может пригодиться.

Веб-сокеты

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

ES6, Babel, Webpack

Сейчас основным стандартом является ES6 (ES2015), но уже принят ES2016, а ES2017 находится в разработке, поэтому нужно всегда быть в курсе обновлений и использовать их. Проблемы совместимости решаются всего парой инструментов:

• Babel — компилирует ES6-код (скоро появится поддержка ES2016) в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика;
• Webpack — собирает все ваши исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь неоценима.

React и Redux

React — библиотека для создания пользовательских интерфейсов. Она была создана компанией Facebook в 2013 году и достаточно быстро стала популярной среди разработчиков. Вам стоит прочитать эти 9 советов, а затем разобрать написание простого приложения, чтобы понять, как работает React и для чего он нужен. React пригодится не только для фронтенд-разработки: Facebook выпустила варианты фреймворка для мобильной (React Native) и VR-разработки (React VR).

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

Аутентификация, сессии, cookies

Вам также стоит разобраться, как приложения взаимодействуют с пользователями, обрабатывают вход в учётную запись и выход из неё, выдают привилегии. Для отслеживания личности пользователя в течение сессии используются cookies — небольшие текстовые файлы, передаваемые сервером браузеру в ответе на HTTP-запрос. А для обеспечения связи базы данных и страничек авторизации можно использовать библиотеку express-session.

Веб-безопасность

И, наконец, стоит обратить внимание на безопасность. Важно изучить как методы атак, так и способы защиты от них.

Вы можете оценить уровень своих знаний и определить, действительно ли вам подходит JavaScript — для этого пройдите специальный тест.

Источник

Как стать JavaScript-разработчиком в 2023

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

Уровень 1. Знакомство

Выучите основы HTML, CSS и JavaScript. HTML — каркас и основа всех сайтов, поэтому нужно знать, что такое теги, как их использовать, и потренироваться ставить . Проще всего изучить на тренажёре.

• Верстать текст и оформлять его.
• Ставить ссылки и изображения.
• Основы CSS — правила, селекторы, свойства и каскадирование.
• Хотя бы немного понимать, зачем нужен JavaScript.

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

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

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

Уровень 2. Погружение

Углубитесь в HTML и CSS. Смотрите на формы, таблицы, флексы, гриды, медиаэлементы. То есть весь обвес, который можно добавить к текстам, картинкам и ссылкам.

Изучите JavaScript. Узнайте, что такое переменные, типы, условия, циклы, массивы и объекты. Хотя бы со словарём и StackOverflow.

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

Где применять знания. Сделайте себе сайт, используя все полученные знания. Соберите страничку, расскажите о себе и своих навыках и оставьте ссылку на Гитхаб. Потому пригодится. Чтобы вдохновиться, зайдите на Behance и наберите в поиске free site web design или free portfolio site web design.

А ещё не бойтесь, что всё сломалось или не получается. Это же код, просто нажмите Ctrl+Z.

Уровень 3. Курсы

Курсы — короткий путь, чтобы не собирать информацию по кусочкам по всему интернету.

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

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

Сложное. Разберитесь с DOM, API JavaScript и другими сложными вещами, вроде ООП, асинхронности, валидации форм или Event Loop. Но не думайте об этом в самом начале, всё придёт с опытом. Да и на курсах это точно дают. Ещё профессиональному разработчику пригодится навык «гонять джейсончики». Для этого стоит изучить форматы передачи данных, например, XML , JSON , JSONP и умело управляться с XMLHttpRequest.

Программы на каждый день. Разберитесь с препроцессорами (LESS или SASS), Webpack для сборки, Git для контроля версий, Figma для экспорта графики, DevTools для отладки. Ну и терминал, куда же без него.

После курсов попробуйте найти работу младшим JavaScript-разработчиком — или, по-другому, джуном.

Уровень 4. Фреймворки React, Vue или Angular

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

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

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

Материалы по теме

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

Источник