ВВЕДЕНИЕ 3
1 СУЩЕСТВУЮЩИЕ РЕШЕНИЯ 5
1.1 Storybook 5
1.2 NativeBase Market 6
1.3 React.parts 7
1.4 React-live 8
2 КОНЦЕПЦИЯ СЕРВИСА 9
2.1 Обоснование необходимости создания сервиса 9
2.2 Принцип работы 11
3 РЕАЛИЗАЦИЯ СЕРВИСА 12
3.1 Модули системы 12
3.2 Описание демо-вариантов 13
3.3 Интерактивный редактор кода 17
3.4 Публикация в сервис 19
4 ФУНКЦИОНАЛЬНЫЕ ВОЗМОЖНОСТИ 22
4.1 Просмотр каталога пакетов 22
4.2 Выбор и переключение между технологиями 23
4.3 Поиск по пакетам 24
4.4 Просмотр информации о пакете 25
4.5 Технологии и инструменты реализации сервиса 26
ЗАКЛЮЧЕНИЕ 28
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 29
ПРИЛОЖЕНИЯ 31
Условия современного бизнеса, связанного с IT-сферой, требуют от разработчиков гибкости в поиске решений возникающих задач и проблем. При создании собственных решений велик риск не успеть реализовать необходимый функционал в срок, породить большое количество ошибок на стадии внедрения, а также усложнить поддержку написанного кода. Тогда на помощь приходят готовые реализации в виде библиотек, пакетов и фреймворков зачастую написанных опытной командой. Прибегая к таким средствам, разработчик может концентрироваться в полной мере на необходимом функционале, не думая о большей части вспомогательной логики, которую уже описала используемая библиотека [1]. Особенно популярные пакеты содержат код, протестированный огромным количеством пользователей и решающий проблемы, которые возможно не предвидел бы разработчик, реализуя решение самостоятельно.
Однако зачастую поиск готовых реализаций требует больших затрат по времени, особенно это актуально для разработки пользовательского интерфейса, когда готовые компоненты на GitHub могут содержать лишь
документацию со скриншотами, без предоставления возможности попробовать
компонент в “кодовой песочнице” и разработчику приходится устанавливать библиотеку в свой проект для проверки его функциональности. Еще одним фактором, усложняющий поиск UI пакетов, является некатегаризируемость поисковой выдачи, что иногда бывает проблемой, когда не получается придумать соответствующий поисковый запрос, который бы содержал ключевые слова, описывающие необходимую функциональность компонента.
Решением описанных выше проблем может быть единый каталог элементов пользовательского интерфейса, в котором пакеты будут разложены
по секциям, представляющим собой актуальные и популярные JavaScript фреймворки, такие как React , Angular , Vue.js , Jquery и др., а также по категориям функциональности, например, кнопки, календари и др. Также должен присутствовать инструмент демонстрации, с возможностью изменения и выполнения кода на лету, что позволит попробовать возможности пакета без предварительной установки его в проект. Публикация в каталог должна происходить из исходного кода, с выполнением команды терминала, которая отправит описанный разработчиком демонстрационный вариант использования в сервис.
Целью данной дипломной работы является создание сервиса, который предоставит фронтенд разработчикам возможность публикации пакетов и демонстрационных вариантов их использования на различных JavaScript фреймворках с поддержкой версионирования. Платформа будет связывать веб-разработчиков, которым необходима публикация своих работ в открытом каталоге с возможностью демонстрации в режиме онлайн с одной стороны, и, разработчиков, которым необходимо быстро найти решение с возможностью поэкспериментировать в песочнице с другой.
Для достижения поставленной цели были решены следующие задачи:
• Сбор и анализ информации о существующих решениях в данной области
• Разработка модуля исполняющего JavaScript код в изолированном браузером окружении
• Разработка веб-сервиса, содержащего список компонентов и отображающего их демо варианты
В результате проделанной работы был разработан сервис для публикации и просмотра демонстрационных вариантов UI-компонентов в интерактивном режиме, с возможностью изменять исходный код демо для тестирования всех возможностей пакета без необходимости предварительной установки на локальную машину.
В процессе работы были выполнены следующие задачи:
1. Проанализированы данные о существующих решениях и сформулированы критерии, по которым поиск компонентов пользовательского интерфейса будет удобным.
2. Был разработан интерактивный редактор JavaScript-кода, независимый от используемых технологий и библиотек, принимающий на вход код современного JavaScript синтаксиса, с отображением результатов выполнения при его изменении.
3. Был реализован функционал сервиса для публикации описаний демо-вариантов JavaScript-пакетов с возможностью их поиска, категоризации и выбора технологий.
Разработанный сервис призван связать создателей UI-библиотек с их непосредственными пользователями - другими разработчиками, которым необходимо быстрое решение поставленных перед ними задач.
Исходный код данной работы представлен в репозиториях:
• http://gititis.kpfu.ru/AzRAhmetshin/upmjs - Основной код для работы с модулями Core, UI, CLI, там же представлена данная работа.
• http://gititis.kpfu.ru/AzRAhmetshin/upmjs-backend
