WebStorm-плагин для интерактивной разработки мобильных приложений на базе React Native

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

ПРАВИТЕЛЬСТВО РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ «ВЫСШАЯ ШКОЛА ЭКОНОМИКИ»

Факультет компьютерных наук

Департамент программной инженерии

Выпускная квалификационная работа

на тему «WebStorm-плагин для интерактивной разработки мобильных приложений на базе React Native»

по направлению подготовки 09.03.04 «Программная инженерия»

Выполнил студент группы БПИ142 4 курса бакалавриата образовательной программы «Программная инженерия» Самохвалов Денис Игоревич

Реферат

Современные интегрированные среды разработки программных продуктов (IDE) позволяют разработчикам сократить время и усилия, затраченные на разработку, снимая с разработчика часть рутинных задач. Современные IDE предоставляют широкий спектр различных инструментов, включая синтаксический и статический анализы кода, подсветку синтаксиса, автодополенение кода и многое другое.

WebStorm - интегрированная среда разработки, предназначенная преимущественно для разработки веб-приложений, поддерживающая большинство современных web-фреймворков, таких как React.js, Angular, AngularJS, Vue.js и т.д. Одним из фреймворков, поддерживаемых данной средой разработки является React Native - фреймворк для кроссплатформенной мобильной разработки, созданный на основе веб-фреймворка React.js.

В документе описывается созданный WebStorm-плагин для интерактивной разработки мобильных приложений на базе React Native, позволяющий облегчить и ускорить разработку React Native приложений. Помимо описания функционала плагина, в работе представлено описание технических деталей и обзор существующих решений.

Ключевые слова: WebStorm, плагин, React Native, Java, IntelliJ Platform SDK.

Abstract

Modern integrated software development environments (IDE) allow developers to reduce the time and effort spent on development, removing a part of the routine tasks from the developer. Modern IDEs provide a wide range of different tools, including syntactic and static code analysis, syntax highlighting, code autoсompletion and much more.

WebStorm is an IDE designed primarily for web application development, supporting most modern web frameworks such as React.js, Angular, AngularJS, Vue.js, etc. One of the frameworks supported by this IDE is React Native, a framework for cross-platform mobile development created on the basis of the React.js web framework.

The document describes the WebStorm plugin for interactive development of React Native mobile applications, which allows to facilitate and accelerate the development of React Native applications. In addition to describing the functionality of the plugin, the work presents a description of the technical details and an overview of existing solutions.

Keywords WebStorm, plugin, React Native, Java, IntelliJ Platform SDK.

Основные определения, понятия и термины

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

2. Интегрированная среда разработки (IDE) - комплекс программных средств, используемых для разработки программного обеспечения. Большинство современных сред включают в себя текстовый редактор, компилятор/интерпретатор, средства отладки, сборки и развертывания программных продуктов.

3. Автоформатирование кода - изменение знаков препинания, отступов, капитализации символов текста в зависимости от его лексического значения. Автоформатирование используется для приведения кода к единому виду и повышения его читабельности

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

5. Абстрактное синтаксическое дерево - конечное помеченное ориентированное дерево, в котором внутренние вершины сопоставлены с операторами языка программирования, а листья -- с соответствующими операндами.

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

7. Встроенный компонент - компонент, входящий в состав фреймворка React Native.

8. Пользовательский компонент - компонент, разработанный разработчиком React Native приложений.

9. Фреймворк - платформа, на основе которой реализовано приложение.

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

11. Импорт зависимости - участок программного кода, указывающий путь к используемому в файле компоненту.

12. Событие - сообщение, которое возникает в определенных участках исполняемого кода при определенных условиях

13. Уровень вложенности - расстояние от корневой папки компонента до корня приложения или корневой папки другого компонента.

14. Фреймворк - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

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

16. Тэг - идентификатор элемента разметки.

17. JSON - текстовый формат передачи данных.

18. Репозиторий - хранилище каких-либо данных, как правило, ПО, программного кода и т.д.

Содержание

• Реферат
• Abstract
• Основные определения, понятия и термины
• Содержание
• Введение
• Глава 1. Обзор существующих сред разработки React Native приложений и аналогов разрабатываемого плагина
• 1.1 Обзор сред разработки
• 1.2 Обзор cуществующих WebStorm плагинов для разработки на React Native
• 1.3 Обзор аналогов разработанного плагина
• Выводы по главе
• Глава 2. Описание используемых технологий
• 2.1 Java 8
• 2.1.1 Описание технологии Java 8
• 2.1.2 Обоснование выбора технологии
• 2.2 Swing
• 2.2.1 Описание технологии
• 2.2.2 Сравнение с JavaFX и обоснование выбора данной технологии
• 2.2.3 Описание используемых компонент
• 2.3 IntelliJ Platform SDK
• 2.3.1 Компоненты
• 2.3.2 Actions
• 2.3.3 Сервисы
• 2.3.4 Editors
• 2.3.5 PSI
• Выводы по главе
• Глава 3. Техническая реализация и архитектура плагина
• 3.1 Скрипт получения данных о встроенных компонентах
• 3.1.1 Описание технических деталей скрипта
• 3.1.2 Алгоритм работы
• 3.2 Архитектура плагина
• 3.3 Пользовательский интерфейс
• 3.3.1 Список компонентов
• 3.3.2 Инспектор свойств
• 3.4 Взаимодействия с текстовым редактором
• 3.4.1 Вставка шаблона компонента
• 3.4.2 Форматирование текста
• 3.4.3 Импорт зависимостей
• 3.5 Анализ синтаксического дерева
• 3.6 Поиск собственных компонентов проекта
• Выводы по главе
• Заключение
• Список источников

