настоящая IDE для разработки React и Redux

1656681502 nastoyashhaya ide dlya razrabotki react i

от Nate Wang

Мы очень рады объявить о стабильном выпуске Rekit Studio, полного IDE для разработки React, Redux и React Router! Хотя это может быть новым для некоторых из вас, оно помогло нам создавать сложные веб-приложения уже больше года.

1*Qi68yRpDTFISfd_SFoy9HQ
Студия Rekit

Предварительной версией Rekit Studio был Rekit Portal, не имевший возможности редактировать код. Теперь благодаря Monaco Editor (который также поддерживает VS Code) и prettier (удивительный инструмент для форматирования кода), Rekit Studio обеспечивает отличный опыт кодирования. Вот почему мы переименовали его из «портал» в «студию».

Как IDE, кроме редактирования кода, Rekit Studio предоставляет возможность генерировать код, диаграммы зависимостей, рефакторинг, сборку, модульные тесты и значимый способ навигации по коду.

Вы больше не заботитесь о том, как настроить проект, конфигурировать webpack или организовать структуру папок. Rekit Studio обеспечивает интегрированный способ управления всем проектом. Именно этим Rekit Studio отличается от других редакторов кода, таких как Sublime Text и VS Code.

Просмотрите краткую демонстрацию

Перед вступлением вы можете просмотреть короткое демонстрационное видео о том, как использовать Rekit Studio для управления действиями Redux.

С видео мы видим, что все, что нас интересует, это бизнес-логика, а не шаблонный код.

Попробуй сейчас

Лучший способ ознакомиться со следующим введением – это запустить Rekit Studio вместе, чтобы вы могли самостоятельно испытать функции в реальном времени. Это очень просто одним из двух способов:

  1. Доступ к демо-версии: . Это экземпляр Rekit Studio, который работает только для чтения. Поэтому вы не можете вносить изменения в проект, которым он управляет (код самой Rekit Studio!).
  2. Создайте программу Rekit самостоятельно всего в 3 шагах:
1*ziZR8esumzPQzl8dgzZ0lQ

Затем получите доступ к программе. для Rekit Studio по умолчанию.

Да, Rekit Studio – это пакет npm в вашем проекте, который работает в браузере. Этот механизм гарантирует, что каждое приложение имеет собственную Rekit Studio, чтобы никогда не возникало проблем с совместимостью версий.

Укажите свой код содержательно

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

Теперь Rekit следует шаблону организации масштабируемой веб-приложения. И на основе этого Rekit Studio понимает ваш проект. Я представил практику в двух предыдущих статьях.

На основе шаблона Rekit Studio знает, какие файлы являются компонентами, какие действия, где определены правила маршрутизации и т.д. Тогда проводник проекта может показать структуру проекта содержательным способом, например:

1*G-RnJg60bc2JPRqpSR78rg
Проводник проекта

Rekit Studio знает особенности этих элементов проекта, например, какие действия асинхронны (с синей пометкой «A»), какие компоненты подключаются к магазину Redux (с зеленой пометкой «C») и какими компонентами управляет React Router (с оранжевой пометкой «R») ), которые используются в некоторых правилах маршрутизации.

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

Следует отметить, что проводник проекта показывает только файлы в папке src в проекте, чтобы иметь хорошую производительность. Итак, если вы хотите редактировать файлы из папки src, например package.json или .gitignore, вам может понадобиться другой текстовый редактор.

Генерация кода

Подобно другим настоящим IDE, таким как Eclipse для Java или Visual Studio для .Net, Rekit Studio помогает создавать шаблоны кода с помощью интуитивно понятного интерфейса без каких-либо затрат на обучение. Например, чтобы создать компонент, щелкните правой кнопкой мыши узел функции в проводнике проекта и нажмите `Добавить компонент`.

1*X-FDtO-RMwk35KYdN8Rq-A
Добавьте компонент

Кроме присвоения имени, вы можете установить, подключается ли он к магазину Redux или используется в правиле React Router. После нажатия ‘Ok’ он генерирует весь необходимый код и конфигурацию. Вы можете увидеть, что он делает сзади в журнале операций. Он создает файл less/scss для стилизации, тестовый файл для тестирования, добавляет правило React Router для доступа к нему по URL-адресу (если URL-адрес установлен) и так далее.

За этим нет никакой магии – Rekit Studio просто помогает вам автоматически делать то, что раньше нужно было делать вручную. И вы всегда узнаете, что произошло, проверив журналы.

Чтобы создать асинхронное действие Redux, Rekit Studio использует redux-thunk по умолчанию для создания редукторов и действий:

1*C82XiyrFeWnHvRNpWVxLxg
Добавьте асинхронное действие

Кроме того, вы можете создать асинхронные действия с помощью `redux-saga`, установив плагин `rekit-plugin-redux-saga`. Смотрите раздел о плагинах, чтобы узнать больше.

Все названия файлов, названия функций или переменных, сгенерированные Rekit, вынуждены соответствовать предварительно определенным правилам, как описано здесь. Итак, даже если вы введете имя вроде `мой компонент` в поле имени, Rekit превратит его в `Мой компонент`. Благодаря такому подходу, все имена в проекте всегда согласованы.

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

Рефакторинг важен

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

Например, если мы хотим переименовать асинхронное действие, обычно нужно коснуться нескольких файлов и изменить десятки кода в разных местах. Скажем, мы хотим переименовать асинхронное действие из `fetchTopics` на `fetchTopicList`, оно требует следующих изменений:

1*Bj6CG2ZokEb7veblhSVMXg

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

Теперь с Rekit Studio вы можете щелкнуть правой кнопкой мыши на компоненте или действия, чтобы переместить, переименовать или удалить их так же, как вы делаете с другими IDE, например Eclipse для Java или Visual Studio для .Net. Rekit Studio сделает все автоматически, и можно проверить журналы, чтобы увидеть, что он делает позади.

1*TQD7FHHOH_4b82oVSk7Exg

Просмотрите свой проект с помощью интуитивно понятных схем

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

1. Обзорная схема
Он отображается на странице информационной панели (домашней странице), с помощью которой мы можем видеть не только зависимости между функциями (концепция высокого уровня приложений Rekit), но и обычные модули, такие как компоненты и действия. Таким образом, вы можете легко найти, какие модули опасны для рефакторинга (с большим количеством депов), а какие легко рефакторинговать (с меньшим количеством депов).

1*teOjZ3d7qvPnNbNLsNLmIg

Эта диаграмма также поможет вам найти неиспользованные модули – например, два компонента функции `home` больше не используются в проекте, как показано на диаграмме выше. Вы можете смело их удалять. Удаление ненужного кода позволяет уменьшить сложность проекта вместе с размером комплекта программы.

2. Элементная схема

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

1*Wuno2b4rxwKjH3LFoV8oCA

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

Создание и тестирование

Как IDE Rekit Studio также может создавать и тестировать проект с помощью интуитивно понятных пользовательских интерфейсов. По умолчанию Rekit Studio попытается запустить команду `npm run build` для создания проекта и запустить `npm test — [test-file-pattern]` для выполнения модульных тестов.

Чтобы создать проект, щелкните пункт `Build` главного меню:

1*6uzaiTyQVqGOW-XS64J3BQ

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

Чтобы запустить модульные тесты, можно либо запустить все тесты, щелкнув пункт меню «Выполнить тесты» в главном меню, либо щелкнуть правой кнопкой мыши файл/папку с тестами. Rekit Studio автоматически преобразует команду для проверки шаблона файла:

1*hsJ24ftjGGslgZ5Fy31z8g

Выше приведен результат проверки функции «диаграмма». Если вы запустите все тесты проекта, он создаст отчет о тестовом покрытии. Вы можете получить доступ к нему из главного меню:

1*qcXXiGFt3kswaX99-OLqcg

Система плагинов

Мы видим, что Rekit Studio может создавать шаблоны функций, действий и компонентов. Если вы хотите создать некоторые новые элементы, такие как селекторы, или изменить стандартный код кода (например, использовать `redux-saga` вместо `redux-thunk` для асинхронных действий), вы можете создать плагины для этого.

Подробнее о системе плагинов смотрите здесь.

Интерфейс командной строки

Кроме Rekit Studio, существует интерфейс командной строки для управления проектом Rekit. На самом деле и Rekit Studio, и Rekit CLI используют `rekit-core` для управления элементами проекта. Система CLI поддерживает больше видов плагинов. И Rekit Studio будет усовершенствован в будущем, чтобы обеспечить унифицированный пользовательский интерфейс для системы плагинов.

Переход из Rekit Portal в Rekit Studio

Если ваш существующий проект использует Rekit Portal, перейти на Rekit Studio очень легко, поскольку Rekit Studio полностью совместим с предыдущими проектами Rekit. Все, что вам нужно сделать это установить Rekit Studio и обновить сценарий, чтобы запустить его в server.js здесь.

Превращение вашего проекта в проект Rekit

Если вы создали проект с помощью React, Redux и React Router, его можно преобразовать в проект Rekit, чтобы управлять им с помощью Rekit Studio. Это не так уж сложно, но тема требует еще одной статьи, чтобы правильно ее представить. Я напишу, если захотите – дайте знать в комментариях. Ключевым моментом является реорганизация файлов и кода способом Rekit.

Что дальше

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

Некоторые высокоприоритетные кандидаты перечислены ниже:

  • Лучшее выделение синтаксиса кода.
  • Поддержка особых правил ESlint.
  • Лучшее автозаполнение кода, например установка названий модулей.
  • Быстрое открытие файлов с помощью Cmd+P.
  • Поддержка нескольких несохраненных файлов. Только один файл может быть в несохраненном состоянии, чтобы сохранить ваш код.
  • Добавьте больше типов диаграмм.
  • Разрешить пользователям создавать/переименовывать/удалять обычные файлы, кроме компонентов и действий.
  • Интегрировать сборник рассказов.
  • Поддержка TypeScript.
  • Поддержка рендеринга на стороне сервера.

Список может быть длинным, и он зависит от ваших отзывов – мы приветствуем любые ваши отзывы.

Резюме

Хотя интерфейсная технология развивается очень быстро, Rekit как набор инструментов, а не фреймворк был очень стабильным на протяжении более двух лет. Практики, которые он придерживается, не зависят от технологий. Теперь выпуск Rekit Studio стал для нас новой вехой в улучшении опыта программирования. Надеемся, вам тоже понравится!

Наконец, я хочу отметить, что Rekit не предоставляет пакеты SDK или npm для вашего приложения. Это только инструмент для создания и управления проектом. Даже без Rekit можно использовать любой текстовый редактор для написания кода и использовать терминал для запуска сценариев для проекта Rekit. То есть, вы используете Rekit, но не зависите от него.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *