Интуитивно, у веб технологий достаточно большой потенциал для образовательных целей. Но Когда я последний раз пытался объяснить азы веб-разработки на примере простой статичной страницы, то сразу обрушил на ученика огромное количество информации. Что такое NodeJS (а значит и JS), как работает управление пакетами и какой менеджер выбрать, package.json и зависимости, базовый фреймворк, SSG-генератор, как это всё запустить и потом удивиться, что примитивная страница с текстом Hello заняла столько времени и 200МБ дискового пространства.
Интересно будет смоделировать процесс обучения, в которым я бы хотел попробовать альтернативный подход. В том числе используя принцип Origo. Такой подход, которому не научит современный искуственный интеллект.
TODO:Больше фокус на создании приложений, чем на форматировании и декорировании документов. Чтобы можно было создавать полезные инструменты в том числе для себя и через такой прикладной характер курса запустить процесс постоянного роста навыков.
Как правило, в учебниках по веб-разработке первым шагом идёт знакомство с HTML. Но это всего лишь язык разметки, который браузером трансформируется в DOM. Точно также в DOM трансформируется и другой веб-столп - CSS или язык векторной графики SVG. Виртуальный DOM создают и всевозможные веб-фреймворки (React, Vue, Angular и т.п.). Можно написать веб-приложение, практически не используя ничего из этого, но не обойтись без DOM.
Другое преимущество DOM заключается в том, что эта концепция вездесуща. В дальнейшем ученик найдёт её в мобильных (UIKit) и настольных (XAML) приложениях. Практически любой пользовательский интерфейс, например Scene Collection в инструменте 3D моделирования Blender - это такая же навигация по дереву DOM.
DOM расшифровывается как Document Object Model, то есть это модель объектов документа. И его объяснение можно выгодно начать с понятия документа. Мы берём некоторый условный документ, пусть он наглядно будет в форме книги, открываем его и с высокой степенью вероятности видим большие главы. Внутри глав могут быть разделы, внутри разделов - параграфы, таблицы и иллюстрации.
Представим себе, что этот документ - бухгалтерская книга. Внутри могут быть два больших раздела по активам и пассивам, внутри каждого из них подраздела по группам счетов и так далее. По-большому счёту практически всё что угодно можно условно представить в виде документа. Всю планету земля можно рассмотреть как документ эпических размеров, внутри которого будут главы по континентам, разделы по странам, параграфы по городам и так далее.
Более подробно этот вопрос будет исследован в Браузер как среда разработки, а здесь стоит отметить удобство с точки зрения образования. Не нужно ничего устанавливать, не нужно ничего настраивать. Первые шаги в разработке можно сделать запустив браузер, с чего и стоит начать условный урок.
Мы привыкли к тому, что открывая браузер мы вводим адрес сайта. Это даёт нам возможность получить
документ, который создан другими людьми. Но давайте попробуем создать свой документ и для этого
введём в адресной строке data:text/plain,Hello. В результате мы увидим страницу с текстом Hello.
Префиксом data: мы указали, что будем работать с указанными данными, text/plain говорит о типе
наших данных как простом тексте, а после запятой идёт сам текст.
Можно попробовать и другой вариант data:text/html,<html contenteditable>. В этом случаем мы
сделали себе небольшой редактор, в котором можно писать текст. Может иметь смысл набросать некоторый
текст, потом нажать F12, найти какой-то элемент и назначить ему стили (скажем font-size, font-weight,
font-family, color). Нажав Ctrl+S мы сможем его сохранить. Таким нехитрым образом мы получили
полнотекстовый редактор с очень богатыми возможностями, о которых будет известно далее.
Подводя итог под демонстрацией этих двух типов можно подчеркнуть обилие всевозможных типов документов в Интернете и HTML всё не ограничивается.
Дальше есть как минимум два варианта развития событий, котоые имеет смысл рассмотреть и оценить: SVG-трек и HTML-трек.
Если начать изучение с SVG то можно продемонстрировать как выразительность с точки зрения языков разметки (XML, пространства имён и т.п.), так и визуальную выразительность, поскольку SVG является языком векторной графики.
Отправной точкой может стать адрес data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"/>.
Здесь кроется определённый вызов, поскольку в SVG есть пространства имён, которые необходимо указывать.
Но с другой стороны это создаёт определённые преимущества, поскольку даёт фундаментальное понимание.
Можно отложить объяснение до материалов ниже, где будут рассмотрены конкретные графические элементы.
Теперь можно перейти в консоль (F12) и начать процесс знакомства с DOM через написание кода. Пока это будет короткий черновой вариант. Потом стоит подумать над чем-то визуально более впечатляющим. Может заложить основы простой игры.
Варианты:
// Здесь можно рассказать про документ и его корневой элемент, а также показать в консоли, что
// возвращает document, document.constructor, document.documentElement и
// document.documentElement.constructor. А также как это соотносится с svg+xml в адресе.
let root = document.documentElement;
// Объясняти создание и добавление элемента в DOM. Показать на закладке Elements получившуюся стуктуру.
let c1 = document.createElement("circle");
c1.setAttribute("r", 50);
root.appendChild(c1);
// Объяснить, как влияют пространства имён, почему браузер не расползнал circle.
let c2 = document.createElementNS(root.namespaceURI, "circle");
c2.setAttribute("r", 50);
root.appendChild(c2);
// Просто немного декорируем элемент
c2.setAttribute("cx", 100);
c2.setAttribute("cy", 100);
c2.style.fill = "red";
// Добавляем к элементу анимацию, показываем как изменилось дерево DOM.
let a = document.createElementNS(root.namespaceURI, "animate");
a.setAttribute("attributeName", "r");
a.setAttribute("repeatCount", "indefinite");
a.setAttribute("dur", "3s");
a.setAttribute("values", "50;0;50");
c2.appendChild(a);
a.beginElement();
// Что подчеркнуть дерево, можно создать ещё одну анимацию. Возможно, через клонирование.
// Или потом вывести на использование функций для избавления от дублирования кода.
let a2 = document.createElementNS(root.namespaceURI, "animate");
a2.setAttribute("attributeName", "cx");
a2.setAttribute("repeatCount", "indefinite");
a2.setAttribute("dur", "3s");
a2.setAttribute("values", "100;200;100");
c2.appendChild(a2);
a2.beginElement();
// Переход к интерактиву
c2.onclick = () => console.warn("click");
// Переход к композитным элементам для повторного использования.Дальнейшее сравнение SVG и Canvas может помочь продемонстрировать разницу между императивным и декларативным подходами. А шейдеры показать параметрические подходы.
Для того, чтобы научиться работать в клиент-серверной архитектуре, совершенно не обязательно погружаться в NodeJS или вообще в серверную разработку. Вполне достаточно использовать service workers. Перехват событий fetch в последних позволит эмулировать серверные ответы. Что хорошо и для объяснений концепций тестирования.
Использование, скажем, BroadcastChannel API - делать первые шаги с правильной распределённой архитектурой, которая как придаст более удачный дизайн фронтенд-приложениям, так и позволит перенести эти знания на другие уровни разработки.
Продемонстрировать, как простой сайт может быть размещён на Cloudflare/Netlify/Vercel и т.п.