Прокачать Front-End навыки

Основы HTML и CSS

В разработке фронтенда все начинается с HTML (рус) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

1. Пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.
2. Курс Создай сайт (англ.) от CodeAcademy. Там основа для построения сайтов на HTML и CSS. А тиак же Построение веб-форм (англ.)  —  еще одно руководство от CodeAcademy.
3. CSS Diner (англ.) — забавная игра с задачками по CSS.
4. Другой важный аспект HTML и CSS  —  раскладка. LearnLayout (рус.) — интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.
5. Освоение Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика  —  это фундаментальная основа интерфейса. Бесплатная онлайн-книга Professional Web (англ.) от Donny Truong научит всему, что надо знать о типографике во фронтенд-разработке.
6. CodePen— это площадка для фронтенда (“песочница”), где можно писать HTML и CSS код без создания файлов на компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

Практика основ HTML и CSS

Будем использовать Dribbble, который полон вдохновляющего дизайна. На Dribbble найти дизайн, код для которого можно написать за пару часов. Некоторые примеры, с которых можно начать: 1, 2, 3, 4 и 5. Эти дизайны ориентированны в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Затем попробовать сверстать их на CodePen. Если что непонятно, то в помощь StackOverflow (англ.).

Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили.

Еще некоторые примеры на CodePen:

• Меню приложения
• Виджет Twitter
• Простое плоское меню

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

• Dropbox for Business: Попробовать повторить их секцию с баннерами (так называемые hero image (англ.))
• AirBnB: Попробовать повторить их футер
• PayPal: Попробовать повторить их навигацию
• Invision: Попробовать повторить секцию регистрации (signup) в нижней части страницы
• Stripe: Попробовать повторить секцию оплаты

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

Семантичная разметка

Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

• Основы семантической верстки на HTML5 (рус.)
• Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

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

• OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.)
• Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.)
• CSS у Medium чертовски хорош (англ.)

Сброс CSS

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

• MeyerWeb  —  самый популярный способ.
• Создайте свой собственный файл Reset.css (англ.) — если есть желание копнуть глубже.

Кроссбраузерная поддержка

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

• CSS Vendor Prefixes (англ.)
• Вендорные префиксы (рус.)

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

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

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2016 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

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

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

