JavaScript: примерный план изучения для начинающих

5 (100%) 12 vote[s]

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

Первые проблемы, с которыми сталкивается начинающий (или решивший стать таковым) программист – это, собственно, поиск точки входа, или по-другому – с чего начать? Если ваши стартовые знания стремятся к нулю, и вы лишь поверхностно ориентируетесь в сути программирования и функционирования «железа», стоит поднабраться опыта на курсах информатики для начинающих (например, подборка курсов CS50 на eDx), заодно и подучить английский. Базовые знания станут фундаментом, на основе которых вы уже сможете осознанно сделать выбор в пользу более углубленного изучения того или иного языка программирования.

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

Ключевым умением для веб-разработки по праву считается знание JavaScript.

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

Универсальный JavaScript

Компании, разрабатывающие JavaScript, идут не по пути конфронтации друг с другом, а совместно работают над его развитием. Язык полностью удовлетворяет как адептов объектно-ориентированного (ООП), так и функционального подхода к программированию. При помощи JS можно быстро решать практически любые задачи: этому способствует огромное количество библиотек и фреймворков, которые постоянно обновляются или появляются новые. Если раньше JavaScript использовался для фронт-энда, то сегодня при помощи серверной платформы Node.js JS используется как в браузере, так и в консоли.

Кроме того, JS уже вышел за узкие рамки веб-разработки. С его помощью можно создавать десктопные (с использованием фреймворка Electron) и мобильные приложения (NativeScript или React Native).

Базовые знания

В первую очередь нужно изучить и хорошо ориентироваться в таких темах:

Git

Git  (не путать с сайтом для размещения git-репозиториев GitHub) — один из важнейших инструментов разработчика. На первых порах он может ещё быть неактуальным, но при расширении вашего кругозора и выполнении крупных проектов без него не обойтись.

Вот главные аспекты, в которых нужно ориентироваться:

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

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

Основы бэкенд

Как уже упоминалось, еще 10 лет назад JS использовался только для фронтенд-разработки. Теперь, благодаря Node.js, JavaScript работает и на серверной стороне.

SSR, CSR, изоморфные приложения

SSR — Server-Side Rendering – формирование страницы на стороне сервера.

CSR — Client Side Rendering – формирование страницы на стороне клиента (в браузере).

Какие проблемы имеются у этих способов?

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

CSR – избавился от проблем скорости SSR (быстрый рендеринг, кеширование), появились одностраничные Single Page Application (SPA).  Но для таких одностраничных приложений CSR SEO оптимизация не годилась, так как весь контент передается клиенту и формируется в браузере (после инициализации начинается загрузка контента), а поисковый робот при запросе на сервер получает лишь пустую страницу.

Node.js

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

