화장실 개방을 선포하다

오픈 웹 구성 요소 권장 사항

안녕하세요!👋
우리는 open-wc, 오픈소스와 웹 구성 요소 애호가들이다.Google의 목표는 모든 사람에게 웹 구성 요소를 만들고 공유하는 데 사용되는 강력하고 전투적인 설정을 제공하는 것입니다.
많은 웹 개발자들이 무서운 자바스크립트 피로를 겪었다.우리의 건의가 있기 때문에, 우리는 당신이 거의 모든 일에 모두가 알고 있는 기본적인 해결 방안이 가져오는 평화로운 마음을 누릴 수 있기를 바랍니다.IDE에서 CI까지 Open wc가 덮어썼습니다.
우리는 웹 구성 요소 개발이 당신의 배경이나 이전의 경험이 어떻든지 간에 모든 사람에게 접근할 수 있고 접근할 수 있기를 바랍니다.따라서 Google의 조언은 사용하기 쉽고 언제든지 사용할 수 있으며 웹 구성 요소 개발의 각 방면에서 얻고자 하는 개발자들의 체험을 제공하는 데 목적을 두고 있습니다.
우리는 당신의 코드에 있어서 브라우저 표준에 접근하는 것이 가장 좋은 장기 투자가 될 것이라고 굳게 믿습니다.그것은 우리의 모든 건의의 기초이다. 이것은 때때로 우리가 유행하는 특성이나 기능을 추천하지 않는다는 것을 의미한다.이것 또한 우리가 새로운 브라우저 표준을 더욱 빨리 채택하고 추천할 수 있다는 것을 의미한다.

웹 구성 요소를 선택해야 하는 이유

지난 몇 년 동안 구성 요소를 바탕으로 하는 웹 응용 프로그램 개발 모델이 보급되었고 자바스크립트 커뮤니티는 다양한 라이브러리와 방법으로 왕성하게 발전했다.2012년에 구글(Google)은 웹의 원본 구성 요소 모델을 표준화하기 시작했고 몇 년 동안의 개방적인 개발을 거쳐 2019년에 모든 주요 브라우저에서 성공적으로 실시되었다.본문을 작성할 때 10퍼센트가 넘는 페이지 보기가 웹 구성 요소를 포함합니다.
우리는 웹 구성 요소가 중용성, 상호작용성, 봉인 등 문제에 대해 표준적인 해결 방안을 제공했다고 믿는다.또한 브라우저를 사용하는 본 컴퓨터 구성 요소 모델이 응용 프로그램의 사용 수명을 연장할 것이라고 믿습니다.표준 기구가 유류 API를 유지하는 데 전력을 기울였기 때문에 웹은 매우 강한 향후 호환성 전통을 가지고 있다.open-wc에서 웹 구성 요소 개발을 시작해야 할 모든 것을 발견할 수 있습니다.

발전시키다

저희 developing 부분에서 코드를 작성하는 데 필요한 모든 정보를 찾을 수 있습니다.실용적인 코드 프레젠테이션부터 접근성, 믹스, 튜토리얼과 블로그 글까지.
Dell은 다음과 같은 다양한 대화형 프레젠테이션을 제공하여 코드 작성을 신속하게 시작할 수 있도록 지원합니다.

먼저 웹 구성 요소에 대한 더 많은 정보를 알고 싶으시면 다음 블로그 글을 통해 웹 구성 요소 개발에 튼튼한 기반을 다지는 것을 권장합니다.

포니 볼스 저

파스카 셀프

테스트

저희는 Karma, Browserstack, Wallaby가 있는 testing setup을 제공할 뿐만 아니라 테스트 조수를 제공하여 다음과 같은 도움을 드리겠습니다.

고정 장치 제작:

CAPTION: code snippet
import { html, fixture } from '@open-wc/testing-helpers';

it('can instantiate an element with properties', async () => {
    const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
    expect(el.foo).to.equal('bar');
}

DOM 비교:

CAPTION: code snippet
import { html, fixture } from '@open-wc/testing-helpers';

it('has the following dom', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'} </h1>  </div>`);
    expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
});

관리 시간:

CAPTION: code snippet
import { nextFrame, aTimeout, html, fixture } from '@open-wc/testing-helpers';

const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
el.foo = 'baz';
await nextFrame();

expect(el.shadowRoot.querySelector('#foo').innerText).to.equal('baz');

