Пять способов, которыми Vulcan делает Аполлона еще лучше

Проект Telescope сильно изменился с момента своего создания: то, что начиналось как чистый клон Hacker News с открытым исходным кодом, теперь превратилось в фреймворк, работающий на React и Meteor. Мы даже перешли на новое название Вулкан, чтобы сделать переход еще более понятным.

А с новой версией мы теперь включаем Apollo и GraphQL для еще большей гибкости и контроля над вашими данными.

Что такое вулканец?

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

Цель Vulcan - предоставить вам интеллектуальные настройки по умолчанию для всего этого, чтобы вы могли пропустить шаблон и сразу перейти к интересной части создания продуктов. В то же время архитектура Vulcan такова, что любой «кирпичик» можно легко заменить с помощью вашего собственного кода в любой момент.

Другими словами, Vulcan - это дополнительный служебный слой поверх Meteor, React и Apollo, который помогает создавать приложения. Так что именно он может сделать для вас?

1. Загрузка и обновление данных

Загрузка данных в Apollo ни в коем случае не является сложной задачей, но для этого требуется немного шаблонного кода. Ответ Vulcan - предоставить пустой скелет, который вы заполняете своими собственными преобразователями запросов, чтобы разблокировать мощные средства экономии времени.

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

Просто определите свой списокoptions, а затем оберните свой компонент withList(options):

Самое приятное в этом то, что разбивка на страницы, а также обновление данных (другими словами, вставка / удаление новых элементов в списке) выполняются за вас бесплатно, спасибо к встроенной логике нумерации страниц и редуктору withList.

2. Создание и обработка форм

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

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

Хотите сделать это формой редактирования документа? Просто добавьте опору documentId.

3. Создание вашей схемы GraphQL

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

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

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

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

4. Учетные записи пользователей

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

Vulcan также использует учетные записи Meteor, но заменяет традиционный пользовательский интерфейс пакетом accounts-ui на основе React. Vulcan также работает с социальным входом и даже включает формы для запроса дополнительной информации (например, адресов электронной почты) при регистрации.

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

И хотя в настоящее время Vulcan по-прежнему полагается на классический пакет учетных записей пользователей на основе DDP, мы хотели бы заменить его на 100% -ное решение Apollo (кстати, мы всегда ищем участников, так что если это то, что вам нужно нравится работать над загляни в наш чат Slack, чтобы поздороваться!).

5. Более умные фрагменты

Фрагменты - одна из самых крутых функций GraphQL. Они позволяют вам определять небольшие фрагменты вашей схемы GraphQL как независимые объекты, которые вы можете повторно использовать в нескольких местах.

Но их синтаксис немного громоздок, и вам нужно повторно импортировать фрагмент каждый раз, когда вы хотите его использовать:

query Post($postId: String!) {
  _id
  title
  contents
  author{
    ...UserFragment
  }
}
${UserFragment}

В Vulcan есть registerFragment помощник. После регистрации вы можете использовать фрагмент без повторного импорта. Другими словами, вы можете избавиться от строки ${UserFragment} выше:

query Post($postId: String!) {
  _id
  title
  contents
  author{
    ...UserFragment
  }
}

Это может показаться мелочью, но такие мелочи складываются!

Начиная

Это лишь малая часть того, что Vulcan может для вас сделать. Если вы привыкли создавать приложения по методу Meteor, переход прямо к Apollo может оказаться непростым делом. Итак, с Vulcan мы хотели получить все преимущества Apollo, но при этом не потерять простоту использования Meteor.

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

Я думаю, что мы живем в довольно захватывающее время для веб-разработки: между Meteor, React и Apollo кажется, что все части головоломки наконец-то собрались вместе. Если повезет, Vulcan окажется тем клеем, который их всех соединит!