Одна из главных возможностей, которую дают сетки – это обеспечение отзывчивости вашего сайта. Отзывчивость (responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

• Введение в медиавыражения (англ.)
• mobile-first (рус.)
• Введение в медиавыражения Mobile-First (англ.)

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

• Mapbox (англ.)
• LonelyPlanet (англ.)
• SalesForce (англ.)
• MailChimp (англ.)

Соглашения о коде

Соглашения о коде призваны сделать код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

• CSS Guidelines (англ.)
• Github internal CSS toolkit and guidelines (англ.)
• AirBnB’s CSS Styleguide (англ.)
• Руководство по оформлению HTML/CSS от Google (рус.)
• Большой список стайлгайдов (англ.)
• Стили кода Нетологии (рус.)

Отработка лучших практик HTML и CSS

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

Умение проводить эффективный рефакторинг кода  —  очень важный навык для фронтенд-разработчика. Создание эффективного кода – постоянный процесс.

CSS архитектура: рефакторинг CSS (англ.)  — статья, которая подойдет как отправная точка для работы над рефакторингом.

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

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

В качестве еще одного эксперимента создать собственный сайт-портфолио. Для фронтенд-разработчика портфолио — самый важный актив. Статьи в помощь:

• Adham Dannaway Мой (простой) процесс дизайна и разработки сайта-портфолио (англ.)
• Портфолио пройдет через множество итераций (рус.)

HTML и CSS: Полезные ссылки

Блоги по фронтенду

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

• CSSTricks (англ.)
• Smashing Magazine (англ.)
• Designer News (англ.)
• Nettuts+ (англ.)
• CSS Wizard (англ.)
• CSS-live (рус.)
• Frontender magazine (рус.)
• Поток “Разработка” на Хабрахабр (рус.)
• Прогрессор (рус.)

Другие практики по HTML и CSS

• Задания по HTML\CSS на 100dayscss.com
• Задания по вёрстке на github.com
• Занимательные задачи по CSS
• Путь HTML\CSS
• Задачи по HTML и CSS на itmathrepetitor.ru
• Тестовые задания на sites.google.com

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

Что почитать начинающему

1. Перед началом изучения области применения JavaScript в вебе — учебники от Mozilla Developer Network (MDN):
   1. Изучение Веб-разработки
   2. Ускоренный курс по основам языка
2. Руководство по JavaScript от MDN. На первом шаге надо знать хотя бы это:
   
   1. Грамматика и типы
   2. Порядок выполнения и обработка ошибок
   3. Циклы и итерации
   4. Функции
3. И еще пара обучалок от MDN для новичков:
   1. Обзор технологий JavaScript — Введение в JavaScript для веб-браузеров.
   2. Введение в объектно-ориентированный JavaScript —Введение в концепции объектно-ориентированного программирования на JavaScript.
4. Выразительный JavaScript  —  Великолепная бесплатная электронная книга, которую должен прочитать каждый начинающий фронтенд-разработчик.
5. Современный учебник Javascript —  Популярный обучающий ресурс на русском языке.
6. Курс JavaScript на Codecademy.

DOM

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

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

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

var container = document.getElementById(“container”);

container.innerHTML = 'New Content!';

Чтобы узнать больше о использовании JavaScript для взаимодействий с DOM: Руководство по DOM в документации MDN.

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

На данном этапе уже должны быть ответы на следующие вопросы:

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

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

Инспектор

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

Тут есть инструкция по использованию инструментов разработчика в Chrome. Для Firefox — ссылка.

Промежуточные проверка знаний

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

• Наследование и цепочка прототипов
• Области видимости (Scoping)
• Замыкания
• Параллельная модель и цикл событий
• Перехват событий
• Apply, call и bind
• Callbacks and promises
• Variable and function hoisting
• Карринг (Currying)

Выразительный JavaScript охватывает большую часть этих тем.

Императивный vs. Декларативный

Есть два типа подхода к тому, как JavaScript взаимодействует в DOM: императивный и декларативный. С одной стороны декларативное программирование сосредоточено на том, что происходит. С другой стороны императивное программирование сосредоточено не только на том, что происходит, но и как.

var hero = document.querySelector('.hero')

hero.addEventListener(‘click’, function() {<br> var newChild = document.createElement(‘p’)

newChild.appendChild(document.createTextNode(‘Hello world!’))<br> newChild.setAttribute(‘class’, ‘text’)<br> newChild.setAttribute(‘data-info’, ‘header’)<br> hero.appendChild(newChild)<br> })<br>}

Это пример императивного программирования, когда мы вручную запрашиваем элемент и вкладываем структуру в DOM. Другими словами концентрируемся на том, как достичь чего-то. Самая большая проблема этого кода  —  он слишком хрупкий. Если кто-то в процессе работы поменяет имя класса в HTML с hero (герой) на villain (злодей), обработчик событий больше не будет срабатывать, поскольку в DOM нет никакого класса hero.

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

Для получения большей информации:

• The State Of JavaScript — A Shift From Imperative To Declarative
• Three D’s of Web Development #1: Declarative vs. Imperative

Это руководство в первую очередь учит вас императивному подходу перед введением декларативного подхода с фреймворками, например Angular, и библиотеками типа React. Рекомендую обучаться именно в таком порядке потому что это позволит вам увидеть проблемы, которые решает декларативное программирование на JavaScript.

AJAX

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

Подробнее об Ajax можно прочитать:

• What is Ajax
• Explain it like i’m 5, what is Ajax.
• Так жеможно почитать главу о HTTP в книге Выразительный JavaScript.

