микрофронтенд simple-img

Предыдущие интеграции подключались к веб-компонентам в качестве способа связи нашего фронтенда с микросервисом, но это в основном работало в любом случае. Эти были построены в гораздо большей степени на FaaS или Function As A Service способе мышления о своих возможностях.

simple-img отличается тем, что микросервис непосредственно отвечает за очень специфический веб-компонент, а веб-компонент намеренно спроектирован так, чтобы требовать этот микросервис для выполнения своей функции.

• Демонстрация Codepen с тегом
• Демонстрация (добавление изображения в поле ввода)
• npm install @lrnwebcomponents/simple-img
• источник микросервиса
• источник веб-компонента

Disclaimer
This element is mostly for prototype purposes 
and I've made it as part of our journey toward 
using things like this.
We might use this in production at some point 
(or opt into it) but currently do not have 
plans to leverage this specific tag.

Область применения

Я родом из PHP / Drupal (Drupal 4.6, что за дела), где у нас был удивительный монолит, который мог обрабатывать сжатие изображений и манипуляции с ними при загрузке. Для работы с изображениями вам нужно было только…

• Запустить раздутую CMS
• Установить и настроить правильные серверные пакеты
• Разрешить пользователям загружать изображения
• Запустить специальные модули CMS, которые обрабатывают загрузку и процесс с помощью серверного пакета
• Использовать шаблонизатор CMS для автоматического создания производных конечных точек.
• Никогда не отходите от CMS, иначе все пропадет.

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

Простой

АДЪЕКТИВ

1. легко понять или сделать; не представляет трудностей
2. скрытие сложной функциональности с целью оптимизации работы пользователя на нижнем уровне

simple-img стремится взять общие требования к манипулированию изображениями / изменению размера и сделать так, чтобы API веб-компонента мог напрямую общаться с микросервисом, чтобы это произошло. Кодовая ручка, на которую ссылались выше, иллюстрирует опции в обновляемом пространстве, но вот регистрация, чтобы увидеть поддерживаемые в настоящее время опции.

  // imgManipulation
  MicroFrontendRegistry.add({
    endpoint: "/api/services/media/image/manipulate",
    name: "@core/imgManipulate",
    title: "simple image manipulation",
    description: "scale, resize, convert and perform operations to manipulate any image",
    params: {
      src: "image source",
      height: "height in numbers",
      width: "width in numbers",
      quality: "0-100, jpeg quality to reduce image by if jpeg",
      fit: "how to crop if height and width are supplied (https://sharp.pixelplumbing.com/api-resize)",
      watermark: "SRC for an image to watermark on the output",
      wmspot: "nw,ne,se,sw for moving the location of the watermark",
      rotate: "https://sharp.pixelplumbing.com/api-operation#rotate",
      format: "png, jpg, gif, webp",
    },
  });

Simple image — отличный пример использования веб-компонентов для прямого взаимодействия с микросервисом таким образом, что отношения «микрофронтенда» полностью отделены от любой библиотеки или фреймворка. simple-img построен на базовом классе Vanilla HTMLElement, хотя у него есть зависимости от MicroFrontendRegistry, так что он не свободен от зависимостей, но весит 2.8kb.

Используя sharp, мы можем легко применять многие распространенные преобразования к любому изображению, включая водяные знаки! Сеть Vercel’s Edge помогает обеспечить кэширование результата, а небольшая доработка MicroFrontendRegistry с помощью метода MicroFrontendRegistry.url() даст нам URL для запроса преобразования изображения, чтобы его можно было использовать и в тегах img.

Разбивка видео

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