REACT И VUE: КОМПОНЕНТЫ В ДЕЙСТВИИ

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

В этом курсе рассматривается проблема компонентизации, демонстрируется пример создания компонентов на основе чистого JavaScript и HTML5, а затем происходит переход к рассмотрению основ работы с компонентами с помощью популярного фреймворка React (в сравнении с другим популярным фреймворком Vue).

Вы научитесь разворачивать основу проекта с помощью инструмента create-react-app, описывать компоненты с помощью языка шаблонизации JSX, который является частью React, собирать пользовательский интерфейс из таких компонентов, компилировать проект и размещать его на таком хостинге как GitHub Pages.

В рамках курса для зачёта вам нужно будет выполнить проектное задание, развернуть его на хостинге и отправить результат в виде URL-адреса преподавателю.

Автор и преподаватель курса:

Государев Илья Борисович  – доцент факультета программной инженерии и компьютерной техники Университета ИТМО.

E-mail: goss@itmo.ru

Программное обеспечение, необходимое для обучения: программа Visual Studio Code,  Яндекс-браузер.

СЕРВЕРНЫЕ ПРИЛОЖЕНИЯ И МИКРОСЕРВИСЫ НА NODE.JS

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

В этом курсе рассматривается работа веб-сервера (который может быть запущен с помощью готового продукта типа NGINX) и модель серверного приложения на Node.js. Вы увидите разницу между веб-приложением, которое обеспечивает выдачу контента, такого как веб-страницы, браузеру, и веб-сервисом, который выдаёт данные для дальнейшей обработки сценарием на JavaScript.

Вы научитесь автоматизировать выполнение запросов к веб-серверу с использованием таких инструментов как CURL, познакомитесь с понятиями порта и сетевого интерфейса применительно к запуску серверного веб-приложения.

В курсе рассматривается создание веб-серверного приложения с помощью стандартного модуля http платформы Node.js, а также с помощью широко распространённой библиотеки  Express. Вы получите представление о том, для чего и как используется RESTful API. Также вы изучите примеры создания микросервисов с помощью основанных на Express решений, таких как Seneca и Hydra.

В рамках курса для зачёта вам нужно будет выполнить несколько заданий с автоматизированной проверкой.

Автор и преподаватель курса:

Государев Илья Борисович  – доцент факультета программной инженерии и компьютерной техники Университета ИТМО.

E-mail: goss@itmo.ru

Программное обеспечение, необходимое для обучения: программа Visual Studio Code,  Яндекс-браузер.

ВВЕДЕНИЕ В TYPESCRIPT И FLOW

TypeScript  –  разработанный фирмой Microsoft язык со строгой статической типизацией, который исправляет связанные с типами данных недостатки JavaScript и преобразуется в него в процессе транспиляции. 

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

В этом курсе рассматриваются основы TypeScript, встроенные типы, такие как never или Tuple, ошибки, которые выдаёт компилятор, подходы к развёртыванию проекта. Также рассматривается альтернатива для TypeScript, предназначенная для использования в экосистеме транспилятора Babel под названием flow.

Вы научитесь  устанавливать typescript и использовать оболочку REPL, компилировать/транспилировать сценарий на TypeScript, разворачивать проект на TypeScript с помощью инструмента Parcel. 

В рамках курса для зачёта вам нужно будет выполнить несколько заданий с автоматизированной проверкой.

Автор и преподаватель курса:

Государев Илья Борисович  – доцент факультета программной инженерии и компьютерной техники Университета ИТМО.

E-mail: goss@itmo.ru

Программное обеспечение, необходимое для обучения: программа Visual Studio Code,  Яндекс-браузер.

Тема 1. Развитие стандарта JavaScript.

Стандарт ECMAScript. Ecma International, Technical Committee 39 и эволюция предложений (proposals). Преобразование JavaScript-кода с помощью транспилятора babel. Плагины и пресеты. Типизация. Типизированные массивы. Понятие буфера и потока.

Тема 2. Модульность

Модульность в экосистеме JavaScript/NodeJS. Импорт и экспорт в стиле CommonJS и нативная ES2015-модульность. Модули в Node.js и в браузере. Асинхронная загрузка модулей.   Изоморфный JavaScript-код.  Сбор проекта с помощью бандлера - на примере Webpack.

Тема 3. Асинхронное программирование на JavaScript

Коллбэки и ад коллбэков. Миграция к промисам. Промисификация и асинхронные функции. Синхронное ожидание промисов (async/await). Функции-генераторы. Связь генераторов и итераторов.