Новые браузеры стандартно используют Fetch для создания HTTP запросов. Больше о Fetch в можно узнать в статье, которую написал Dan Walsh. В ней рассказано, как работает Fetch и как его использовать. Тк же можно найти полифилы для Fetch и документацию к ним.

jQuery

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

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

Для изучения основ jQuery:

• Материалы в Учебном центре. Они шаг за шагом проведут по таким важным понятиям, как, например, анимация или обработка событий.
• Курс от Codecademy по jQuery.

Но jQuery не всегда подходит для императивного манипулирования DOM. PlainJS и You Might Not Need jQuery  —  два хороших ресурса, которые покажут эквиваленты функций jQuery на чистом JavaScript.

ES5 vs. ES6

Еще одна важная концепция, которую нужно понять, это отношение ECMAScript к JavaScript. Есть два основных направления в JavaScript, c которыми можно столкнуться в повседневной работе: ES5 и ES6. ES5 и ES6 это стандарты ECMAScript, которые использует JavaScript. Окончательная спецификация ES5 была выпущена в 2009 и мы пользуемся ею до сих пор.

ES6, так же известный как ES2015, является обновленным стандартом и предусматривает новые конструкции языка JavaScript, например константы, классы и шаблонные строки. Важно отметить, что ES6 привносит новые возможности языка, но по прежнему определяет их семантику с точки зрения ES5. К примеру, классы в ES6 являются лишь “синтаксическим сахаром” для уже существующих в JavaScript прототипных наследований.

Важно знать оба стандарта, ES5 и ES6, поскольку на текущий момент в разработке приложений могут использоваться как один, так и другой.

Хорошие инструкции по ES6:

• ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning
• Getting Started with ES6 — The Next Version of JavaScript от Dan Wahlin
• Список отличий ES5 от ES6: ES6 Features
• Github репозиторий с функциями ES6

Как всегда лучшим способом обучение является обучение на примерах.

Стайлгайды

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

• AirBnB JavaScript Styleguide (перевод на русский от Uproc)
• Principles of Writing Consistent, Idiomatic JavaScript
• Node Styleguide
• Стили кода от MDN

Базы кода

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

• Lodash
• Underscore
• Babel
• Ghost
• NodeBB
• KeystoneJS

Архитектурные шаблоны

Прежде чем углубляться в изучение фреймворков, важно понять несколько моделей архитектуры, которые используются в них: модель MVC, модель MVVM и модель MVP. Эти паттерны были спроектированы для создания понятного разделения ответственности между уровнями приложения.

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

Чтобы узнать больше об этих моделях, для начала надо бы почитать о MVC в Chrome Developers. После этого — Understanding MVC And MVP (For JavaScript And Backbone Developers), абстрагированно от Backbone, просто пройтись по частям, объясняющим MVC и MVP.

Addy Osman так же написал о MVVM в статье Understanding MVVM — A Guide For JavaScript Developers. Чтобы узнать о причинах и истории возникновения MVC надо прочитать эссе на GUI Architectures от Martin Fowler. И наконец раздел JavaScript MV* Patterns в книге Learning JavaScript Design Patterns. Это фантастическая и совершенно бесплатная книга.

Шаблоны проектирования

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

• Decorator
• Factory
• Singleton
• Revealing module
• Facade
• Observer

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

JavaScript: Быть в курсе

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

• Smashing Magazine
• JavaScript Weekly
• Ng Weekly
• Reddit JavaScript
• JavaScript Jabber

1. Раз
2. Два
3. Три
4. Четыре

Давайте используем знания на практике.

Эксперимент с JavaScript 1

Для этого эксперимента идите на AirBnB, откройте панель инспектора и перейдите во вкладку Console. В этой вкладке вы можете выполнять JavaScript код на странице. Мы собираемся немного повеселится и совершить несколько манипуляций с элементами на странице. Посмотрим сможете ли вы проделать все описанные ниже манипуляции с DOM.

