litelementとtypescriptから始める

そばに:ルイスルイス
ウェブ技術と角度におけるGoogle Developer Experder
強力なフレームワークとライブラリの使用は、今日非常に普及しています.我々は、角度の名前を付けることができます反応します.他にもJS、Vue、Svelteなど.
これらのコンポーネントベースのフレームワークを使用せずにWebアプリケーションを構築するのは想像もできません.これらのオプションのために、コンポーネントは再利用可能で、構成可能なウィジェットです、彼らはカスタム振舞いとスタイルを提供することができます、そして、彼らはアプリケーションのためにビルディングブロックとして使われます.
これらのフレームワークの間のコンポーネントを共有できますか?すべてのフレームワーク/ライブラリは、コンポーネントを構築するためのカスタムAPI定義を持っています.

litelement

公式lit素子websiteによると

LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.

これは、JavaScriptを使用してOHPパラダイムを使用することができます.以下の例で説明しましょう.

litelementとJavaScript

JavaScriptを使用して最初のカスタムWebコンポーネントを作成するには、次のようにして外観と機能を実装するクラスを定義する必要があります.

import { LitElement, html } from 'lit-element';

class HelloComponent extends LitElement {
  static get properties() { // JavaScript way to define custom properties
    return { name: { type: String } };
  }

  constructor() {
    super();
    this.name = 'Luis'; // Default value goes here.
  }

  render() { // Defines a template to be "rendered" as part of the component.
    return html`Hello ${this.name}. Welcome to LitElement!`;
  }
}

// Register as a custom element named <hello-component>
customElements.define('hello-component', MyElement);

litelementとtypescript

代わりに、いくつかのデコレータを使用して、最初のWebコンポーネントを次のように記述することで、PowerScriptのパワーを使用できます.

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('hello-component') //Decorator that register as a custom element named <hello-component>
export class HelloComponent extends LitElement {
  @property({type: String}) name = 'Luis'; // You can assign the default value here.

  render() { // Defines a template to be "rendered" as part of the component.
    return html`Hello, ${this.name}. Welcome to LitElement!</p>`;
  }
}

プロジェクトの新しいコンポーネントがあります.HTMLファイルの新しいメンバーのように、テンプレートファイルで使用できます.

  <hello-component></hello-component>
  <hello-component name="George"></hello-component>

最新の例でプレイしたいですか?以下を参照してください.
Embedded content: https://stackblitz.com/edit/litelement-hello?embed=1&file=index.html
あなたが異なるJavaScriptフレームワークで働いていても、LitElementはあなたの会社または組織の中で簡単に共有されるあなたのウェブ構成要素を構築するのを助けます.

プロジェクトの作成

だから今、あなたはプロジェクトを起動し、LITElementを使用してWebコンポーネントに基づいてWebアプリケーションを構築することを考えています.すごい!
プロジェクトを最初から起動できます

リテラルをnpm i lit-elementでインストールする必要があります

そして、npm i typescriptでTypescriptをインストールしてください

tsconfig.jsonファイルの作成方法は?

任意のビルドシステムを追加して設定しますか?

今、あなたはeslintを追加して、最高の習慣

に従う必要があるでしょう

は、ユニットテストサポートとカルマを加え続けます

あなたはポイントを取得します.

プロジェクト足場

あなたはopen-wcイニシアティブからproject generatorによってカバーされ、ほんの数秒でtypescriptサポートと一般的なツールを使用して最初のプロジェクトを作成できます.
プロジェクトを生成する

npm init @open-wc
# Select "Scaffold a new project" (What would you like to do today?)
# Select "Application" (What would you like to scaffold?)
# Mark/Select "Linting", "Testing", "Demoing" and "Building" (What would you like to add?)
# Yes (Would you like to use TypeScript?)
# Mark/Select "Testing", "Demoing" and "Building" (Would you like to scaffold examples files for?)
# my-project (What is the tag name of your application/web component?)
# Yes (Do you want to write this file structure to disk?)
# Yes, with npm (Do you want to install dependencies?)

この出力は次のようになります.

次のプロジェクト構造が生成されます.

./
├── my-project/
│ ├── .storybook/
│ │ ├── main.js
│ │ └── preview.js
│ ├── src/
│ │ ├── my-project.ts
│ │ ├── MyProject.ts
│ │ └── open-wc-logo.ts
│ ├── stories/
│ │ └── my-project.stories.ts
│ ├── test/
│ │ └── my-project.test.ts
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── custom-elements.json
│ ├── index.html
│ ├── karma.conf.js
│ ├── LICENSE
│ ├── package.json
│ ├── README.md
│ ├── rollup.config.js
│ └── tsconfig.json

このプロジェクトは、open-wc、lit-element、typescript、eslint、prettier(テスト)、karma最後に、実行のstorybookコマンドを実行してアプリケーションの開発プレビューを行います.

Visual Studioコードの拡張

次のVisual Studioのコード拡張子を使用して、Webスクリプトを構築するために非常に便利です

lit-html .この拡張モジュールは、テンプレートスクリプト文字列内のHTMLコードの構文強調表示とintellisenseを追加します.

LitElement Snippet .この拡張モジュールは、rollupデコレータ、自動生成プロパティ、npm run start関数とはるかにクラスを自動生成するLitElementコードスニペットを提供します.

LitElement and Polymer v2/v3 Snippets .また、以前のものと同様に、いくつかのJavaScriptとHTMLスニペットをLitElementとPolymerのために含むこの拡張モジュールをインストールできます.

結論

LitElementは、Webコンポーネントの標準に基づいているので、軽量なWebアプリケーションを構築するための優れた代替手段です.もちろん、これらのコンポーネントを使用してスパ(単一ページアプリケーション)を構築するか、さらにPWA(プログレッシブWebアプリケーション)機能を追加できます.
TypesScriptの助けを借りて、より良い開発者の経験とWebコンポーネントを構築するためのより多くの可能性を見ることができます.
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、または反応、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、コンサルテーションthisdotlabs.comをご覧ください.
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶには、thisdot.coをご覧ください.