StencilJS 및 웹 작업자: 동화

옛날 옛적에 StencilJS이라는 웹 구성 요소를 생성하고 고성능 웹 앱을 빌드하는 컴파일러가 있었습니다. 지금까지 만들어진 모든 빌드 시간 도구 중에서 모든 주요 프레임워크에서 작동하는 더 빠르고 더 유능한 구성 요소를 빌드하는 것이 목표였습니다.

옆집 인터넷에는 한 소년(나 😉)이 살고 있었다. 그리고 소년은 컴파일러가 해가 갈수록 점점 더 효율적이고 개발자 친화적으로 성장하는 것을 지켜보았습니다.

어느 날, 그가 사랑하는 프로젝트DeckDeckGo 에서 새로운 것을 개발하던 중 소년은 지금까지 시도하지 않은 컴파일러의 기능인 Web Workers 의 통합을 실험할 생각을 했습니다.

그는 그 결과에 너무나 충격을 받아 그 마법 같은 만남을 공유해야 했습니다.

제1장: 아브라카다브라

한 소년이 블로그 게시물을 게시하지만 알려지지 않은 비밀 주문을 공개하지 않습니다. 한편, 마법의 단어 없이는 좋은 동화가 없을 것입니다.

다행스럽게도 컴파일러는 "documentation"이라는 매우 잘 문서화된 그리모어를 통해 누구에게나 마법을 공개적으로 공유했습니다.

그러한 구현을 기술적으로 물리치려는 용감한 기사 여러분, 이 주문을 살펴보라고 제안하지만 반대로 퀘스트를 찾으러 여기에 있는 경우 나와 함께 있으면서 나머지 이야기를 들려드리겠습니다.

2장: 카멜롯 초기화

King Arthur와 the Round Table에는 Camelot이 있었고, 우리 개발자에게는 은유적으로 성으로 표현될 수 있는 Web Components와 Shadow DOM이 있습니다. 이것이 우리가 새로운 마술을 실험하기 전에 새로운 Stencil 플레이그라운드를 초기화하는 이유입니다.

npm init stencil

또한 소년이 시도한 정확한 공식을 복제하기 위해 Marked.js을 사용하여 요새를 강화하여 Markdown에서 HTML로 마법의 문장을 렌더링하는 구성 요소의 목표를 부여합니다.

npm i marked @types/marked

약간의 박격포를 찾았으므로 수명 주기componentWillLoad에서 마크다운을 HTML로 변환하고 로컬 상태를 사용하여 적용함으로써 렌더링 주문을 재현하는 것을 목표로 하는 구성 요소를 만들고 있습니다.

import { Component, h, State } from '@stencil/core';

import { parseMarkdown } from './markdow';

@Component({
  tag: 'my-camelot',
  shadow: true,
})
export class MyCamelot {

  @State()
  private markdownHtml: string;

  async componentWillLoad() {
    this.markdownHtml = await parseMarkdown(`# Choose wisely

For while the true Grail will **bring you life**, the false Grail will take it from you.`
    );
  }

  render() {
    return <div innerHTML={this.markdownHtml}></div>;
  }
}

또한 markdown.ts를 호출할 수 있는 별도의 파일에서 마법 기능을 외부화합니다.

import marked from 'marked';

export const parseMarkdown = async (text: string) => {
  const renderer = new marked.Renderer();

  return marked(text, {
    renderer,
    xhtml: true,
  });
};

아무것도 두려워하지 않고 로컬 컴퓨터에서 위의 코드npm run start를 실행하는 일부 사용자는 다음과 같은 결과를 볼 수 있습니다.

3장: 주문 외우기

소년은 이미 Web Workers에 기사를 게시했는데, 하나는 기본JavaScript integration in React 애플리케이션에 대한 기사이고 다른 하나는 그들의integration with Angular .

Javascript 버전에서 작업자가 라이브러리를 사용할 수 있도록 관리하는 것부터 리스너를 사용하고 객체를 생성하여 이들을 로드하는 것까지, 특정 관점에서 작업이 거의 필요하지 않더라도 여전히 더 많은 작업과 코드가 필요했습니다.

반대로 Stencil은 다음과 같은 독특한 주문을 호출하여 이 모든 단계를 마법처럼 만들었습니다. mv markdown.ts markdown.worker.ts
실제로 다음 스크린샷에서 알 수 있듯이 src로 끝나는 .worker.ts 디렉토리 내의 모든 TypeScript 파일은 Stencil의 컴파일러에 의해 자동으로 작업자를 사용하여 소년이 아는 한 가장 마법 같은 Web Worker 레시피를 만듭니다. 시도해본 적 🔥.

발문

Stencil’s 컴파일러는 이러한 종류의 통합을 단순화하여 모든 잠재력을 다시 한 번 입증했습니다. 웹 작업자와 함께 그들은 많은 아기, 많은 놀라운 웹 구성 요소 및 응용 프로그램을 갖게 되기를 바랍니다.

무한과 그 너머로!

다윗


다음 프레젠테이션을 위해 DeckDeckGo로 저에게 연락할 수 있습니다.