Введение

В работе рассматривается процесс разработки WebStorm-плагина для интерактивной разработки мобильных приложений на базе фремворка React Native [1].

WebStorm [2] - это одна из наиболее популярных сред разработки на javascript, поддерживающая, в том числе, разработку мобильных приложений на React Native. Помимо стандартных возможностей, предоставляемых большинством IDE, таких как синтаксический анализ, подсветка кода, автодополнение и отладка, WebStorm включает в себя множество других дополнительных возможностей, таких как визуальный инструмент для работы с системами контроля версий git, svn и mercurial, обширный инструментарий рефакторинга кода, интеграция с инструментами контроля качества кода, таких как JSLint [3][4]. Помимо стандартного инструментария, WebStorm предоставляет часть функционала, ориентированного исключительно на разработку React Native приложений, таких как, встроенная поддержка утилиты создания React Native проектов react-native-cli, конфигурация файлов отладки и тестирования скомпилированных IOS и Android приложений [4].

WebStorm, как и большинство других продуктов JetBrains, предоставляет возможность разработки плагинов - программных расширений, призванных дополнить функциональность среды. Некоторые плагины, такие как Yeoman [5], YAML [6], предоставляются разработчику, использующему WebStorm по умолчанию, однако могут быть отключены в настройках WebStorm. Большинство других плагинов необходимо устанавливать вручную, при помощи Jetbrains Plugin Repository [7]. Процесс установки, при корректной работе плагина, не занимает много времени, однако поиск нужного плагина в репозитории может сопровождаться определенными трудностями, если плагин не содержит в описании всей необходимой информации. Разработка плагинов осуществляется на базе Intellij Platform SDK [8] - набор средств для разработки плагинов, позволяющий получить доступ к большей части функциональности IDE WebStorm на программном уровне.

Несмотря на то, что WebStorm поддерживает множество возможностей, упрощающих разработку на React Native, на данный момент эта среда разработки не поддерживает автоматический импорт зависимостей и автоматический поиск компонентов по их названию. Возможность автоматически импортировать необходимые зависимости особенно актуальна для больших проектов, когда компоненты могут находиться на расстоянии 10 и более уровнях вложенности друг от друга. Возможность автоматического поиска компонентов по названию так же является существенной необходимостью для крупных проектов, и ее отсутствие вынуждает разработчиков искать компоненты стандартным поиском по названию, исключая и фильтруя вручную участки, где компонент используется, а не непосредственно объявлен.

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

· Изучить основные возможности Intellij Platform SDK

· Изучить стандартные подходы к проектирования и построению WebStorm плагинов

· Изучить подходы к разработке пользовательских интерфейсов при помощи Java Swing

· Изучить возможности Intellij Platform SDK по обработке и изменению синтаксического дерева.

· Разработать интерфейс для доступа ко встроенным и пользовательским компонентам

· Разработать функционал редактирования и форматирования кода в WebStorm: автоматический импорт зависимостей и вставка шаблонов компонентов в указанное в коде место.

· Разработать компонент - редактор свойств React Native компонентов, позволяющий проводить редактирование свойств компонентов из пользовательского интерфейса

Работа разбита на три основные части: в первой главе приведен краткий анализ существующих сред разработки, поддерживающих разработку на React Native, описаны существующие React Native плагины для WebStorm, а так же представлены их аналоги; во второй части рассмотрены использованные технологии; третья глава содержит описание технической реализации системы.

Работа дополнена приложениями: техническим заданием, руководством оператора, программой и методикой испытаний, текстом программы.

Глава 1. Обзор существующих сред разработки React Native приложений и аналогов разрабатываемого плагина

1.1 Обзор сред разработки

В данном разделе будут рассмотрены существующие решения, поддерживающие разработку при помощи фреймворка React Native с целью обосновать разработку данного плагина именно для IDE WebStorm.

Nuclide [9] - среда разработки, созданная на основе IDE Atom, предназначенная исключительно для разработки на React Native. Отличительными особенностями данной среды является поддержка встроенной отладки React Native приложений, Chrome Developer Tools. Помимо этого Nuclide поддерживает удаленную разработку, т.е. разработку проектов, находящихся на удаленных серверах, а так же позволяет настраивать запуск отложенных заданий и кастомизацию рабочего пространства. Из существенных недостатков Nuclide можно выделить отсутствие интеллектуального автодополнения кода и проваливания в зависимости, отсутствие встроенной поддержки создания React Native проектов, и систем контроля верси git и svn [4].

Visual Studio Code [10] - один из наиболее серьезных конкурентов WebStorm, разрабатываемый компанией Microsoft и предоставляемый бесплатно. В отличие от WebStorm, стандартная сборка Visual Studio Code включает в себя ограниченный набор функционала, что делает ее более легковесной и быстрой, однако возможность подключать плагины позволяет дополнять существующую функциональность vscode. Кроме того, Visual Studio Code распространяется бесплатно, а исходный код среды находится в открытом доступе. Одним из недостатков Visual Studio Code является отсутствие возможности дополнять плагины визуальным интерфейсом, что делает невозможным создание плагина с вышеизложенным функционалом [4].