여러 사용자 정의 요소를 정의합니다.

CAPTION: code snippet
import { fixture, defineCE } from '@open-wc/testing-helpers';

const tag = defineCE(class extends MyMixin(HTMLElement) {
    constructor() {
        super();
        this.foo = true;
    }
});
const el = await fixture(`<${tag}></${tag}>`);
expect(el.foo).to.be.true;

애플리케이션 이니시에이터

많은 개발자들은 일반적으로'자바스크립트 피로'라고 불리는 느낌을 겪었고 자바스크립트 생태계의 모든 신기술을 따라가야 한다는 압도적인 느낌을 받았다.JavaScript 도구는 무서운 학습 곡선을 가지고 있을 수 있으며, 설정하면 종종 사람을 낙담하게 할 수 있다.무엇이 정확한 도구입니까?나는 어떤 공구를 사용해야 합니까?이 공구들은 어떻게 작동합니까?
우리의 건의는 당신의 고통을 덜어주고 재미있는 부분으로 바로 넘어갈 수 있도록 하는 데 목적을 두고 있다.발전하다.따라서 만약에 기능이 강한 설정을 직접 개발하고 가장 좋은 브라우저 표준을 이용하고 싶다면 우리의 open-wc-app-starter이 당신에게 적합할 수 있습니다!

현장 데모 here
Open wc app starter 는 다음과 같은 기능을 통해 전체 구성을 제공합니다.

모듈 해상도

자동 모듈 유형 선택

HTML, JS 및 CSS 축소판

es2015와 es5 생산량

은 webpack-babel-multi-target-plugin을 사용하여 저희는 응용 프로그램의 es5와 es2015 버전을 출력합니다.nomodule trick을 사용하면 우리는 현대 브라우저에서es2015 코드를 제공하고 낡은 브라우저(특히 IE11)에서es5 코드를 제공할 수 있다.이것은 현대 브라우저에서 응용 프로그램의 크기를 크게 감소시켰다.

재생기 없는 작동 시/변환

용도별 분류
브라우저 지원 및 사용량에 따라

언어 다각형 채우기를 추가합니다.이것은 응용 프로그램의 초기 패키지를 크게 줄일 것이다.

구문 및 javascript API

우리의 설정은 표준 자바스크립트 문법과 브라우저 API만 지원합니다.Dell은 3단계 제안을 지원합니다. 이러한 제안은 중요한 가치를 증대하고 지원이 쉬우며 성능 저하를 초래하지 않습니다.저희가 지지하는 몇 가지 건의는 다음과 같습니다.

동적 가져오기

수입.원.주소:

테스트 키트

, Karma 포함

ESLint 면 벨벳으로 더 예쁘고 약속

자세한 내용은 open-wc-app-starter here에서 확인할 수 있습니다.우리는 가장 좋고 사용자 친선적인 설정을 제공하기 위해 노력합니다. 귀하의 피드백은 우리에게 매우 가치가 있습니다. 따라서 귀하가 어떤 것이 부족하거나 피드백이 있다고 생각되면 언제든지 저희 환매 협의에 문제를 만들어 주십시오.

더 많아

기타 권장 사항은 linting, demoing, building, publishing, automating과 generators 사이에 포함됩니다.현재 프로젝트에 저희 설정을 삽입하고 재생할 수 있는 here 기대가 있습니다.
Dell의 아이디어 및 권장 사항에 대해 자세히 알고 싶으시면 을 참조하십시오.
우리의 목표는 당신이 가능한 한 빨리, 쉽게 설치를 완성하도록 돕는 것입니다.만약 우리의 건의가 무엇을 빠뜨렸다고 생각하신다면 언제든지 저희에게 연락 주십시오.권장 사항과 모범 사례는 시간이 지남에 따라 달라질 수 있습니다.

github 대화에 참여하세요!

우리는 당신의 피드백이나 문제를 기꺼이 청취합니다.다음 주소로 문의하실 수 있습니다.

질문이나 피드백이 있으면 언제든지 저희 #open-wc에서 질문을 열어 주십시오.

채널의 중합물 이완에서 저희를 찾을 수 있습니다.
당신은 this link에 방문하여 중합물 이완을 넣을 수 있습니다.

제안 및 파일은 다음 웹 사이트에서 확인할 수 있습니다. open-wc.

너도 트위터에서 우리 중 일부를 찾을 수 있다.
🚽 open-wc'사랑과 함께'.