Тема 4. Элементы функционального программирования на JavaScript

Цепочки методов и функциональный подход к манипулированию элементами DOM. Функциональный и императивный  стиль в манипулировании массивами: forEach vs for of

Лямбды (безымянные функции). Функции высшего порядка. Контекст this: стандартные функции JavaScript и стрелочные функции. Иммутабельность функций. Чистые функции. Немедленно вызываемые функции (IIFE). Паттерны вызова функций и паттерны передачи аргументов (внедрение зависимостей). Рекурсия и безымянная рекурсия. Обход древовидных структур.

Тема 5. Элементы объектно-ориентированного программирования на JavaScript.

Проектирование структуры предметной области. ORM - Object Relational Mapping.

Геттеры и сеттеры. Объекты как коллекции свойств и пространства имён. Мутабельность объектов. Встроенные объекты. Проектирование цепочки методов. Прототипы объектов. Функции-фабрики объектов и функции-конструкторы.

Классы в современном JavaScript. Конструкторы. Реализация наследования. Обращение к классу-родителю с помощью super.

Тема 6. Элементы метапрограммирования на JavaScript

Рефлексия. Объект Reflect. Создание прокси и ловушек.

Символы. Создание итератора с помощью символа Symbol.iterator

Тема 7. Проектирование модульных тестов. 

Подготовка наборов кейсов. Модульное тестирование и интеграционное тестирование. Страничное, межстраничное, логическое тестирование. Тестирование клиентского сценария. Тестирование событий, возникающих в интерактивных элементах управления. Асинхронное и промисифицированное тестирование. Тестирование с помощью автоматизации управления браузером на примере Chromium / Puppeteer.

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

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

Тема 1. Основные понятия языка JavaScript. 

Структура программы. Файлы. Выполнение программы в разных средах: в браузере и в интерфейсе командной строки (nodejs CLI). Жизненный цикл приложения на JavaScript.

Тема 2. Зависимости.

Некоторые базовые инструменты (npm, yarn, turbo, nodemon, eslint).

Формат JSON. Структура и назначение файла package.json

Тема 3. Переменные и области видимости JavaScript. 

Типы данных. Контроль типов данных. Приведение типов. Применение Unicode в JavaScript.

Тема 4. Функции. 

Стандартные и стрелочные функции. Возврат значения функцией. Анонимные функции (лямбды). Модели вызова функции. Передача и привязывание аргументов. Аргументы по умолчанию.

Тема 5. Функция как тип данных.

Замыкания и коллбэки. Таймер. Веб-воркеры.

Тема 6. Управляющие конструкции JavaScript.

Ветвление, кейсы, циклы с предусловием и постусловием, со счётчиком и без счётчика.

Тернарный оператор. Контроль ошибок (try..catch).

Данный курс для тех, кто хочет продолжить изучение веб-технологий и перейти на более высокий уровень, основанных на серверных технологиях (PHP+MySQL) для создания таких проектов как интернет-магазин, форум, система управления сайтом (CMS) и т.д.

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

Объём: 60 ч.

Тема 1. Основные понятия языка PHP.

Структура программы. Файлы. Выполнение программы в разных средах: в связке с веб-сервером и в интерфейсе командной строки (PHP CLI). Жизненный цикл приложения на PHP.

Тема 2. Развёртывание стека LAMP.

Развёртывание связки PHP-FPM + NGINX на виртуальном хостинге и в докер-контейнере.

Тема 3. Программные сущности в сценарии PHP

Переменные, типы данных, функции, строки, массивы, ассоциативные массивы.  

Суперглобальные массивы. Стандартные библиотеки.

Тема 4. Буфер вывода.

Генерация изображений. Работа с файлами и потоками.

Тема 5. Основы объектно-ориентированного программирования на PHP

Менеджер зависимостей composer и автозагрузка классов.

Реализация наследования.

Стандарты кодирования PSR.

Тема 6. Реляционные базы данных (на примере MySQL).

Развёртывание сервера с MySQL и подключение к нему. Пользователи и их права. Импорт и экспорт данных. Использование PDO для взаимодействия PHP и MySQL.

Тема 7. Механизм сессий в PHP.

Хранение данных сессии. Создание и уничтожение сессии.

Тема 8. Реализация MVC-паттерна в экосистеме PHP.

Обзор популярных MVC-фреймворков (на примере Yii и Laravel).