"Cookbox": техническая сторона

Если вы уже начали вести свою кулинарную книгу с помощью Cookbox'a, то вам наверняка будет интересно как же работает это приложение изнутри. Если же вы еще ничего о нем не слышали, то рекоммендую сначала прочитать мою ознакомительную статью.

Если вкратце, то это небольшое React-приложение для хранения кулинарных рецептов в твоем Дропбоксе. Что это значит? Что в качестве бэкенда используется Dropbox (приложение для хранения и синхронизации файлов) и на фронтэнде - всеми нами любимый React (javascript библиотека для разработки пользовательских интерфейсов). О них и поговорим.

Dropbox

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

Также Дропбокс имеет неплохо документированное API для работы с JavaScript, включая аутентификацию. Когда только мы начинали делать Кукбокс, у них даже было Datastore API, так что данные можно было бы хранить в настоящей бд, что невероятно удобно. Но, к сожалению, они его очень быстро закрыли. Пришлось отказаться от этой идеи и использовать  API для работы с файлами. Поэтому сейчас хранение всех данных Кукбокса происходит в json-файле.

Как же хранятся данные в этом файле? Это массив рецептов, где каждый рецепт представлен объектом следующего вида:

{
  slug: string,
  title: string,
  description: string,
  media: array of objects,
  ingridients: array of strings,
  body: string,
  url: string,
  favorite: boolean,
  hours: number,
  minutes: number,
  portion: string,
  state: string,
  tags: array of strings,
  category: string
}

Все максимально просто. Только самое необходимое.

Закрытие Datastore API привело к необходимости создания обертки над файловым API, которая обеспечивала бы доступ к данным. Хотелось создать что-то универсальное и в то же время легко изменяемое. И тут появилась идея о создании Luggage.

Luggage

Лагэдж - это библиотека для работы с Дропбоксом. Она обеспечивает взаимосвязь приложения с бэкендом. Без привязки к конкретному приложению. Идея в том, чтобы при каких-либо изменения в АПИ Дропбокса, менялся бы код лагэджа и это никак не влияло бы на работу основного приложения. А в случае необходиости была бы возможность заменить бэкенд на другой, написав сответствующую библиотеку для другого хранилища данных.

У Лагэджа очень простой АПИ. Пример подключения к Дропбоксу, чтение коллекции и поиск по заданному ключу:

const backend = new DropboxBackend(token);
const store = new Luggage(backend);
const articles = store.collection('articles');

articles.where({ author: 'John Doe' }).read().then((articles) => {
  console.log('John\'s articles:', articles);
});

Основные функции Лагэджа: добавление, удаление, обновление записи, поиск по коллекции одной записи и фильтрация.

Лагэдж получился настолько простым и удобным, что лучше его рассматривать не в контексте прослойки Кукбокса, а как полноценную библиотеку, чем он и является. А Кукбокс - это всего лишь один из примеров его использования. На основе Лагэджа можно писать свои приложения.

Так что смело пользуйтесь =) Все исходники в открытом доступе.

React

Вся клиентская часть Кукбокса написана на React'e. Здесь использован стандартный стек библиотек.

• react-redux -библиотека для работы с глобальным стейтом
• react-router-dom - библиотека для навигации
• redux-saga - работа с сайд-эффектами, такими как обращение к бэкенду
• reselect - библиотека для преобразования данных
• lorgnette - набор линз для иммутабельных данных
• tiny-slider - небольшой, но хорошо настраеваемый слайдер картинок
• yup - валидация данных

Большая часть кода покрыта jest-тестами, это: экшены, собственные константы и либы, редьюсеры и саги.

Stylesheets

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

Резиновый дизайн + поддержка мобильных телефонов.

Аутентификация

Еще одной особеностью использования Дропбокса в качестве бэкенда является аутентификация. Само приложение "Кукбокс" не хранит никакой информации о пользователе. После логина через Дропбокс токен аутентификации сохраняется в сесионное хранилище и используется для последующих запросов.

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

Прочее

Разработка Кукбокса позволила опробовать множество новых подходов и библиотек, а так же подтолкнула на создание нескольких своих. На финальных этапах разработки попробовали новые возможности Gitlab CI для автоматизации запуска тестов и деплоя на сервер. Было приятно узнать, что такие продвинутые схемы, с созданием Docker образа, пушем его в приватный репозиторий и последующим разворачиванием на сервере, стали доступны "простым смертным", причем совершенно бесплатно.