Курс "Frontend технологии"

/lectures - лекции в формате pdf, а также дополнительные материалы к ним. Github не всегда корректно отображает содержимое pdf, поэтому лучше скачивать файл к себе и затем открывать локально.

Литература и обучающие ресурсы

• Дэвид Флэнаган JavaScript: подробное руководство (6 издание)
• Nicholas C. Zakas Understanding ECMAScript 6: The Definitive Guide for Javascript Developers
• Современный учебник JavaScript - один из лучших онлайн учебников, содержит также задания для тренировки
• Mozilla Developer Network (MDN) - прекрасный справочник не только по JS, но и HTML/CSS верстке и другим web-технологиям
• Speaking JS - Несколько книг и очень много подробных статей по отдельным аспектам языка

Программное обеспечение

Браузер

Для тестирования JS и HTML кода в браузере нам понадобится браузер (all of a sudden!) Желательно использовать Firefox или Chrome, так как они обладают наиболее полными и оттестированными реализациями JS, а также хорошими инструментами для разработчиков.

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

Панель разработчика обычно вызывается клавишей F12.

Среда разработки

Для написания кода подойдет любой редактор кода с подсветкой синтаксиса, из платных решений можно выделить JetBrains WebStorm, как одну из наиболее мощных IDE, созданную специально для JavaScript. Это платное ПО с trial периодом 30 дней https://www.jetbrains.com/webstorm/

Можно также использовать простые и "легкие" редакторы кода, которые предоставят подсветку синтаксиса и некоторые дополнительные возможности. Из кроссплатформенных редакторов можно выделить Sublime Text 3 (shareware), как надежный редактор с огромным набором плагинов: https://www.sublimetext.com/3

Свободно распространяемые редакторы:

• Atom
• Brackets

Прочее

Для запуска тестов и сборки проектов мы используем NodeJS. Лучше всего взять последнюю стабильную версию. Также понадобится пакетный менеджер NPM, обычно он устанавливается автоматически вместе с nodeJS. Для скачивания практических заданий c GitHub понадобится Git: https://git-scm.com/.

Выполнение практических заданий

Склонируйте практическую работу из github репозитория на свою машину: (в командной строке) git clone [адрес репозитория], например git clone https://github.com/skoloney/practice-1.git Ссылки на практические работы будут появляться в этом документе по мере их появления.

перейдите в папку с лабораторной работой и инициализируйте NPM проект:

cd practice/1
npm install

после этого вам будут доступны несколько NPM команд:

• npm run lint - проверка качества вашего кода утилитой ESLint
• npm run test [test-file] - запустить unit-тесты из указанного файла в консоли, например: npm run test test/spec/task-1.spec.js
• npm run test:all - запуск всех unit-тестов в консоли
• npm run test -- --watch [test-file], npm run test:all -- --watch - запуск одного или всех unit-тестов в консоли, с автоматическим перезапуском при изменении исходного кода. Например: npm run test -- --watch test/spec/task-1.spec.js
• npm run test:browser - запуск всех unit-тестов в браузере

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

Каждое задание представляет из себя отдельный JS файл в папке src, в котором вам необходимо дописать тело одной (или нескольких) функций. Чтобы проверить корректность решения, запустите тесты в консоли или браузере. В браузере вы сможете легко отлаживать свой код с помощью директивы debugger;, зато в консоли вам покажут довольного котика.

Если какие-то тесты не прошли, вам покажут ошибку, какой именно тест не прошел, что тест ожидал получить и что вместо этого выдал ваш код. Котик в консоли при этом будет не таким довольным. Помните, самочувствие котика зависит только от вас!

Линтовка - это праздник ..!

ESLint - утилита для автоматической проверки качества и стиля кода и стиля кодирования используются специальные утилиты (тысячи их), самой популярной из которых на сегодняшний день является ESLint. Он проверяет и позволяет настроить сотни правил - отступы строк, стиль комментариев, стили фигурных скобок etc., а также отлавливает потенциальные ошибки, например неиспользуемые имена переменных, неконсистентные операторы return и прочее. В практических заданиях ESLint и все его правила уже настроены, и вам остается только вызвать команду npm run lint чтобы проверить свой код.

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

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

Отладка кода

• Отладка кода в браузере: https://learn.javascript.ru/debugging-chrome
• Отладка NodeJS кода доступна "из коробки" со встроенным отладчиком, однако отлаживать с его помощью программу на NodeJS - это своеобразное удовольствие. Лучше использовать пакет https://github.com/node-inspector/node-inspector который позволяет отлаживать NodeJS программу из консоли браузера.

Хороший гайд по тестированию в браузере: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript

Вывод отладочной информации

Вывести отладочную информацию можно с помощью объекта console, который позволяет не просто выводить данные в консоль, но и форматировать, объединять данные в группы, содержит примитивный профилировщик и может проверять логические условия (console.assert - простейшее тестирование). Подробно о возможностях console здесь Объект console работает и в браузере, и в nodeJS с небольшими различиями.

Практические работы

• Простые типы данных, приведение типов, объекты, массивы
• Функции, замыкания, функциональное программирование
• Классы, браузерный API, DOM-дерево
• TBD
• TBD