Sublime Text [11] - одним из ключевых преимуществ данного редактора является его высокая степень настраиваемости, что дает разработчику возможность сконфигурировать редактор практически под свои нужды, однако данное преимущество в какой-то степени является и недостатком данной среды, поскольку требует временных затрат на настройку нужных опций и установку и поиск нужны плагинов. Sublime Text не имеет встроенной поддержки React Native, однако есть возможность сконфигурировать данную среду для React Native разработки при помощи дополнительных настроек и плагинов. В отличие от VScode и WebStorm имеет менее развитую систему автодополнения кода [4].

Deco IDE [12] - среда разработки предназначенная исключительно для разработки React Native приложений. Данная среда позволяет создавать React Native приложения автоматически при помощи встроенной утилиты react-native-cli, запускать приложения на ios-эмуляторах, посредством выбора нужного эмулятора. Кроме того, в данной среде есть возможность интерактивным образом выбирать и вставлять компоненты в коде, редактировать свойства и стили при помощи инспектора свойств, представляющего собой графический интерфейс с различными компонентами для интерактивного взаимодействия с выделенными свойствами. Несмотря на очевидные преимущества данной среды для разработки React Native приложений, в ней отсутствуют такие функции как, интеллектуальное автодополнение и форматирование кода, поддержка систем контроля версий, поддержка плагинов и т.д.

WebStorm - продукт, разрабатываемый компанией JetBrains, поддерживает большинство современных javascript фреймворков, таких как React.js, Angular, AngularJs и javascript-подобных языков, таких как typescript, EcmaScript, dart. Имеет встроенную поддержку анализа и инспекции кода, поддержку автодополнения и автоформатирования, поддержку систем контроля версий и API для разработки плагинов. Помимо этого, данная среда имеет встроенную поддержку трассировки и профайлинга кода, системы контроля качества кода и многое другое.

1.2 Обзор cуществующих WebStorm плагинов для разработки на React Native

В данном разделе будут рассмотрены существующие WebStorm плагины для разработки приложений на React Native с целью обоснования уникальности и востребованности разработки данного плагина.

React Native Console (рис 1.) [13] - плагин, позволяющий вызывать большинство консольных команд, используемых при разработке React Native приложений при помощи графического интерфейса. Плагин поддерживает команды необходимые для компиляция, запуска, отладки и тестирования приложений, а так же для установки, сборки и конфигурации пакетов. Плагин имеет более 43 тысяч установок, согласно статистике JetBrains plugin Repository.

Рисунок 1. React Native Console

React Native Tools [14] (рис.2) - еще один плагин для исполнения консольных команд при помощи графического интерфейса. В отличие от React Native Console имеет более ограниченный набор команд, но позволяет добавлять необходимые команды через интерфейс вручную. Плагин имеет более 18900 установок через JetBrains Plugins Repository.

Storybook [15] (рис. 3) - плагин позволяющей определять множество состояний, иначе говоря, задавать несколько наборов входных данных для компонента и переключать эти состояния при помощи графического интерфейса. Это позволяет разработчику в интерактивном режиме тестировать визуальную часть компонента на множестве наборов входных данных. Плагин имеет более 1900 установок.

Рисунок 2. React Native Tools

Рисунок 3. Storybook

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

1.3 Обзор аналогов разработанного плагина

Как было описано в разделе 1.1 Deco IDE предоставляет возможность вставлять компоненты в указанные участки в коде, редактировать свойства при помощи визуального инспектора. В отличие от Deco разрабатываемый плагин будет иметь возможность вставлять в указанные участки в коде не только шаблоны встроенных, но и пользовательских компонентов, а так же обладать расширенным списком встроенных компонентов и позволять редактировать значительно большее количество свойств через пользовательский интерфейс.

Выводы по главе

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

плагин пользовательский интерфейс синтаксический

Глава 2. Описание используемых технологий

2.1 Java 8

2.1.1 Описание технологии Java 8

Java 8 [20] - один из новейших релизов, впервые выпущенный в 2014 году и регулярно обновляемый по настоящее время. Данный релиз состоит из ряда существенных изменений:

1. Методы лямбда-выражений и виртуального расширения

2. API-интерфейс даты и времени

3. Механизм Nashhorn JavaScript Engine

4. Новая облегченная высокопроизводительная реализация механизма JavaScript Engine интегрирована в JDK и доступна для приложений Java через существующие API-интерфейсы.

5. Улучшенная безопасность

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

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

2.1.2 Обоснование выбора технологии

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

2.2 Swing

2.2.1 Описание технологии

Java Swing [21] - это библиотека для создания графического интерфейса для программ на языке Java. Данная библиотека содержит ряд настраиваемых графических компонентов, таких как кнопки, текстовые поля, контейнеры и т.д. Архитектура Swing позволяет изменять поведение и внешний вид компонентов, настраивая их под нужды конкретного приложения или операционной системы, на которой оно будет работать. Swing использует так называемые LightWeight компоненты, которые, в отличие, от нативных HeavyWeight компонентов могут отрисовываться поверх родительского контейнера и не требуют создания отдельного окна для своей отрисовки.

2.2.2 Сравнение с JavaFX и обоснование выбора данной технологии

JavaFX - это платформа для создания визуального интерфейса, выпущенная в 2007 году компнией Sun Microsystems. По сравнению с библиотекой Swing JavaFX имеет ряд существенных преимуществ:

1. Язык FXML и Конструктор сцен. FXML - это XML подобный декларативный язык описания графических интерфейсов. Разработчик графических интерфейсов на JavaFX может использовать его для описания графической разметки либо спроектировать интерфейс при помощи конструктора сцен, который затем будет транслирован в FXML.

2. WebView - компонент, позволяющий отображать вебстраницы внутри JavaFX приложения. Благодаря реализованному интерфейсу взаимодействия между JavaScript и Java, компонент WebView может взаимодействовать с логикой JavaFX приложения.

3. Поддержка CSS для разработки стилей компонентов.

4. Сanvas Api - технология, позволяющия рисовать прямо поверх JavaFX сцены.

5. Поддержка технологии Multitouch

6. Поддержка высокопроизводительных медиа элементов

Несмотря на очевидные преимущества JavaFX по сравнению с его более старым аналагом Swing, для разработки данного плагина была выбрана библиотека Swing, поскольку экосистема IntelliJ основана на этой библиотеке и использует ее компоненты для реализации графических элементов.

2.2.3 Описание используемых компонент

JPanel - контейнер для отрисовки и расположения других Java Swing компонентов. Расположение элементов на JPanel определяется при помощи так называемых менеджеров расположения, которые отвечают за алгоритм распределения и отрисовки дочерних компонентов контейнера JPanel. Существует несколько типов Менеджеров расположения:

1. BorderLayout - менеджер, располагающий элементы по краям контейнера, все дополнительные компоненты, если их больше 4, располагаются по центру контейнера.

2. BoxLayout - менеджер, располагающий дочерние компоненты в один столбец.

3. СardLayout - специальный менеджер для компонента Combobox, позволяющий расположить различные элементы под самим Combobox.

4. FlowLayout - менеджер, располагающий все дочерние компоненты в одну строку.

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

6. GridLayot - менеджер, делающий дочерние компоненты одинаковыми в размерах и располагающий их в ячейках таблицы

В данной работе использованы два типа менеджеров - FlowLayout и GridBagLayot.

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

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

JCombobox - компонент для выбора опции из списка имеющихся опций. Компонент используется в менеджере свойств React Native компонентов для обработки свойств типа перечислений.

JButton - кнопка, использующаяся для вызова какой-либо функциональности. Используется как ссылка для перехода на соответствующую страницу с описанием выбранного React Native компонента.

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

2.3 IntelliJ Platform SDK

2.3.1 Компоненты

Компоненты IntelliJ - это часть интеграции плагина в экосистеме IntellIj. Существует три типа компонент:

1. Компоненты уровня приложения - создаются на старте среды IntellIJ. Компоненты уровня приложения опционально могут реализовывать интерфейс ApplicationComponent и должны быть зарегистрированы в секции <application-components> конфигурационного файла плагина plugin.xml

2. Компоненты уровня проекта - создаются для каждого проекта во время его открытия. Компоненты уровня проекта опционально могут реализовывать интерфейс ProjectComponent и должны быть зарегистрированы в секции <project-components> конфигурационного файла плагина plugin.xml

3. Модульные компоненты - создаются для каждого модуля проекта. Компоненты уровня модуль опционально могут реализовывать интерфейс ModuleComponent и должны быть зарегистрированы в секции <module-components> конфигурационного файла плагина plugin.xml

Основным назначением компонентов, как правило является, сохранение состояния какой-либо части приложения, проекта или модуля для последующего переиспользования данного состояния после перезапуска среды разработки. Для того чтобы реализовать сохранения состояния, компоненты должны реализовывать интерфейс PersistentStateComponent. Состояние компонента сохраняется в XML файл, который можно указать при помощи аннотация @State и @Storage. Помимо этого компоненты могут иметь по умолчанию некоторое состояния, которое должно быть записано в соответствующем xml файле, и может быть прочитано при помощи метода loadState().

Компоненты имеют следующий жизненный цикл:

1. Создание - вызов конструктора по умолчанию.

2. Инициализация - вызов метода initComponent, если компонент реализует интерфейс ApplicationComponent

3. Загрузка состояния - вызов метода loadState, если компонент реализует интерфейс PersistentStateComponent

4. Создание модуля - moduleAdded - вызывается при создании модуля.

5. Открытие проекта - projectOpened - вызывается при открытии проекта.

6. Сохранение состояния - вызов метода getState

7. Уничтожение компонента - вызов метода disposeComponent

2.3.2 Actions

Система действий (Actions) позволяет добавлять в интерфейс среды разработки IntelliJ собственные элементы интерфейса, такие как кнопки, меню и панели инструментов, а так же объявлять свои собственные события, возникающие в процессе работы плагина. Взаимодействие пользователя с элементами интерефейса и обработка событий осуществляется при помощи системы действий. Например, в самой IntelliJ, Actions используются для открытия/закрытия файлов, запуск компиляции программы и др.

Действие в терминах IntelliJ Platform SDK - это класс, наследуемый от класса AnAction, при возникновении какого-либо события - нажатие на кнопку, меню и т.д., вызывается метод actionPerformed, в котором данное действие может быть обработано. Все действия могут быть организованы в группы таким образом, чтобы организовать обработку какого-нибудь составного компонента, например, панели инструментов. В свою очередь, группы действий могут быть организованны в подгруппы (составные группы), например, чтобы организовать обработку какого-нибудь составного компонента меню.

