Стать frontend devlopent гуру :) Дневник-блог начинающего фронтэндера.

Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.

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

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

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Некоторые примеры, с которых вы можете начать: 1, 2, 3, 4 и 5. Эти дизайны ориентированны в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

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

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

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

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

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

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

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

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

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

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

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

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

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb  —  самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

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

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

Препроцессоры и постпроцессоры 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 (англ.).

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

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

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

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

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

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

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

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио — самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

Для начала прочитайте статью от Adham Dannaway Мой (простой) процесс дизайна и разработки сайта-портфолио (англ.).

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

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

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

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

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

Стайлгайды

Стайлгайды в вебе это наборы 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 (рус.)
• Большой список стайлгайдов (англ.)
• Стили кода Нетологии (рус.)

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

Язык

Перед началом изучения области применения JavaScript в вебе, мы рассмотрим его как язык. Сперва прочитайте Ускоренный курс по основам языка от Mozilla Developer Network (MDN). Этот материал разъяснит основные языковые конструкции: переменные, условия и функции.

Дальше прочитайте некоторые главы в Руководстве по JavaScript от MDN:

• Грамматика и типы
• Порядок выполнения и обработка ошибок
• Циклы и итерации
• Функции

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

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

Интерактивность

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

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

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

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

container.innerHTML = 'New Content!';

Не волнуйтесь, что это какой-то очень элементарный пример. Вы можете сделать гораздо больше этого при помощи манипуляций с DOM. Чтобы узнать больше о использовании 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. Тем не менее предыдущий раздел содержал горы новой информации. Я думаю, что пришло время сделать перерыв в теории и провести несколько небольших экспериментов. Они помогут закрепить только что изученные понятия.

Эксперимент 5

Для этого эксперимента идите на 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.

Эксперимент 6

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

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

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

Язык

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

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

Императивный 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. Ajax  —  это технология, позволяющая странице взаимодействовать с сервером при помощи JavaScript.

Например, когда мы отправляем форму на сайте, значения полей собираются и формируется HTTP запрос, который отправляет данные на сервер. Когда вы постите твит в Твиттер, ваш Твиттер-клиент создает HTTP запрос к серверу API Твиттера и обновляет страницу на основании ответа сервера.

Подробнее об Ajax можно прочитать в What is Ajax. Если вы до сих пор не получили отчетливого представления о 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. Вы можете думать о них, как о версиях 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. Давайте используем ваши знания на практике.

Эксперимент 7

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

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

Эксперимент 8

Эксперимент 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-библиотеки, которые помогут структурировать и организовать код. JavaScript-фреймворки предоставляют разработчикам набор решений для таких сложных задач, как маршрутизация, оптимизация производительности, управление состояниями. Обычно используются для создания веб-приложений.

Я не буду описывать все JavaScript-фреймворки. Тем не менее вот краткий перечень основных: Angular, React + Flux, Ember, Aurelia, Vue и Meteor. Вам не нужно изучать их все. Выберите один и научитесь работать с ним. Не пытайтесь угнаться за всеми новинками. Вместо этого постарайтесь понять основную философию разработки и принципы, на которых строятся фреймворки.

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

Прежде чем углубляться в изучение фреймворков, важно понять несколько моделей архитектуры, которые используются в них: модель 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

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

AngularJS

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

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

Если вы хотите узнать побольше о работе с Angular, то советую ознакомится с документацией. У них так же есть туториал под названием 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-мышления.

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

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

Эксперимент 9

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

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

Эксперимент 10

Эксперимент 10 будет хорошей тренировкой работы с MVC. Понимание MVC является крайне важным при изучении основ JavaScript-фреймворков. В эксперименте 6 следуйте учебнику Scotch.io для создания клона Etsy с использованием Angular.

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.

Эксперимент 11

Теперь, когда вы потренировались в применении MVC, пришло время 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.

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

Ниже я привожу список наиболее интересных и информативных сайтов, блогов и форумов.

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

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

Стайлгайды

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

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

Базы кода

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

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

В планах начать ходить на собеседования с февраля-марта 2017.