Chrome Dev Summit 2014 - Polymer로 앱을 만들어 보세요

작년에 Polymer팀은 개발자에게 자체 요소를 만드는 방법을 가르치는 데 많은 시간을 보냈습니다. 이로 인해 생태계가 빠르게 성장하고 있으며, 대부분의 경우 Polymer의 Core 및 Paper와 Mozilla 팀이 만든 벽돌 요소가 포함됩니다.

개발자가 자신의 요소를 만드는 데 더 익숙해지고 애플리케이션 빌드에 대해 생각하기 시작하면서 다음과 같은 여러 가지 의문이 제기됩니다.

  • 애플리케이션의 UI를 어떻게 구조화해야 하나요?
  • 여러 상태를 통해 전환하려면 어떻게 해야 하나요?
  • 실적을 개선하기 위한 전략은 무엇인가요?
  • 그렇다면 오프라인 환경은 어떻게 제공해야 할까요?

Chrome Dev Summit에서 소규모 연락처 애플리케이션을 만들고 제가 진행한 프로세스를 분석하여 이러한 질문에 답하려고 했습니다. 결론은 다음과 같습니다.

구조

애플리케이션을 결합하고 재사용할 수 있는 모듈식 조각으로 분해하는 것이 웹 구성요소의 중앙 테넌트입니다. Polymer의 core-* 및paper-* 요소를 사용하면 페이퍼 툴바, 페이퍼-아이콘-버튼 등의 작은 조각으로 쉽게 시작할 수 있습니다.

개발자가 애플리케이션을 더 빠르게 빌드할 수 있도록 지원하는 Polymer

그리고 컴포지션의 힘을 통해 여러 요소와 결합하여 애플리케이션 스캐폴드를 만들 수 있습니다.

Polymer를 사용해 웹 구성요소를 더 달콤하게 만들어 줘

일반 스캐폴드가 준비되면 자체 CSS 스타일을 적용하여 브랜드 고유의 환경으로 변환할 수 있습니다. 구성요소를 사용하여 이렇게 하면 동일한 앱 빌드 기본 요소를 활용하면서 매우 다른 환경을 만들 수 있다는 장점이 있습니다. 스캐폴드가 준비되면 콘텐츠에 대해 생각해 볼 수 있습니다.

많은 콘텐츠를 처리하는 데 특히 적합한 요소 중 하나는 core-list입니다.

Polymer를 사용해 웹 구성요소를 더 달콤하게 만들어 줘

core-list는 데이터 소스 (기본적으로 객체의 배열)에 연결할 수 있으며 배열의 각 항목에 대해 템플릿 인스턴스를 스탬프로 만듭니다. 템플릿 내에서 Polymer의 데이터 결합 시스템을 활용하여 콘텐츠를 빠르게 연결할 수 있습니다.

화면전환

앱의 다양한 섹션을 설계하고 구현했으므로 다음 작업은 섹션 간에 실제로 이동하는 방법을 파악하는 것입니다.

core-animated-pages는 여전히 실험용 요소이지만 애플리케이션에서 여러 상태 간에 전환하는 데 사용할 수 있는 플러그형 애니메이션 시스템을 제공합니다.

Polymer 신고 카드 개선 필요

그러나 애니메이션은 퍼즐의 절반에 불과합니다. 애플리케이션은 URL을 제대로 관리하기 위해 이러한 애니메이션을 라우터와 결합해야 합니다.

웹 구성요소 라우팅의 세계에서는 명령형과 선언형이라는 두 가지 방식으로 라우팅됩니다. core-animated-pages를 두 접근 방식 중 하나와 함께 사용하는 것이 프로젝트 요구사항에 따라 유효할 수 있습니다.

명령형 라우터 (예: Flatiron의 디렉터)는 일치하는 경로를 수신 대기한 다음 core-animated-pages에 선택된 항목을 업데이트하도록 지시할 수 있습니다.

Polymer 신고 카드 개선 필요

이는 경로가 일치하는 후 다음 섹션이 전환되기 전에 작업을 수행해야 할 때 유용할 수 있습니다.

반면 선언적 라우터 (예: app-router)는 실제로 라우팅과 core-animated-pages를 단일 요소로 결합할 수 있으므로 둘을 더 효율적으로 관리할 수 있습니다.

Polymer 신고 카드를 개선해야 합니다.

보다 세밀하게 제어하려면 more-route와 같은 라이브러리를 참조하세요. 이 라이브러리는 데이터 결합을 사용하여 core-animated-pages와 결합될 수 있으며 두 가지 모두의 장점을 제공할 수 있습니다.

성능

애플리케이션이 구체화됨에 따라 성능 병목 현상, 특히 네트워크와 관련된 모든 문제를 주의 깊게 관찰해야 합니다. 모바일 웹 애플리케이션에서 가장 느린 부분인 경우가 많기 때문입니다.

웹 구성요소 폴리필을 조건부로 로드하면 성능이 쉽게 향상됩니다.

Polymer 신고 카드 개선 필요

플랫폼에서 이미 완전한 지원을 제공하고 있다면 이 모든 비용이 발생할 이유가 없습니다. 새 webcomponents.js 저장소의 모든 출시에서 폴리필도 독립형 파일로 분할되었습니다. 이는 폴리필의 하위 집합을 조건부로 로드하려는 경우에 유용합니다.

<script>
    if ('import' in document.createElement('link')) {
    // HTML Imports are supported
    } else {
    document.write(
        '<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
    }
</script>

Vulcanize와 같은 도구를 통해 모든 HTML 가져오기를 실행하면 네트워크 측면에서 상당한 이점을 얻게 됩니다.

Polymer 신고 카드를 개선해야 합니다.

Vulcanize는 가져오기를 단일 번들로 연결하여 앱의 HTTP 요청 수를 상당히 줄입니다.

오프라인

그러나 성능이 뛰어난 앱을 빌드한다고 해서 연결이 거의 없거나 전혀 없는 사용자의 딜레마가 해결되지는 않습니다. 다시 말해 앱이 오프라인으로 작동하지 않는다면 실제로는 모바일 앱이 아닙니다. 지금은 악성화된 애플리케이션 캐시를 사용해 리소스를 오프라인 상태로 만들 수 있지만, 향후에는 서비스 워커로 오프라인 개발 환경이 훨씬 더 좋아질 것입니다.

Jake Archibald는 최근에 놀라운 서비스 워커 패턴 요리책을 출판했습니다. 이 가이드를 간단히 시작하겠습니다.

서비스 워커의 설치는 매우 간단합니다. worker.js 파일을 만들고 애플리케이션이 부팅될 때 등록합니다.

Polymer 신고 카드 개선 필요

애플리케이션의 루트에 worker.js를 배치하는 것이 중요합니다. 이렇게 하면 앱의 모든 경로에서 발생하는 요청을 가로챌 수 있습니다.

작업자의 설치 핸들러에서 많은 리소스 (앱을 구동하는 데이터 포함)를 캐시합니다.

Polymer 신고 카드 개선 필요

이렇게 하면 사용자가 오프라인으로 앱에 액세스하는 경우 앱에서 최소한 대체 환경을 제공할 수 있습니다.

힘차게 전진하세요.

웹 구성 요소는 웹 플랫폼에 큰 도움이 되며 아직 초기 단계입니다. 더 많은 브라우저에 이르면서 애플리케이션 구조화를 위한 권장사항을 파악하는 것은 개발자 커뮤니티인 저희에게 달려 있습니다. 위의 솔루션은 시작점 역할을 하지만 아직 배워야 할 것이 많습니다. 더 나은 앱을 만들기 위해 노력하겠습니다.