Каждое действие или группа действие обладает уникальным идентификатором, встроенные идентификаторы действий объявлены в интерфейсе IdeActions. Ниже представленны некоторые встроенные в IntelliJ действия:

1. ACTION_EDITOR_CUT - вырезание участка кода из редактора.

2. ACTION_EDITOR_COPY - копирование участка кода из редактора

3. ACTION_FIND_IN_PATH - поиск фрагмента текста в коде программы

4. ACTION_CLOSE_EDITOR - закрытие редактора

5. ACTION_COLLAPSE_ALL - сворачивание текста

Действия могут быть включены в различные группы и соответственно одно действие может быть использовано в различных частях IntelliJ. Места, в которых может использоваться действие объявлены в классе ActionPlaces. Эти константы, как правило, описывают участки интерфейса, к которым привязаны действия. Для каждого места в редакторе, где используется то или иное действие создается отдельный объект, наследуемый от интерфейса Presentation, это повзоляет создавать различные представление (текст, иконки и др.) для одного и того же действия.

Для использования действий необходимо объявить их в конфигурационном файле plugin.xml под тегом <actions>. Действия объявляются согласно стандартной XML нотации. Ниже представлен пример объявления действия.

<action

id="RNInteractivPlugin.Insert"

class="ru.hse.plugin.Inserter"

text="INSERT_SNIPPET"

description="Inserts snippet into the code"

icon="icons/inserter.png">

<add-to-group group-id="RNInteractivityPlugin.ComponentManagement" relative-to-action="ManageComponents" anchor="after"/>

<keyboard-shortcut first-keystroke="control R" second-keystroke="L" keymap="$default"/>

</action>

В данном примере объявлено действие вставки компонента в код. Стоит учесть, что данный пример явялется демонстрационным и конкретно данное действие не используется в самом плагине. Как видно из описания, у действия есть атрибут id - уникальный идентификатор, как правило, для всех идентификаторов используется префикс - название компонента, чтобы избежать коллизий с другими плагинами, установленными для конкретного пользователя. Обязательный аттрибут class - класс компонента, отвечающий за обработку данного действия. Как упоминалось раньше данный класс должен наследоваться от класса AnAction, если класс не унаследован от класса AnAction, то возникнет ошибка компиляции на этапе сборки плагина. Обязательный аттрибут text - текст, который будет использован для отображения элемента в IDE. Опциональный атрибут description - используется для описания действия, для повышения читаемости конфигурационного файла plugins.xml. Опциональный атрибут iсon - путь к иконке, которая будет отображаться для данного действия, путь задается относительно директории resources, находящейся в корневом каталоге плагина и используемой для хранения ресурсов - иконок, различных статических файлов с данными и т.п. Помимо этого для определения данного действия определены дочерние элементы add-to-group и keyboard-shortcut. Элемент add-to-group содержит аттрибут group-id - id группы, к которой будет добавлен компонент, аттрибуты relative-to-action и anchor - содержат информацию о том, в каком порядке будет добавлено действие в группу. Тэг keyboard-shortcut - содержит информацию о том, какой комбинацией клавишей может быть вызвано действие.

2.3.3 Сервисы

Сервисы - это компоненты, загружаемые плагином по требованию, иначе говоря динамически. IntelliJ Plugin SDK осуществляет контроль за тем, чтобы только один сервис мог быть загружен, даже если вызов метода загрузки сервиса вызван несколько раз. В отличие от компонентов сервисы декларируют свой интерфейс в конфигурационном файле plugins.xml. Так же как и для компонентов, IntelliJ повзоляет определять сервисы трех типов - сервисы уровня приложения, сервисы уровня проекта и сервисы уровня модуля.

2.3.4 Editors

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

Для редакторов определено несколько типов позиции каретки:

1. Логическая позиция - позволяет получить колонку и столбец каретки. Визуальная позиция игнорирует свернутые строки. Т.е. если какой-либо участок в кода, функция или класс свернуты редактором, они будут проигнорированы.

2. Визуальная позиция - так же как и логическая позиция позволяет получить колонку и столбец, но в отличии от логической, учитывает свернутые участки кода.

3. Позиция отступа - предоставляет доступ к отступу в текстовом представлении файла.

Так же для редакторов определены несколько типов сервисов для взаимодействия с их текстовым представлением - кодом программы:

1. CaretModel - сервис для предоставления информации о каретках и различными манипуляцими с ними - перемещением, удалением, добавлением новых кареток и т.д.

2. FoldingModel - сервис, предоставляющий контроль над свернутыми участками кода

3. IndentsModel - cервис для получения дескриптора отступа конкретной строки

4. ScrollingModel - сервис, предоставляющий доступ к видимой части редактора и полосе прокрутки данной видимой части.

Для того чтобы получить возможность редактировать текст, нужно получить доступ к объекту класса Document.

Document document = editorManager.getEditor().getDocument();

После чего, текст документ может быть изменен при помощи метода runWriteCommandAction.

WriteCommandAction.runWriteCommandAction(editorManager.getProject(), () -> {

document.replaceString(start, end, value());

});

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

2.3.5 PSI

