От автора: кто не мечтал иметь возможность, используя передовые технологии, создавать веб- и мобильные приложения с нуля за нескольких дней? При наличии подходящих шаблонов программирования и хорошо подобранного фреймворка, в роли которого сегодня будет выступать Vulcan js, эта мечта не так нереальна, как кажется ….
Используем пакеты
Если все сделать правильно, структурирование приложений в пакетах дает огромные преимущества от возможности повторного использования в разных приложениях. Посмотрите, как Npm.js разрешило тысячам разработчиков JavaScript во всем мире делиться библиотеками и экономить миллионы часов.
Знаменитый фреймворк Node.js, Meteor, предоставляет из коробки полностью функциональную пакетную систему, и, тем не менее, я считаю, что это одна из самых недооцененных функций платформы. Слишком мало приложений, с которыми я столкнулся в реальном мире, полностью использовали возможности пакетной архитектуры. В большинстве случаев пакеты ограничены функциями низкого уровня, в то время как в теории они также позволяют разделить бизнес-логику (например, отделить форум от бэк-офиса и от вашего основного приложения …).
Это имеет смысл, потому что использовать пакеты не так просто. Начинающим разработчикам нужно сначала усвоить много понятий, касающихся как в частности Meteor, так и веб-разработки в целом. Вы вряд ли можете сразу разделить свое приложение на многократно используемые части, это довольно сложно.
Одним из возможных способов организации рабочих процессов является поэтапное написание приложения и постепенное разделение. Тем не менее, это не так просто, как кажется. Части приложения могут зависеть друг от друга, потенциально могут иметь место круговые зависимости или зависимости от общих функций и т. д.
Другая возможность — писать приложение в пакетах с самого начала. Это требует как глубокого понимания сферы применения приложения, так и большого опыта программирования. Даже очень опытные разработчики не всегда могут правильно сделать это сразу.
Но не беспокойтесь, open source сообщество поможет вам!
От Telescope к Vulcan
Telescope призван был помочь пользователям Meteor структурировать приложения в пакетах на первых этапах работы платформы, предоставляя хорошо продуманную базовую архитектуру, а также множество независимых и многоразовых пакетов, реализующих общие функции CMS (форум, управление электронной почтой…). Он служил как в качестве основы, так и в качестве шаблона для приложений Meteor.
И угадайте что — Telescope далеко еще не мертв: он был полностью переписан его создателем Сашей Грайфом и теперь является одним из самых перспективных фреймворков JavaScript.
Запомните название: Vulcan.js. Он обновляется, чтобы соответствовать новейшим технологиям, таким как React или GraphQL, новым стандартам для запросов API.
Его архитектура — отличная отправная точка, но также и образец для тех, кто хочет писать действительно многоразовые пакеты и тем самым сокращать время разработки. Давайте подробнее рассмотрим возможности Vulcan.js, которые оптимизируют повторное использование кода.
Регистрируйте, чтобы разделять
Эффективный шаблон для обработки общих функций при разбиении приложения на пакетах — это «улучшение».
Типичным примером использования является маршрутизация. Обычно приложение имеет только одну систему маршрутизации, но каждый пакет должен определять свои собственные маршруты. Vulcan предоставляет функцию addRoute, которая позволяет любому пакету добавлять собственные маршруты в приложение.
addRoute({ name: 'forum', path: '/forum', componentName: 'Forum'
});Таким образом, пакет может улучшить приложение, добавив новые страницы. А если вы удалите этот пакет? Дополнительные страницы просто исчезают. Это оптимизирует добавление или удаление пакета, даже когда он предоставляет функции высокого уровня, такие как форум, блог или полностью back-and.
Возможно, вы заметили, что в этом примере мы не указали *component*, а только имя компонента. Это связано с тем, что в Vulcan регистрация глобальна.
Регистрируйте, чтобы настраивать
Шаблон регистрации не касается только маршрутизации, но компонентов, фрагментов graphQL, фильтров MongoDB… Это не только помогает связываться с основными функциональными возможностями, но также позволяет выполнять настройку, заменяя зарегистрированные элементы.
Интерфейс Vulcan использовался для массового применения react-bootstrap. Он был улучшен благодаря систематическому использованию зарегистрированных компонентов. Таким образом, сторонний пакет Vulcan Material UI может заменить все компоненты Bootstrap компонентами Material-UI: вам не нужно менять ни одну строку приложения, чтобы поменять внешний интерфейс.
// Package 1 - "my-basic-ui"
const MyBasicButton = ({onClick, children}) => ( <button onClick={onClick}> {children} </button>
)
// Tell other packages they can use your component
// under the name "Button"
registerComponent({ name: 'Button', component: MyBasicButton
}) // Package 2 - "my-better-ui"
// We replace the Button component to improve it
const MyStyledButton = ({onClick, children}) => ( <button className="btn" onClick={onClick}> {children} </button>
)
replaceComponent({ name:'Button', component: MyStyledButton
}) // Package 3 - "my-app"
// Example usage. Thanks to registration, we can change the Button style // without touching this code at all
const MyInterface = () => ( <Components.Button onClick={() => console.log('click')}> Click Me! </Components.Button>
)В этом примере мы определяем базовую кнопку и используем ее. Регистрация позволяет другим пакетам переопределять базовый компонент и заменять его, например, для улучшения его дизайна.
Разделение задач с улучшением
Вам не всегда обязательно выполнять полную замену. Метод addField, добавленный Vulcan, отлично подходит для обработки зависимостей между функциями, связанными с коллекциями.
Для приложения Simply Charge одной из моих целей было создание модуля для обработки повторного наполнения вендинговых автоматов. У меня уже был пакет vending-machine, но я не хотел загрязнять его функциями refillment. В конце концов, работа с автоматами и их повторное наполнение — это две разные вещи. Смешение их слишком затруднило бы замену системы управления повторным наполнением. Вот как выглядит код:
VendingMachines.addField([ { fieldName: 'lastRefillAt', fieldSchema: { type: Date, optional: true, viewableBy:['runners', 'managers', 'admins'], resolveAs: { type: 'Date', resolver(vendingMachine, args, context) { const lastRefill = context.Refills.find( { vendingMachineId: vendingMachine._id }, { fields: { 'date': 1 }, sort: { date: -1}, limit: 1 } ).fetch() if (!lastRefill.length) return vendingMachine.createdAt return lastRefill[0].date } } }
})Удивительно, что пакет, который определил набор VendingMachines, ничего не знает об этом новом поле, и это не нужно! Поэтому, если я удалю пакет refillment… ничего не произойдет (за исключением того, что связанная функция исчезнет, конечно), что доказывает, что я правильно разделил приложение.
Объявляй и властвуй
Мир схем
Вне своей пакетно-ориентированной структуры фреймворк Vulcan оптимизирует повторное использование. Работа со схемами не является новой концепцией. Лучшие примеры — это ORM, которые помогают настраивать структуру базы данных и управлять ею на основе только файлов конфигурации. Обычно они сопровождаются псевдоязыком, который позволяет описывать ваши структуры данных.
Старая добрая схема Mongoose, используемая для структурирования базы данных Mongo в сочетании с сервером Node.
Но вы знаете, что лучше, чем автоматическое создание вашего back-end на основе схемы? Автоматическое создание всего приложения.
Meteor уже делает это возможным, будучи изоморфным фреймворком полного стека: многие функции Meteor доступны как в back-end , так и во front-end с тем же синтаксисом, что облегчает повторное использование связанных со схемой функций, например, для автоматического генерирования пользовательского интерфейса.
Vulcan развил эту концепцию, улучшив библиотеку aldeed: simpl-schema, любимую разработчиками Meteor, и включив в нее продвинутый компонент SmartForm из коробки.
Внутренняя часть SmartForm довольно сложна, но для разработчика использовать ее очень просто: передать коллекцию и она генерирует форму. Поля ввода полностью настраиваются, и вам вряд ли нужно будет писать свои собственные формы.
Ориентированная на схему архитектура Vulcan.js, благословение для загруженных разработчиков
Этот шаблон можно рассматривать как декларативный способ разработки приложения. Конфигурация отделена от реализации, что делает ее полностью многоразовой. В конце концов, вы не переписываете приложение в любое время, когда данные меняются? Это точно такой же принцип, но на более высоком уровне.
Встречайте «Awesome Vulcan», наше приложение витрины для шаблонов повторного использования на Vulcan
Мы использовали этот принцип в демонстрационном приложении Awesome Vulcan. Если у вас есть час, взгляните на различные базовые пакеты. Например, с помощью Vulcan Backoffice Builder вы можете автоматически генерировать небольшой back-end для любой заданной коллекции на основе схемы. Экономия времени — ОГРОМНАЯ! И это только начало.
Эта страница администрирования автоматически генерируется в зависимости от предоставленной схемы. Для добавления нового типа данных требуется только одна строка кода.
Автоматизированная генерация форм — это ДЕЙСТВИТЕЛЬНО круто. Вы можете определить собственные повторно используемые поля ввода, если у вас более сложные данные.
Схемы для всего
Теперь давайте представим, что вы ОЧЕНЬ ленивы. Но вы не такой, не так ли? В любом случае, давайте представим, что вы не хотите писать даже свою собственную схему. Тогда вам может быть интересно узнать, что некоторые умные люди позаботились о том, чтобы определить сотни схем, для любых применений в реальном мире и предоставить их на открытой платформе Schema.org. Это может послужить вам вдохновением, если вы не очень ориентируетесь в сфере бронирования железнодорожных билетов или, почему бы нет, зоопарков.
Ни одна хорошая статья не обходится без изображения ленивой кошки
Мы даже пытались преобразовать схемы Schema.org в схемы, совместимые с Vulcan.js. Это экспериментально, но это может помочь вам понять, как использовать архитектуру, ориентированную на схему: выполнив некоторую дополнительную работу, вы можете создать интерфейс администрирования для любых данных, которые когда-либо были использовались человечеством. Звучит здорово, не так ли?
Убедительно? Тогда попробуйте Vulcan, это довольно просто — всего лишь нужно прочитать удивительное интерактивное руководство «Начало работы».
Автор: Eric Burel
Источник: https://medium.com/
Редакция: Команда webformyself.