Выберем сайт AirBnB потому что их имена классов в CSS интуитивно понятны и код не обфусцирован никаким компилятором. Не смотря на это вы в праве выбрать любой другой сайт и выполнить задание на нем.

• Выберите тег заголовка с уникальным именем класса и поменяйте текст
• Выберите любой элемент на странице и удалите его
• Выберите любой элемент и измените у него одно CSS свойство
• Выберите одну определенную секцию (тег section) и переместите ее на 250 пикселей вниз
• Выберите любой компонент, например панель, и измените его видимость (visibility)
• Напишите функцию с именем doSomething, которая будет выводить уведомление (alert) “Hello world” и вызовите ее
• Выберите определенный тег параграфа (p), добавьте обработчик события click на него и вызывайте функцию doSomething каждый раз, когда событие происходит

Если вы застряли, то вернитесь к статье JavaScript Functions and Helpers и освежите знания. В большинстве заданий я основываюсь на этом документе. Ниже приведено возможное решение первого задания в списке:

var header = document.querySelector(‘.text-branding’)

header.innerText = ‘Boop'

Главная цель эксперимента  —  посмотреть как реально работают те вещи, которые вы узнали о JavaScript и DOM.

Эксперимент с JavaScript 2

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

• Periodic Table
• Mood Color Generator
• Calculator
• JavaScript Quiz
• Playable Canvas Asteroids

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

Эксперимент 7 сфокусирован на том, чтобы отточить навыки работы с DOM манипуляциями и jQuery. Для этого эксперимента мы применим более структурированный подход. Мы будем клонировать главную страницу Flipboard, и добавлять интерактив при помощи знаний из руководства по JavaScript.

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

Эксперимент с JavaScript 4

Эксперимент 8 объединяет все что вы узнали о HTML и CSS, а так же знания по JavaScript. В рамках этого задания вы создадите часы с собственным дизайном и сделаете их интерактивными при помощи JavaScript. Перед началом я рекомендую прочитать Decoupling Your HTML, CSS, and JavaScript с целью изучения основных соглашений по именованию классов в случаях, когда в разработке участвует JavaScript. Вот список примеров на CodePen. Вы можете использовать их как шпаргалки для этого эксперимента. Если нужно больше  —  поищите по слову clock на CodePen.

• Flat Clock
• Настенные часы на jQuery
• Fancy Clock
• Retro Clock
• Простые часы на JavaScript

Есть два способа выполнения этого задания. Можете начать с проектирования и создания макета на HTML и CSS, а затем добавить JavaScript. Или вы можете сначала написать логику на JavaScript, а затем перейти к разметке и стилям. Вы можете использовать jQuery или чистый JavaScript.

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

Краткий перечень основных фреймворков на 2016 год: Angular, React + Flux, Ember, Aurelia, Vue и Meteor.

Ниже рассмотрена пара фреймворков: AngularJS и React.

Теория

AngularJS

AngularJS  —  это JavaScript-фреймворк с MVC и иногда MVVM. Он поддерживается корпорацией Google и взял сообщество JavaScript штурмом в момент своего выхода в 2010.

Angular является декларативным фреймворком. Одним из самых полезных для меня материалов с точки зрения понимания того, как перейти от императивного к декларативному программированию на JavaScript, оказался How is AngularJS different from jQuery на StackOverflow.

Документация по AngularJS. У них так же есть туториал под названием Angular Cat, который позволит с ходу окунутся в разработку. Более полное и детальное руководство по Angular можно найти в Github репозитории у Tim Jacobi. Так же желательно изучить: best practice styleguide от John Papa.

React + Flux

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

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

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

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

Практика

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

Эксперимент с фреймворками 1

Эксперимент заключается в том чтобы взять и построить заново часть Todo MVC приложения, игнорируя фреймворки. Другими словами, использовать старый добрый JavaScript. Целью этого эксперимента является демонстрация того, как MVC работает без смешения со специфичным синтаксисом фреймворков.

