Рівень 2. 18 листопада 2019 - 29 січня 2020
програма курсу
Тиждень 1
Розділ 1
ECMAScript
Розглянемо схему роботи на інтенсиві і дізнаємося, які інструменти нам знадобляться. Познайомимося з останніми версіями стандартом ECMAScript, розберемо які проблеми він вирішує і чим відрізняється від ECMAScript 5.
Організаційні питання.
- огляд проектів.
- Схема роботи на інтенсиві.
- область видимості.
- оператори let і const.
- рядки-шаблони.
- стрілочні функції.
- параметри функцій за замовчуванням.
- Оператор spread і rest.
- деструктуризація.
- Створення репозиторію, форк, клонування.
- знайомство з проектом.
Модулі та інфраструктура проектів
Познайомимося з поняттям модульності і розглянемо, як влаштовані модулі в останніх версіях стандарту ECMAScript. Розберемося зі збирачами модулів: навіщо вони потрібні, як вони працюють і як їх підключити в проект. А так само дізнаємося, що таке npm-пакети. Навчимося їх встановлювати і управляти ними.
модулі
- Як працюють модулі в ES20xx.
- циклічні залежності.
Структура JavaScript-проекту
- node.js, файл package.json, package-lock.json.
- управління проектом, npm.
- npm-сценарії.
- Запуск встановлених виконуваних модулів.
- оновлення версій пакетів.
- Установка залежностей.
- збірка програми за допомогою webpack.
- карти коду (Source map).
- Travis.
- налаштування інфраструктури для роботи на інтенсиві.
- підключення в збірку завантажувача модулів.
- поділ проекту на модулі.
РОЗДІЛ 3
Структури даних
Дізнаємося, навіщо потрібні структури даних frontend-розробнику і як їх застосовувати в своїх проектах.
- класичні структури даних.
- структури даних ES2015: Map, Set, WeakMap, WeakSet.
- Робота з масивами JS як зі списками .
- пишемо клієнт-серверний додаток без сервера.
Введення в ООП
Познайомимося з об'єктами в JavaScript. Навчимося створювати, копіювати і застосовувати об'єкти для вирішення практичних завдань. Поговоримо про типізацію і розберемося з магічним контекстом.
Об'єкти JavaScript.
- функції та об'єкти.
- способи створення об'єктів.
- властивості і методи.
- динамічні імена властивостей.
- Геттери і сетери.
- копіювання об'єктів.
- конфігурація об'єктів.
- Proxy.
Контекст.
- Контекст.
- втрата і прив'язка контексту (apply, bind, call).
- Контекст стрілочних функцій.
- Об'єктно-орієнтоване програмування.
- Які проблеми вирішує.
- особливості ООП в JavaScript.
- класи, типи в JavaScript.
- інкапсуляція.
- інтерфейси.
- оновлення коду з урахуванням нових знань про об'єкти.
- застосування об'єктно-орієнтованого підходу.
Розділ 5
Спадкування і поліморфізм
Продовжуємо знайомитися з ООП в JavaScript. Розберемо поліморфізм і спадкування. Попрактикуємося в написанні компонент багаторазового використання.
ООП.
- поліморфізм.
- успадкування і ланцюжок прототипів.
- Практика вирішення завдання.
Практика
- поглиблення в ООП. Застосування на практиці інкапсуляції, успадкування та поліморфізму.
- Рефакторинг модулів.
Датабіндінг-зв'язування даних
На цьому етапі ми встановимо зв'язок між компонентом і структурою даних: оновлення даних при зміні стану компонент.
Практика
- встановимо одностороннє зв'язування даних - від компонента до даних.
- познайомимося з бібліотеками lodash, chart.js.
Розділ 7
Зв'язування даних. Продовження
А потім встановимо зворотний зв'язок: оновлення компонентів при зміні даних.
Практика
- Зв'яжемо дані у зворотний бік - від даних до компонентів.
- застосуємо двостороннє зв'язування даних.
Розділ 8
Робота з мережею
Дізнаємося як працює протокол HTTP, що таке REST і REST API. Розберемося з об'єктом Promise і дізнаємося, як він допомагає відправляти і обробляти HTTP-запити. Розберемо, як проектувати інтерфейси, в яких є асинхронний код так, щоб користувачеві було зручно.
Протокол HTTP.
REST.
Fetch API.
Промисы.
- функції зворотного виклику (callback ).
- пекло з функцій зворотного виклику, і як його уникнути.
- Promise.
- отримання даних для відтворення програми з зовнішнього сервера.
- надсилання даних на зовнішній сервер.
Offline
Дізнаємося, чи є життя без Інтернету.
- Cache.
- Local Storage.
- Web Worker.
- Service Worker.
- познайомимося з практиками, що дозволяють забезпечити працездатність програми, в разі якщо доступ до мережі пропав.
https://privatelink.de/?https://htmlacademy.ru/intensive/ecmascript