PSI (Program Structure Interface) - интерфейс взаимодействия со структурой программы - это программный слой отвечающий за парсинг и представление файлов в виде синтаксического дерева. PSI предоставляет интерфейс для доступа, обхода и модификации синтаксического дерева. Обход синтаксического дерева осуществляется посредством вызова метода accept объекта класса PsiFile, который инкапсулирует доступ к синтаксическому дереву отдельно взятого файла. Обход осуществляется рекурсивно.

propertyPsi.accept(new PsiRecursiveElementWalkingVisitor() { @Override public void visitElement(PsiElement element) { if (element.toString().equals("PsiElement(XML_ATTRIBUTE_VALUE)")) { int start = element.getTextOffset(); int end = element.getTextOffset() + element.getText().length() - 1; document.replaceString(start - 1, end, value()); return; } super.visitElement(element); } });

В данном примере находятся атрибуты XML-узла. Начало атрибута находится при помощи метода getTextOffset, конец получается путем добавления к началу длины атрибута. В конце метода вызывается базовый метод класса PsiRecursiveElementWalkingVisitor, который рекурсивно обходит следующий элемент.

Выводы по главе

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

Глава 3. Техническая реализация и архитектура плагина

3.1 Скрипт получения данных о встроенных компонентах

Для получения информации о React Native компонентах используется скрипт на языке python, который получает информацию обо всех react-native компонентах из официальной документации React Native.

3.1.1 Описание технических деталей скрипта

Для работы используются библиотека для формирования http запросов - requests, а так же библиотека для парсинга html разметки - lxml. Сам скрипт реализован на языке python версии 3.0.

Методы библиотеки requests, используемые для формирования запросов:

1. get - метод, выполняющий GET запрос для получения страницы с документацией отдельного компонента

Методы библиотеки lxml, используемые для парсинга документации React Native:

1. findall - метод, получающий все html-теги по заданному классу

2. xpath - метод, позволяющий получить доступ к определенному html-тегу, используя особую xpath-нотацию

3. find - метод, позволяющий найти один единственный html-тег, если в разметке содержится более одного тега - они отбрасываются и берется первый найденный.

3.1.2 Алгоритм работы

Алгоритм получает на вход список компонентов и на выходе выдает информацию о свойствах, с описанием и типом. Список компонентов представляет собой массив с названием компонентов (ActivityIndicator, Button, DatePickerIOS и т.д.). Для каждого компонента скрипт получает html-страницу с описанием, url-адрес для каждого компонента представлен в формате https://facebook.github.io/react-native/docs/имя_компонента.html. Каждая html страница с описанием компонента представлена в едином формате.

Рисунок 4. Фрагмент документации React Native

Затем алгоритм определяет позицию элемента с описанием компонента по имени html-класса и сохраняет его в объект с описанием данного компонента. После этого определяются все элементы, содержащие свойства и описывающие их таблицы. У таблиц могут быть три колонки - колонка с типом свойства, колонка, определяющая является ли свойство обязательным или нет, а так же, опционально, - колонка, определяющая принадлежность свойства к определенной платформе, если ее нет - значит свойство может быть использовано как на Android, так и на IOS. После того как вся информация о свойствах текущего компонента собрана, она сохраняется в массив, принадлежащий объекту компонента, который затем будем сохранен в json файл.

3.2 Архитектура плагина

Плагин состоит из двух основных модулей - модуль пользовательского интерфейса и модуль бизнес-логики. Модуль пользовательского интерфейса состоит из верстки визуальных компонентов плагина и контроллеров, осуществляющих взаимодействие визуальных компонентов с бизнес-логикой плагина. Визуальные компоненты спроектированы при помощи визуального редактора IntelliJ, однако некторые визуальные элементы добавляются динамически из контроллеров интерфейса.

Рисунок 5. Структура проекта

Модуль бизнес логики состоит из нескольких подмодулей:

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

Entities - модуль, содержащий классы-сущности, используемые в плагине (таб. 2).

Таблица 1. Обратные вызовы

Название	Описание
Сomponent Clicked	Интерфейс, декларирующий обратный вызов клика на компонент в редакторе
Project Scanned	Интерфейс, декларирующий обратный вызов сканирования проекта на на наличие собственных React Native компонентов
Property Selected	Интерфейс, декларирующий обратный вызов изменения наличия свойства в компоненте через Property Inspector
Snippet Inserted	Интерфейс, декларирующий обратный вызов вставки шаблона компонента в код приложения

Таблица 2. Классы-сущности

Название	Описание
Component	Класс, предоставляющий информацию о React Native компоненте. Данный класс содержит информацию о свойствах, описании, названии, платформе и принадлежности компонента к группе собственных или группе встроенных компонентов
Component Collection	Контейнер, содержащий коллекцию объектов класса Component, и, предоставляющий функциональность для загрузки информации о компонентах из ресурсов проекта
Component Entity	Сущность компонента, т.е. класс, объектами которого являются компоненты, содержащиеся непосредственно в коде проекта.
Platform	Перечисление, состоящее из 3 элементов - IOS, Android и Custom, используемое для определения принадлежности компонента к той или иной платформе
Project File	Контейнер, содержащий информацию о находящихся в том или ином классе компонентах
Property	Класс, объектами которого являются свойства, принадлежащие компоненту. Объекты данного класса инкапсулируются объектами класса Component.
Property Entity	Класс, объектами которого являются конкретные сущности свойств. Т.е. - это свойства принадлежащие конкретному компоненту, используемому в проекте

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

Таблица 3. Обработчики событий

