Курс посвящен созданию современных приложений на основе компонентов платформы Веб.

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

Вторая часть курса посвящена изучению возможностей современных веб-обозревателей для разработки веб-приложений и получение навыков программирование клиентской стороны насыщенных веб-приложений (RIA) с использованием современных стандартов HTML5 и JavaScript.

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

2020/21 учебный год, Институт математики и информационных технологий, весенний семестр.

Специальности:

• 01.04.02 Прикладная математика и информатика. Математическое моделирование и информационно-коммуникационные технологии (магистр, 1 год обучения)

Лектор: К. А. Кулаков

Руководители практик: К. А. Кулаков

Лекции

• Веб-программирование на стороне клиента
• Динамическое манипулирование структурой DOM
• Локальные хранилища данных. Мультимедийные возможности
• Сетевые средства, синхронное и асинхронное взаимодействие с сервером
• Манипулирование историей веб-обозревателя и создание одностраничных приложений
• Организация одноранговых сетей с помощью WebRTC

Задания. Часть 2

1. Работа с объектной моделью документа (DOM) В среде JSFiddle: форма из поля ввода и кнопки, при подтверждении формы (нажатием на кнопку или на ввод) текст из поля ввода копируется на страницу под формой. То же с использованием библиотеки JQuery для работы с DOM. Оформить в виде отдельного html-файла (без jsfiddle) с подключением JQuery. Список задач: при подтверждении формы текст из поля ввода добавляется в список. Рядом с каждым элементом две кнопки — «пометить» (изменяет внешний вид задачи) и «удалить».
2. Сохранение состояния в браузере Добавить в список задач сохранение состояния в LocalStorage. После повторного открытия страницы состояние (наличие и порядок задач в списке, какие отмечены) должно полностью восстановиться.
3. Мультимедиа Аудиоплеер с возможностью добавлять локальные файлы в список воспроизведения. См. элемент <audio> и метод createObjectURL для доступа к локальным файлам, которые выбрал пользователь.
4. Асинхронная загрузка и управление историей браузера Одностраничное приложение: панель навигации из нескольких ссылок, при нажатии на которые вся страница не перезагружается, но заменяется основная ее часть. При этом добавляется запись в историю браузера, так что переход отображается в адресной строке и работают кнопки «назад» и «вперед». См. XMLHttpRequest, history.pushState, window.onpopstate.
5. Одноранговая сеть Продемонстрировать установку прямого сетевого соединения и обмен текстовыми сообщениями между двумя экземплярами веб-приложения, которые могут работать в различных браузерах на разных компьютерах. Обмен установочной информацией можно производить без сервера путем копирования сгенерированного приложением описания соединения в текстовое поле другого экземпляра. См. WebRTC, RTCPeerConnection, RTCDataChannel.

Ссылки