Перед началом надо посмотреть, как это будет выглядеть в конечном результате TodoMVC. Первым делом начните новый проект локально и создайте три компонента MVC. Поскольку это довольно сложный эксперимент, все исходники к нему можно найти на Github. Скачайте репозиторий и поиграйтесь с разными компонентами MVC до тех пор, пока не поймете их отношения друг с другом.

Эксперимент с фреймворками 2

Эксперимент будет хорошей тренировкой работы с MVC. Понимание MVC является крайне важным при изучении основ JavaScript-фреймворков.

Build an Etsy Clone with Angular and Stamplay научит как создавать веб-приложения на Angular, интерфейсы с API и как структурировать большие проекты. После прохождения всех уроков уже должны быть ответы на следующие вопросы:

• Что такое веб-приложение?
• Как MVC/MVVM взаимодействует с Angular?
• Что такое API и какие функции выполняет?
• Как организовать и структурировать большие объемы кода?
• В чем преимущества разделения вашего интерфейса на компоненты?

Если есть желание построить больше приложений на основе Angular, то попробуйте Build a Real-Time Status Update App with AngularJS & Firebase.

Эксперимент с фреймворками 3

Теперь пришло время Flux. Эксперимент заключается в создании списка задач с использованием React и Flux. Можно найти полный учебный курс на сайте с документацией Facebook’s Flux. Курс шаг за шагом объяснит, как использовать React и как Flux применяется для создания веб-приложений.

После окончания этого курса полезно будет изучить учебники How to Build a Todo App Using React, Redux, and Immutable.js и Build a Microblogging App With Flux and React.

https://developer.mozilla.org/ru/docs/Web/JavaScript

Учебники

Начальный уровень в этапе "теория". Здесь более продвинутые уровни.

Средний уровень

1. Повторное введение в JavaScript
   Обзор для тех, кто думает, что знает JavaScript.
2. Структуры данных JavaScript
   Обзор существующих структур данных в JavaScript.
3. Операторы сравнения и тождественности
   JavaScript предоставляет три различных оператора сравнения значений: строгое равенство ===, с приведением типов == и метод Object.is().

Продвинутый уровень

1. Наследование и цепочка прототипов
   Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.
2. Строгий режим или "use strict"
   Строгий режим говорит, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.
3. Типизированные массивы
   Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.
4. Управление памятью
   Жизненный цикл памяти и сборка мусора в JavaScript.
5. Модель параллелизма (мультипоточности) и цикл событий
   В JavaScript есть модель параллелизма, основанная на "цикле событий".

Справочник

Подробный справочник по JavaScript.

1. Стандартные встроенные объекты
   Узнайте о стандартных встроенных объектах Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet и других.
2. Выражения и операторы
   Узнайте о поведении таких операторов в JavaScript, как instanceof, typeof, new, this, приоритете операторов и многом другом.
3. Инструкции и объявления
   Узнайте о do-while, for-in, for-of, try-catch, let, var, const, if-else, switch и многих других выражениях и ключевых словах в JavaScript.
4. Функции
   Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.

Инструменты и дополнительные ресурсы

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

1. Инструменты разработчика Firefox
   Простой редактор JavaScript, Веб-консоль, JavaScript Профайлер, Отладчик и другие.
2. Firebug
   Редактируйте, отлаживайте и проверяйте CSS, HTML и JavaScript вживую на любой странице.
3. JavaScript шеллы
   JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.
4. TogetherJS
   Объединение усилий стало проще.
5. Stack Overflow
   Вопросы по JavaScript на Stack Overflow.
6. Версии JavaScript и информация о релизах
   Просмотрите историю возможностей JavaScript и их статус.
7. JSFiddle
   Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.

http://jstherightway.org

http://superherojs.com

http://bonsaiden.github.io/JavaScript-Garden/

https://www.learneroo.com/modules/64

http://habrahabr.ru/post/240219/

https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer

https://laracasts.com/skills/javascript