Как вы делаете (то, что делаете)?

Какой замечательный вопрос. Поскольку вы так хотите узнать, сегодня я открою вам секрет.

Демо-приложения

Ранее в своем путешествии по Google Summer of Code я создал несколько демонстрационных приложений для части 1 учебного пособия OOUI, которое обучает основам работы с внутренним инструментом, разработанным и используемым Викимедиа для своих различных проектов. Демо-приложения интерактивны. Они сопровождают пользователя при создании обучающего приложения, демонстрируя различные этапы его разработки.

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

В общем, переработка и редактирование части 2 руководства OOUI ToDo App не заняло много времени, вероятно, потому, что я проделал всю основную работу заранее, когда работал над частью 1 - такие вещи, как настройка подсветки синтаксиса для фрагментов кода, создание Макет CSS для базовой учебной страницы и для демонстрационных приложений ToDo, а также выбор способа встраивания моих демонстрационных приложений. Так что да, я ожидал, что интерактивные демонстрационные приложения сами по себе будут сложной задачей, но даже это прошло довольно гладко.

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

Конечно, все не так уж и странно. Истинная странность кроется за кулисами, или под капотом, или где бы вы ни прятали вещи. Потому что код, который пользователь учебного пособия должен написать, на самом деле не совсем то же самое, что и код живой демонстрации - он очень похож, но разделен на несколько частей.

В руководстве пользователя просят создать файл init.js и один класс - файл ToDoItemWidget.js. В конце их просят добавить еще один класс, ToDoListWidget.js. Само руководство включает 4–5 интерактивных демонстрационных приложений, демонстрирующих различные этапы функциональности и внешнего вида приложения. Пользователь / учащийся получает указание обновлять эти файлы по мере написания кода. Однако за кулисами демонстрации построены по-другому. Файлы для каждого демонстрационного приложения состоят из кода, добавленного только на этом этапе.

В демонстрации №1 показано небольшое изменение, связанное с выделением места для отображения информации о элементах ToDo. После этого в проект добавляется ToDoItemWidget.js. Вы можете увидеть его первую версию во фрагменте кода ниже. Этот новый класс или виджет в настоящее время пуст. Он наследуется от (или основан на) встроенного класса OOUI OptionWidget. Это самая простая конструкция виджета OOUI:

Далее в руководстве пользователя просят изменить этот класс и расширить его функциональные возможности. Для каждого изменения в классе существует интерактивная демонстрация, иллюстрирующая его внешний вид и поведение. Я хотел бы рассказать вам, как я реализовал эту модификацию, и поговорить о том, чем этот код отличается от кода, который пользователь должен написать.

Так что посмотрим. Демонстрация №2 - это когда мы впервые включаем ToDoItemWidget в демонстрационное приложение. Однако мы пронумеруем его ToDoItemWidget2, чтобы он соответствовал номеру демонстрационного приложения и остальным файлам демонстрации №2. Эта версия включает функцию отображения, когда каждый элемент ToDo был создан. Я пропустил некоторый код - это просто некоторые манипуляции для форматирования даты и времени, которые были необходимы, потому что JavaScript не очень хорош в таких вещах.

На этом этапе код демонстрационного приложения и код учебного пособия остаются такими же, за исключением имени класса, которым является ToDoItemWidget2 в файлах Demo # 2 (за кулисами).

Но в следующий раз, когда пользователя попросят добавить код в его файл ToDoItemWidget.js, закулисный код будет значительно отличаться. Пользователь отредактирует только что просмотренный файл и добавит новые функции.

Однако за кулисами новый код записывается в совершенно новом файле с именем ToDoItemWidget3.js, который наследует предыдущую версию ToDoItemWidget2.js.

Наследование объявлено и реализовано в строке 14 фрагмента кода ниже. Как вы можете видеть в новом классе ниже, в нем меньше кода по сравнению с предыдущим, но он может делать больше, поскольку включает функцию форматирования длительного (цензурированного) времени без необходимости повторять ее.

Так будет и в следующих версиях. Демо № 3 добавляет кнопку «Удалить», а Демо № 4 стилизует ее, помещая вправо. И так же, как на этапах №2 и №3, при нажатии на элемент время его создания отображается на информационной панели внизу. Демо № 5 реализует фактическое событие удаления. Поскольку демонстрация №4 и №5 выглядят одинаково, я просто покажу вам одну из них:

Что теперь?

Теперь у меня есть рабочий MVP для этого проекта, что довольно круто, учитывая, что я только недавно начал над ним работать. Поскольку проект ожидает рассмотрения членами команды OOUI, я планирую добавить дополнительные функции и улучшения, в том числе:

  • Добавить раскрывающееся меню на верхнюю панель
  • Сделайте нижний колонтитул страницы адаптивным
  • Добавить поддержку динамической загрузки руководств

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

И я знаю, что следующий пост будет последним, но я надеюсь продолжать вести блог, просто как бы вести блог до заката. Я думал, например, о написании туториалов для моих собственных побочных проектов.

Но это в другой раз.