Название	Описание
Component Insertion Editor Mouse Adapter	Обработчик события вставки компонента в код проекта
Properties Inspector Mouse Adapter	Обработчик, используемый при нажатии пользователем на тэг компонента для отображения свойств компонента в Properties Inspector

Managers - модуль с классами (менеджерами), инкапсулирующими функциональность для управления какой-либо частью плагина, например инспектором свойств или вставкой компонентов (таб. 4).

Utils - различные дополнения, используемые в плагине (таб. 5).

Таблица 4. Менеджеры

Название	Описание
Custom Components Manager	Менеджер для управления поиском собственных компонентов проекта
Editor Manager	Менеджер, используемый в качестве базового менеджера для всех менеджеров, работающих с редакторами
Inserter	Класс, инкапсулирующий функциональность для непосредственной вставки шаблона компонента в текст проекта
Insertion Manager	Менеджер, управляющий вставкой компонентов в код проекта.
Properties Inspector Manager	Менеджер, используемый для управления компонентом PropertiesInspector, отвечающий за корректной отображение и сбор информации о свойствах нажатого в коде компонента

Таблица 5. Дополнения

Название	Описание
Resource Utils	Дополнения для определения относительного пути между и компонентом и файлом, в который который данный компонент намеревается вставить пользователь
Utils	Различные дополнения, используемые для форматирования и корректного отображения вставленного кода

3.3 Пользовательский интерфейс

Пользовательский интерфейс реализован при помощи библиотеки Swing и состоит из двух основных частей - списка компонентов и инспектора свойств. В данном проекте используется 4 компонента интерфейса, которые являются строительными блоками для для инспектора свойств и списка компонентов (таб. 6).

Таблица 6. Описание компонентов интерфейса

Название	Описание
Component ListItem	Компонент, представляющий элемент списка компонентов, содержащий ссылку на документацию компонента или на место объявления в коде проекта и название самого компонента.
Main Tool Window	Основной интерфейс плагина, содержащий части - список компонентов и ниспектор свойств.
Properties Inspector	Интерфейс, представляющий инспектор свойств.
Property UIItem	Компонент инспектора свойств, представляющий свойства различных видов.

3.3.1 Список компонентов

Рисунок 6. Список компонентов

Часть пользовательского интерфейса, содержащая список компонентов состоит из строки поиска, которая осуществляет поиск компонентов по названию, и компонента TabbedPane, содержащего вкладки со списками компонентов. Вкладка IOS - содержит встроенные компоненты React Native, использующиеся только на платформе IOS, вкладка Android содержит список всех компонентов, предназначенных для платформы Android, вкладка Common - содержит компоненты, которые могут быть использованы на обоих платформах, Custom - содержит собственные компоненты проекта. React Native компоненты содержат ссылки, по нажатию, на которые открывается соответствующая страница с документацией.

3.3.2 Инспектор свойств

Рисунок 7. Инспектор свойств

Инспектор свойств (рис. 7) представляет собой элемент интерфейса плагина для редактирования свойств выделенных компонентов. При нажатии на компонент в исходном коде редактора, в данном элементе интерфейса отображаются все свойства выделенного компонента. В левой части находится элемент Checkbox, показывающий определено ли заданное свойство в текущем компоненте. В правой части от названия свойства находится элемент, определяющий значение заданного свойства. Для каждого типа свойств используется определенный тип компонентов Java Swing (таб. 7). Через данный инспектор свойств можно удалять, добавлять и редактировать свойства выделенного компонента.

Таблица 7. Свойства и компоненты

Тип свойства	Тип компонента
Строковый	JTextField
Логический	JCheckBox
Перечисление	JComboBox
Целочисленный	JSlider
Все остальные типы	JTextField

3.4 Взаимодействия с текстовым редактором

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

В плагине определены следующие классы, взаимодействующие с текстовым редактором:

1. Properties Inspector Manager - менеджер, отвечающий за загрузку и определение наличия свойств у компонента. Данный менеджер определяет находится ли курсор на каком-то определенном компоненте, и, если да, путем анализа синтаксического дерева вычисляет свойства, которые определенны в коде для нажатого компонента.

2. Insertion Manager - менеджер, отвечающий за вставку шаблонов компонентов в исходный код по нажатию в текстовом редакторе. Данный менеджер вызывается из главного контроллера в пользовательском интерфейсе. После нажатия пользователем на компонент из списка, объект компонента устанавливается текущим в InsertionManager при помощи метода setComponent. После того как пользователем было произведено нажатие в текстовом редакторе, шаблон компонента вставляется в нажатом месте, после этого обработчик удаляется из менеджера.

3.4.1 Вставка шаблона компонента

Вставка шаблона компонента происходит по следующему сценарию:

1. Пользователь нажимает на компонент в списке доступных компонентов

2. Обработчик события нажатия определяет выделен ли какой-нибудь участок кода

3. Если выделен, то обработчик находит начало и конец выделения, оборачивает его в выделенный компонент и вставляет обратно вместо выделенного участка кода.

4. Если не выделен, то обработчик вызывает метод set Component объекта Insertion Manager.

5. set Component добавляет в открытый редактор обработчик нажатия Component Insertion Editor Mouse Adapter.

6. При нажатии в текстовом редакторе, шаблон компонента вставляется в место нажатия в коде , а обработчик удаляется из Insertion Manager.

3.4.2 Форматирование текста