Теперь с помощью NodeJS стало возможным написать логику на серверной стороне, и она будет работать и на сервере (при первом обращении посетителя или поискового робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.

Схема функционирования простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и формирует страницу HTML, возвращая её клиенту. Теперь приложение работает на клиентской стороне, в браузере: при переходе на другие страницы приложение обращается за данными к API-серверу, и отрисовывает страницу уже в браузере.

В React (см. дальше) реализация этой схемы осуществляется разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue (см. дальше) есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR, при помощи которого можно быстро создавать универсальные приложения.

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

Изучив Node, можно более глубже изучить бэкенд-разработку и разобраться в серверах и маршрутизации. Акцент делать на портах, протоколах HTTP. Затем можно просмотреть  Express-Node-библиотеку для обработки запросов.

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

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

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

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

Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем изучить SQL и быть в курсе разных систем управления базами данных. Знание ORM тоже не помешает.

Веб-сокеты

Не стоит пренебрегать этой темой. Веб-сокеты очень полезны. В отличие от протокола HTTP WebSocket позволяет работать с двунаправленным потоком данных. Самой распространённой реализацией является библиотека socket.io .

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

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

Фронтенд

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

HTML, CSS, JavaScript

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

На что нужно обратить внимание? Любое разрастание языка заканчивается необходимостью упрощения и типизации. Так, в HTML появились препроцессоры. Одним из таких инструментов является Pug, сокращающий объем написанного практически вдвое.

Чтобы быстро вставлять динамические данные в страницу, не затрагивая HTML-разметку, придумали шаблонизаторы. К примеру, в разметке пишется <h1>{{ title }}</h1>, запускается шаблонизатор со значением переменной title, и это значение подставляется вместо фигурных скобочек. Теги отдельно, контент отдельно. Можно удобно вставлять динамический контент с помощью циклов и условий — например, передавать массивы объектов и выводить их в таблице.

В CSS появлялись препроцессоры. Они расширяют синтаксис CSS и добавляют множество разных возможностей — вложенные блоки, переменные, циклы.

Препроцессор — это такая программа, которая запускается и компилирует этот сахарный синтаксис (syntactic sugar  — синтаксические возможности, применение которых не влияет на поведение программы, но делает использование языка более удобным для человека) в чистый CSS. Препроцессоры позволяют избежать повторного использования кода, выстраивают архитектуру, что в конечном счете делает CSS языком программирования. Выберите для себя и изучите какой-либо инструмент: Stylus (наиболее популярный), LESS или SASS.

Вслед за препроцессорами появились постпроцессоры. Они, наоборот, обрабатывают уже готовый CSS и модифицируют его (добавляют дополнительные свойства к уже существующим, изменяют названия классов, делая их уникальными, чтобы ничего не «поехало»). Обычно их используют для поддержки кроссбраузерности. PostCSS — один из таких постпроцессоров, который включает обширную библиотеку плагинов, упрощающих разработчику жизнь.

Фреймворки CSS, адаптивность

Как развивались способы верстки страницы? Вначале использовались таблицы. Затем появилась контейнерная вёрстка, использующая блоки и контейнеры. Блоки позиционировались при помощи float: right/left.

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

Источники: Flexbox и Grid — знакомство с CSS-вёрсткой, а также Flexbox и Grid на developer.mozilla.org, или здесь.

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

Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно прописать нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный – это легендарный  Bootstrap. Есть ещё Bulma, и много других, но не таких популярных. В CSS-фреймворках адаптивность идёт из коробки, нужно лишь научиться правильно ими пользоваться. Такие CSS-фреймворки (а их сейчас в вебе 99%) во многом облегчат начинающему верстальщику освоение навыков грамотной вёрстки.

В каком состоянии JavaScript сегодня

Основная версия JS, которая работает во всех современных браузера – это  ES5. В 2015-м году вышел усовершенствованный стандарт JavaScript ES2015, или ES6. В нем появилось много новых инструментов упрощённого описания логики. Но в старых браузерах он не работает. Проблему решили при помощи препроцессора Babel, который компилирует в браузере ES6 в ES5.

Есть и другие способы писать код JS на более «понятном» синтаксисе, с последующей трансляцией его в ES5 (так же, как и в случае с ES6):

      • TypeScript — он добавляет к JavaScript множество инструментов из «серьёзного» программирования — классы, интерфейсы, модули и др., а также упорядочивает типы переменных. Его в основном используют для написания массивной логики, пользуясь приёмами строгой типизации;
      • CoffeeScript — синтаксис кода намного более удобный, понятный, «человечный»;
      • и много других, менее популярных — Dart, Elm

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

Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать трансляторы событий и библиотеку jQuery для управления DOM. jQuery – это простой инструмент с удобным синтаксисом, который позволяет обращаться к определенным элементам страницы и выполнять с ними какие-то действия. Со временем jQuery «оброс» различными плагинами, готовыми решениями, что упростило работу с ним.

Есть мнение, что jQuery скоро полностью заменят Angular и React.  Но она не теряет популярности, и поэтому её стоит знать. Кроме того, для стартового изучения лёгкая и простая jQuery очень удобная. Современные AngularBackbone довольно сложные для изучения, и на первых порах к ним вы навряд ли обратитесь и будете использовать.

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

MVC

Решение заключалось в перенесении архитектурного шаблона с серверной части на клиентскую, получившее название MVC (модель-представление-контроллер). Модель описывает данные (модель пользователя, модель фильма, модель комментария). Контроллер обрабатывает запросы (например «показать по определенному адресу страницу со списком»). Представление отвечает за отображение данных в HTML, в которое контроллер посылает данные, полученные из БД/API.

Вот тут «всплывают» упомянутые ранее одностраничные single page application, SPA — приложения, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за новыми данными по API. Этот подход называется AJAX. Таким образом, HTML не генерируется на стороне сервера. Клиент получает клиентскую логику только один раз, а переходя на новую страницу, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию о товарах), без тегов HTML (как правило, в формате JSON), и самостоятельно генерирует представление.

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

AngularBackbone — современные представители MVC-шаблона на фронтенде.

Компонентная архитектура: React, Redux,
Vue

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

Таким образом, компонент – это самостоятельный и независимый участок разметки с собственной логикой и стилями. Кроме логики и стиля, компонент имеет свойство текущего состояния (открыто ли окно, активна ли кнопка). Всё приложение можно представить в виде дерева состояния его компонентов.

Теперь разметка HTML зависит от текущего состояния: изменение состояния влечет изменение разметки. Это реализуется технологией Virtual Dom.

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

Такая реализация позволила сделать приложения более производительными, (ведь основная часть работы браузера — это как раз операции с DOM, работа с деревом объектов HTML).

Тут мы приблизились к понятию реактивных приложений. В таких приложениях при изменении данных вместо прямого изменения DOM/Virtual Dom, вводится объект состояния, модель данных, и на её изменения подписывается обработчик, который уже меняет DOM. Чтобы что-либо изменить в представлении, нужно лишь изменить свойство модели (например, добавить в массив новый товар), всё остальное произойдет само (товар появится в html-таблице).

