Мы рады сообщить о выпуске Feathers Offline-first own-data and own-net enablers для любого адаптера CRUD в семействе Feathers - более того, он чрезвычайно прост в использовании и позволяет использовать любой javascript разработчика, чтобы сделать мобильные приложения, которые действительно работают даже без подключения к Интернету!

Давайте вернемся немного назад, прежде чем выяснять, что, когда и кто.

Так что же такое Feathers?

Feathers - это веб-фреймворк для создания приложений реального времени и REST API с использованием JavaScript или TypeScript с Node.JS, React Native и браузером. Он работает с любым сервером, поддерживающим множество баз данных из коробки, и с любыми интерфейсными технологиями, такими как React, VueJS, Angular, Android или iOS.

Feathers использует другой подход как к традиционным фреймворкам MVC, таким как Rails, Sails или NestJS, так и к низкоуровневым фреймворкам HTTP, таким как Sinatra, Express (с которыми Feathers полностью совместим), Hapi или Koa. Вместо создания маршрутов, контроллеров или обработчиков HTTP-запросов и ответов Feathers использует службы и рабочие процессы (перехватчики), которые позволяют вам сосредоточиться на логике приложения независимо от того, как к нему обращаются.

Это упрощает понимание и тестирование приложений, а также позволяет Feathers автоматически предоставлять REST API, API реального времени websocket (которые часто могут быть немного быстрее) и универсальное использование на клиенте и сервере. Это также позволяет добавлять новые протоколы связи (например, HTTP2 или GraphQL) без необходимости изменять что-либо в коде вашего приложения. Feathers делает все это, оставаясь легким с небольшой поверхностью API и кодовой базой, и гибким, позволяя вам использовать его с бэкэнд и интерфейсной технологией, которая наилучшим образом соответствует вашим потребностям. Вы можете узнать больше о концепциях высокого уровня, лежащих в основе Feathers, в шаблонах проектирования для современных веб-API.

Feathers Offline-first - что это такое? 📦

Таким образом, own-data / own-net - это две связанные стратегии, реализованные в Feathers Offline-first. Обе стратегии помещают в очередь события CRUD для обернутой службы локально, пока устройство не подключится к серверу, но для пользователя события CRUD выполняются немедленно с использованием оптимистической стратегии мутации. Короче говоря, own-data / own-net автоматически обеспечит синхронизацию данных между любым количеством клиентов и немедленный ответ пользователя на любую операцию CRUD, даже если клиент не подключен к серверу.

own-data будет повторно воспроизводить все события в очереди на сервер в том порядке, в котором они были выполнены в автономном режиме. Это позволяет серверу реагировать на каждое событие (мутацию). Например, он может запускать хуки, которые рассылают электронные письма об определенных мутациях.

own-net с другой стороны, будет воспроизводить на сервере только конечный результат всех событий в очереди для данного элемента (т. Е. Строки или документа). Если элемент (документ) изменен 5 раз, то только результат достигнет сервера после установления соединения. Если запись исправлена ​​и окончательно удалена, пока она еще не подключена, сервер никогда не увидит мутации. Сервер может по-прежнему реагировать на каждое событие (мутацию), но имейте в виду, что изменения, возможно, являются только чистыми изменениями. own-net обычно приводит к гораздо более короткой синхронизации и уменьшению трафика между клиентом и сервером.

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

Feathers Offline-first - когда это использовать? 📆 ⏰

Вы должны использовать Feathers Offline-first, когда вам нужно, чтобы ваше (мобильное) приложение продолжало работать, когда пользователь не в сети. По сути, если вы тщательно спроектируете свое приложение, у ваших пользователей будет точно такой же опыт работы в автономном режиме, как и в режиме онлайн.

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

Перья в автономном режиме - кто может им пользоваться? 👨‍👩‍👧‍👧

Любой с базовыми навыками JavaScript сможет использовать Feathers Offline-first в течение часа, следуя руководству в документации. Любой опытный разработчик Feathers может воспользоваться стратегиями own-data / own-net в считанные минуты.

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

Нам нужно добавить пару строк к public/index.html. Сначала мы покажем, как использовать оболочку own-data:

<html lang=”en”>
<head>
  <meta http-equiv=”content-type” content=”text/html;charset=utf-8">
  <meta name=”viewport” content=”width=device-width,
        initial-scale=1.0, maximum-scale=1, user-scalable=0" />
  <title>FeathersJS chat</title>
  <link rel=”shortcut icon” href=”favicon.ico”>
  <link rel=”stylesheet”
        href=”//unpkg.com/[email protected]/public/base.css”>
  <link rel=”stylesheet”
        href=”//unpkg.com/[email protected]/public/chat.css”>
</head>
<body>
  <div id=”app” class=”flex flex-column”></div>
<script src=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js”>  </script>
  <script src=”//unpkg.com/@feathersjs/client@^4.3.0/dist/feathers.js”></script>
  <script src=”/socket.io/socket.io.js”></script>
  <script src=”//unpkg.com/@feathersjs-offline/client@^1.0/dist/feathersjs-offline-client.min.js”></script>
  <script src=”client.js”></script>
</body>
</html>

В client.js нам нужно применить обертку следующим образом:

// …
// Use localStorage to store our login token
client.configure(feathers.authentication());
// Wrap ‘messages’ to support the own-data offline-first principle
client.use(‘messages’, memory());
feathersjsOfflineClient.owndataWrapper(client, ‘messages’, {});
// or if we connect to a service on at Feathers server
client.use(‘messages’, feathersjsOfflineClient.Owndata({}));
// …

Для own/net это почти то же самое:

<html lang=”en”>
<head>
  <meta http-equiv=”content-type” content=”text/html;charset=utf-8">
  <meta name=”viewport” content=”width=device-width,
       initial-scale=1.0, maximum-scale=1, user-scalable=0" />
  <title>FeathersJS chat</title>
  <link rel=”shortcut icon” href=”favicon.ico”>
  <link rel=”stylesheet”
        href=”//unpkg.com/[email protected]/public/base.css”>
  <link rel=”stylesheet”
        href=”//unpkg.com/[email protected]/public/chat.css”>
</head>
<body>
  <div id=”app” class=”flex flex-column”></div>
  <script src=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js”></script>
  <script src=”//unpkg.com/@feathersjs/client@^4.3.0/dist/feathers.js”></script>
  <script src=”/socket.io/socket.io.js”></script>
  <script src=”//unpkg.com/@feathersjs-offline/client@^1.0/dist/feathersjs-offline-client.min.js”></script>
  <script src=”client.js”></script>
</body>
</html>

И, конечно же, в client.js нам нужно применить обертку следующим образом:

// …
// Use localStorage to store our login token
client.configure(feathers.authentication());
// Wrap ‘messages’ to support the own-net offline-first principle
client.use(‘messages’, memory());
feathersjsOfflineClient.ownnetWrapper(client, ‘messages’, {}));
// or if we connect to a service on at Feathers server
client.use(‘messages’, feathersjsOfflineClient.Ownnet({}));
// …

Вот ссылка, которая поможет вам выбрать между own-data и own/net.

Если вы используете для своего клиента упаковщик JavaScript, нам нужно добавить в ваш файл пару строк, определяющих службу, например. app/app.js (или как угодно). На этот раз мы только покажем, как использовать own-data оболочку, поскольку own-net аналогична.

// …
import { owndataWrapper } from ‘@feathersjs-offline/client’;
// …
// Wrap the service; use the own-data principle
app.use(‘messages’);
owndataWrapper(app, ‘messages’);

Опять же, здесь - это ссылка, которая поможет вам выбрать между own-data и own-net.

Для сервера это еще проще, как вы можете видеть ниже:

// …
import { realtimeWrapper } from ‘@feathersjs-offline/server’;
// …
// Wrap the service; supports both own-data/own-net principles
app.use(‘messages’, Messages());
realtimeWrapper(app, ‘messages’, {});

Надеюсь, вы согласитесь - это просто! 3 строки в коде клиентов и 2 строки в серверах. Очень просто.

Если вам интересно увидеть Перья в автономном режиме в действии, вам следует клонировать https://github.com/feathersjs-offline/simple-example.git, которое представляет собой демонстрационное (простое) приложение, иллюстрирующее внутреннюю работу own-data / own-net с помощью (простой) анимации.

Последнее слово

Мы надеемся, что вам понравится Feathers Offline-first, и вам стоит попробовать - по крайней мере, вы должны взять Feathers на пробу - вам это понравится!