단순 img 마이크로프론트엔드

이전 통합은 프런트엔드가 마이크로서비스와 통신하는 방식으로 웹 구성 요소에 연결되었지만 대부분 모든 곳에서 작동했습니다. 이들은 기능에 대해 생각하는 FaaS 또는 Function As A Service 방식으로 훨씬 더 많이 구축되었습니다.
simple-img는 마이크로가 매우 특정한 웹 구성 요소를 직접 담당하고 웹 구성 요소가 기능을 수행하기 위해 이 마이크로 서비스를 필요로 하도록 의도적으로 설계되었다는 점에서 다릅니다.

Codepen demo with tag

Demo (입력 필드에 이미지 추가)

npm install @lrnwebcomponents/simple-img

microservice source

web component source

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 whaaaat)에서 왔으며 업로드 시 이미지 압축 및 조작을 처리할 수 있는 놀라운 단일체를 가지고 있었습니다. 이미지를 조작하려면...

부풀려진 CMS 실행

올바른 서버 패키지 설치 및 구성

사용자가 이미지를 업로드하도록 허용

서버 패키지를 사용하여 업로드 및 프로세스를 처리하는 특정 CMS 모듈 실행

CMS 템플릿 엔진을 활용하여 끝점에 자동으로 도달하여 미분을 생성합니다

.

CMS에서 벗어나지 않으면 모든 것이 사라집니다

.

자, 이것은 약간 비열하지만 사실이기도 합니다. 이미지를 압축하고 조작하려면 이미지를 제공하는 시스템에서 벗어날 필요가 없습니다. 하지만 우리가 모놀리스에서 멀어짐에 따라 단일 입력 방식에서 이미지 조작을 얻을 수 있는 방법이 있고 향후 다른 모놀리스로 이동할 때 해당 기능을 이식할 수 있는 방법이 있다고 생각했습니다.

단순한

ADJECTIVE

1. easily understood or done; presenting no difficulty
2. hiding complex functionality in order to optimize the user experience downstream

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-img는 VanillaHTMLElement 기본 클래스를 기반으로 하지만 MicroFrontendRegistry에 대한 종속성이 있으므로 종속성이 없는 것은 아니지만 weighs in at 2.8kb 입니다.

sharp을 사용하여 워터마킹을 포함하여 모든 이미지에 많은 일반적인 변환을 쉽게 적용할 수 있습니다! Vercel의 에지 네트워크는 결과를 캐시하고 MicroFrontendRegistry.url() 메서드를 통해 MicroFrontendRegistry를 약간 조정하면 img 태그에서도 활용할 수 있도록 이미지 변환을 요청하는 URL을 제공합니다.

동영상 고장

이것은 이전에 복잡한 문제로 부딪힌 적이 있기 때문에 이 접근 방식을 추구하기 위해 생산하는 데 가장 좋아하는 태그 중 하나였습니다. 복잡하게 들리겠지만, 이 비디오가 수행해야 하는 작업이 얼마나 복잡한지 비교하여 이것이 얼마나 쉬웠는지 분석하기를 바랍니다.