Сайты, работающие на одном из реактивных инструментов, отличаются молниеносностью. А медленные сайты (относительно реактивных), скорее, работают на jQuery по принципу изменений в реальном DOM.

React

Все описанные выше концепции (Virtual Dom, компоненты, реактивность) нашли воплощение в новом инструменте для создания клиентских приложений от Facebook — React.

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

Управление состоянием

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

Такой шаблон можно назвать JavaScript-объектом со свойствами. Схема-образ получила название Flux. Для React реализация управления состоянием — Redux. Redux — это контейнер, содержащий массив предсказуемых состояний. Благодаря модульности его можно использовать для сокращения кода. Особенно полезен в многопользовательских приложениях, работающих в режиме реального времени, в играх.

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

А концепция препроцессора React JSX — переплетение кода и разметки, выглядит не столь удачно, сложно потом понимать, что же такое хотел сказать автор кода, сложно менять разметку.

Vue.js

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

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

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

Проблемы совместимости решаются при помощи  Babel — компилирует ES6-код в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика.

Менеджеры пакетов

Разработчики постоянно делятся готовыми блоками кода, модулями. Для работы с зависимостями пользуются менеджером зависимостей npm. На npmjs.com представлено огромное количество модулей, плагинов, библиотек на все случаи жизни. Поэтому перед тем, как что-то писать, посмотрите там: может кто-то уже это сделал.

Параллельно с npm используют более совершенный менеджер зависимостей Yarn. Многие сейчас отдают предпочтение именно ему.

Менеджеры задач, инструменты сборки и автоматизации

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

      • Webpack — это модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Собирает все исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь незаменима. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты).
      • Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
      • Gulp — это не диспетчер запуска задач. Он определяет задачи в JavaScript как функции, автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), обеспечивает лучшую прозрачность и контроль над процессом.
      • Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
      • Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
      • Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.

Инструменты тестирования

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

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

      • Jasmine— BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода Python и Ruby.
      • Mocha — это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
      • PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
      • Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.
      • Jest — комплексное решение для тестирования JavaScript. Работает из коробки для большинства проектов JavaScript.
      • TestCafe — инструмент Node.js для автоматизации сквозного веб-тестирования.

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

      • JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
      • Chrome Dev Tools. Было бы непростительно обделить вниманием инструменты Chrome, которые дают огромное количество возможностей. С ними вы сможете изучать элементы DOM, производить отладку через консоль, отслеживать маршруты и многое другое.
      • ng-inspector — кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
      • Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.

Инструменты веб-безопасности

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

      • Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
      • Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
      • RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
      • Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
      • OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.

Заключение

Итак, карта местности готова, теперь можно сверстать маршрут движения по просторам фронт-энда:

      1. Изучите базовые основы вёрстки — HTMLCSS, все тонкости вы не запомните, а все остальное придет в процессе практической работы. Более подробно следует изучить Flexboxи CSS grid.
      2. Разберитесь с  Bootstrap или bulma.io. Обучение можно проводить «на лету», создавая с помощью предоставляемых исходников небольшие проекты.
      3. Изучите JavaScript. Тут ситуация та же: просмотрите синтаксис ES6, чтобы его понимать. Разберитесь на практике, как реализованы те или иные UI-компоненты в вышеупомянутых CSS-фреймворках.
      4. Изучите основы Git. Это система контроля версий, и она уже на данном этапе хорошо вам послужит, позволит фиксировать поэтапно изменения в коде и хранить их.
      5. Изучите BEM/SuitCSS, на выбор.
      6. Разберитесь с синтаксисом Stylusи Pug.
      7. Изучайте документацию js. В процессе изучения вам придется рассматривать множество смежных вещей — компонентная архитектура, сборка с помощью webpack, работа с API, SSR, flux, автотестирование. При этом вы разберетесь в их взаимосвязях и назначениях.
      8. Посмотрите библиотеку lodash. В ней много полезного, что поможет более лаконично писать код на JavaScript.
      9. Изучите автотестирование фронтенда. Этим вы изначально облегчите себе дальнейшую работу ( Jest,  TestCafe). В Vue.js есть хороший инструментарий для автотестов из коробки.
      10. Пробуйте создать собственное приложение. Если на первых этапах нет идей – разберите любое приложения, поймите его идею, способ реализации. Попробуйте расширить его, добавить свои дополнительные функции.
      11. В дополнение изучите популярные сегодня транслируемые в JavaScript языки — TypeScriptCoffeeScript.

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

Создано по материалам сайтов:

tproger.ru, developer.mozilla.org, habr.com, medium.com, и других, ссылки на которые есть в материале.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 2417

Популярные записи