Формтирование текста осуществляется средствами Intelli J Plugin SDK, при помощи метода reformat Text объекта класса Code Style Manager, который принимает в качестве параметров объект класса Psi File, начало и конец участка кода, который необходимо отформатировать. Форматирование производится согласно настройкам проекта, в которых задаются отступы, знаки табуляции и прч.

3.4.3 Импорт зависимостей

В плагине есть 2 типа импорта зависимостей - импорт зависимостей встроенных React Native компонентов и импорт зависимостей собственных компонентов проекта. Для импорта зависимостей React Native компонентов используется путь react-native - название пакета, в котором находятся React Native компоненты. Для импорта зависимостей компонентов проекта используется алгоритм, реализованный в классе ResourceUtils. На вход алгоритму подается путь, в котором содержится компонент, который необходимо импортировать, путь к файлу в который данный компонент необходимо импортировать, и разделитель, использующийся в путях.

Алгоритм поиска относительного пути:

1. Разделить путь к файлу с компонентом и путь к файлу для импорта компонента на части, где разделитель является границей двух частей

2. Найти последнюю общую (корневую директорию) для обоих файлов

3. Найти количество (n) директорий от файла для импорта до найденной корневой директории

4. Записать в новую строку n раз подстроку “../”

5. Сконкатенировать полученную строку и подстроку, полученную из строки с путем к файлу компонента - от корневой директории до самого файла.

3.5 Анализ синтаксического дерева

Анализ синтаксического дерева производится средствами IntelliJ Platform SDK, предоставляющий удобные средства для обхода дерева.

psiFile.getNode().getPsi().accept(new PsiRecursive Element Walking Visitor() { @Override public void visitElement(PsiElement element) { String text = element.getText(); if (isImportPathNode(text, documentText)) { Utils.reformatText(element.getTextOffset(), element.getTextOffset() + element.getTextLength()); } super.visitElement(element); } });

Обход реализуется при помощи метода accept, который принимает в качестве параметра объект класса Psi Recursive Element Walking Visitor, осуществляющий рекурсивный обход синтаксического дерева. Данный класс имеет метод visit Element, который принимает на входе объект класса Psi Element, представляющий узел синтаксического дерева. Каждый узел характерезуется названием и текстом - участком кода, представляющим данный узел. Данный плагин работает c несколькими типами узлов (таб. 8)

Таблица 8. Используемые узлы

Наименование	Описание	Пример
ES6Class	Узел, представляющий ES6 класс	class TagsMaskManager extends Component { render (){ return <View />; } }
ES6ExportDefaultAssignment	Выражение - экспорт по умолчанию	export default TaskManager;
ES6ExportSpecifier	Выражение - экспорт	export TaskManager;
PsiElement (XML_ATTRIBUTE_VALUE)	Атрибут компонента	<ListView someAttribute={true} />
XmlToken:XML_EMPTY_ELEMENT_END	Конец объявления компонента	/>
XmlToken:XML_TAG_END	Конец объявления обертывающего компонента	>

Обход синтаксического дерева используется в плагине в следующих случаях:

1. Изменение/удаление свойств компонентов. Каждый раз когда необходимо, отредактировать или удалить свойство компонента, метод, отвечающий за данную функциональность, совершает обход синтаксического дерева, полученного из выделенного компонента. Дерево рекурсивно обходится до тех пор, пока не будет найден узел типа PsiElement (XML_ATTRIBUTE_VALUE) со значением искомого свойства, после этого значение свойства изменяется в тексте компонента, либо все свойство вместе со значением удаляется из компонента.

2. Добавление свойств выделенного компонента. Для добавления свойства в компонент произволится поиск тега XmlToken: XML_EMPTY_ELEMENT_END или тега XmlToken: XML_TAG_END. Если был найден тег XmlToken: XML_EMPTY_ELEMENT_END, производится вставка свойства в позицию, находящуюся перед этим тегом, в противном случае вставка производится перед тегом XmlToken:XML_TAG_END.

3. Поиск собственных компонентов проекта. (см. п 3.6)

4. Определение выделенного компонента и его свойств. Для определения выделенного компонента и его свойств осуществляется обход синтаксического дерева узла выделенного компонента, находятся все узлы типа PsiElement(XML_ATTRIBUTE_VALUE), из значения и названия сохраняются в список.

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

3.6 Поиск собственных компонентов проекта

Поиск собственных компонентов проекта производится путем перебора всех файлов проекта за исключением файлов, входящих в состав папок android, ios и node_modules. Файлы входящие в состав данных папок не учитываются, поскольку одназначно не содержат собственных компонентов проекта в виду фиксированной структуры проектов на React Native. Для поиска собственных компонентов используется следующий алгоритм:

1. Находятся все файлы проекта, не входящие в состав папок node_module, ios и android

2. Каждый файл проверяется алгоритмом на предмет того, является ли он файлом, содержащим javascript код, путем проверки расширения файла

3. Получается Psi представление файла и рекурсивно ищeтся узел ES6Сlass

4. Если узел найден, из данного узла находится имя класса.

5. Производится проверка вхождения имени класса в узлы ES6ExportDefaultAssignment и ES6ExportSpecifier, если таковые имеются.

6. Если вхождение найдено, компонент сохраняется в массив вместе с путем и пометкой является ли он импортируемым по умолчанию компонентом или нет.

Выводы по главе

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

Заключение

...