Google Polymer - 웹 애플리케이션 구축 방식 변경 방법

Google은 Google 포토와 함께 Polymer를 처음부터 다시 작성하여 성능 개선 및 효율성을 해결했습니다. Polymer를 웹용 SDK (Software Development Kit)로 생각해보십시오. 웹 애플리케이션 개발 Web Components라는 새로운 표준을 사용하면 훨씬 빠릅니다..

웹 구성 요소를 사용하면 웹 사이트에 대한 맞춤 요소 및 태그 만들기. 이 글에서는 Google Polymer의 맞춤 요소가 웹 앱 개발에 어떻게 도움이되는지 살펴 보겠습니다. 또한 이러한 맞춤 요소를 작동시키는 방법에 대한 데모 몇 가지를 살펴볼 것입니다..

웹 구성 요소 정보

웹 구성 요소의 작동 방식을 이해하는 가장 좋은 방법은 다음과 같은 현재 표준 요소를 살펴 보는 것입니다. . 우리가 추가 할 때 오디오의 URL 소스와 함께 웹 브라우저는이 요소를 재생 및 일시 중지 단추, 시간 표시 막대 및 볼륨 슬라이더가있는 오디오 플레이어로 렌더링합니다. 플레이어 컨트롤이 어떻게 만들어지고 스타일이 정해져 있는지 궁금합니다.?

UI 컨트롤 플레이어는 그림자 루트 (Shadow Roots)로 숨겨져 있습니다. 그림자 DOM. 그림자 DOM을 보려면 Chrome DevTools >를 클릭하십시오. 장부 아이콘> 선택 사용자 에이전트 그림자 DOM 표시 선택권.

다음 스크린 샷에서 스택을 찾을 수 있습니다.

과 UI 플레이어를 비밀리에 제어하는 요소.

오늘날 웹 구성 요소를 사용하여 자체 요소도 지정할 수 있습니다. 우리는 다음과 같은 요소를 만들 수 있습니다., Twitter 피드 또는 (아마) 차트를 임베드하는 법.

또한 이러한 맞춤 요소에는 허용 된 맞춤 속성이 두 개있을 수 있습니다. 관련하여 요소에서 사용자 이름 Twitter 사용자 이름을 지정하는 데 사용됩니다..

폴리머의 맞춤 요소

Polymer에는 (거의 모든) 웹 응용 프로그램 요구 사항을 설명하는 여러 요소가 있습니다. Google은 다음 요소를 철분, 종이 요소, Google 웹 구성 요소, 금 요소, 네온 요소, 플래티넘 요소 및 분자로 그룹으로 나눕니다..

1. 철 요소

철 요소는 기본 요소 모음입니다. 이러한 기본 요소는 우리가 일반적으로 사용하는 것입니다. 웹 페이지 만들기 입력, 양식 및 이미지와 같은 차이점은 Polymer가 이러한 요소에 몇 가지 추가 기능을 추가한다는 것입니다..

이 그룹의 모든 요소는 다음과 같습니다. 철- 접두어로 붙인다. , 이미지를 표시하는 데 사용됩니다. 그만큼 요소에는 정규 속성에 적용 할 수없는 몇 가지 추가 속성이 있습니다. 요소. 예를 들어 예하 중, 바래다, 과 자리 표시 자 속성 :

위의 예는 먼저 이미지 자리 표시자를 보여주고 그 다음 실제 이미지로 사라집니다. src 완전히로드되면서, 부드러운 이미지 로딩 효과 수행.

2. 종이 요소

그만큼 종이 요소 머티리얼 디자인 요소 그룹입니다. 머티리얼 디자인은 웹과 Android 앱 모두에서 시각적으로 일관된 사용자 인터페이스와 경험을 제공하는 Google 디자인 언어입니다. 머티리얼 디자인에 고유 한 요소로는 Paper and Floating Action Button (FAB).

종이

종이 에 대한 Google의 은유입니다. 내용의 기초가되는 매체. Polymer를 사용하여 용지를 추가하려면 요소. 이 요소는 다음 두 가지 속성을가집니다.

높이 종이를 들기 때문에 그림자를 추가하여 표고를 강화할 수 있습니다.
생기 있는 종이 높이 변경으로 애니메이션 적용.

플로팅 액션 버튼 (FAB)

Floating Action Button (FAB)은 일반적으로 눈에 띄는 색상으로 화면에 떠있는 아이콘이있는 원형 버튼입니다. Google은이 버튼에 자주 액세스하는 기능이 있음을 제안합니다. 다음은 그 예입니다.

다음 코드 스 니펫은 이미지와 FAB이있는 Paper Material을 추가합니다..

우리는 다음과 같은 결과를 얻게 될 것입니다 :

사진이 있습니다. “심장” 버튼이 그 위에 떠 있습니다. 그것을 클릭하십시오 사진을 좋아하십시오, 단추는 누르기를 인정하는 잔물결 효과를 준다.

종이 데모보기

3. Google 웹 구성 요소

Google Web Components는 Google Maps, Youtube 및 Google Feed와 같은 Google API 및 서비스를 처리하는 특수 요소입니다. 이 그룹의 요소 몇 줄 떨어진 Google 서비스와 상호 작용할 수 있습니다..

다음은 Google지도를 보여주는 예입니다. 요소.

  이것은 Googleplex입니다.

위에서 볼 수 있듯이 요소는 위도 과 경도 지도에서 위치를 지정합니다. 우리는 또한 둥지를 틀 수있다. 마커를 클릭하면 표시되는 텍스트와 함께 해당 위치의지도 아이콘 표시.

데모보기

Youtube 비디오를보고 싶습니까? 당신은 요소.

마찬가지로 속성을 통해 출력을 사용자 정의합니다..

YouTube 데모보기

4. 골드 요소

금 요소는 전자 상거래 앱을 위해 특별히 설계된 요소. 여기에는 신용 카드, 전자 메일, 전화 및 ZIP 입력을 표시하는 요소가 모두 들어 있습니다. 형식 유효성 검사 올바른 데이터 입력 및 보안을 보장합니다. 다음은 Visa 신용 카드 입력을 추가하는 예입니다..

5. 기타 요소

나머지 요소에는 애니메이션 및 특수 효과를위한 네온 요소, 오프라인 및 푸시 알림을위한 플래티넘 요소 및 마지막으로 분자, 제 3 자 라이브러리를위한 래퍼.

편집자 주 : 이 글을 쓰는 시점에서, 네온 원소, 백금 원소 및 분자는 여전히 이용 가능하지 않습니다..

통합 고분자

웹 개발에서 Polymer를 사용하고 싶습니까? 웹 페이지에 설치하고 통합하는 방법은 다음과 같습니다. 대부분의 폴리머 요소가 서로 의존하기 때문에 Polymer를 설치하는 가장 좋은 방법은 Bower.

Bower는 프로젝트를 실행하는 데 필요한 스크립트 또는 스타일을보다 쉽게 설치할 수있게 해주는 프로젝트 종속성 관리자입니다. Bower와 함께 웹 라이브러리를 쉽게 설치, 업데이트 및 제거하는 방법에 대한 이전 게시물을 확인하십시오..

Polymer를 통합하려면 터미널을 시작한 다음 프로젝트 디렉토리를 만든 것으로 가정하여 프로젝트 디렉토리로 이동하십시오. 그런 다음 실행 정오 초기 명령을 사용하여 프로젝트 종속성을 기록하는 데 사용할 bower.json 파일을 프로젝트에 시작하십시오. bower.json을 열고 다음 줄을 추가하십시오..

 "dependencies":  "폴리머": "Polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements" PolymerElements / iron-elements # ^ 1.0.0 ","paper-elements ":"PolymerElements / paper-elements # ^ 1.0.0 ","gold-elements ":"PolymerElements / gold-elements # ^ 1.0.0 "

이 설정은 각 그룹의 모든 요소를 사용한다고 가정합니다. 종속성 목록에서 필요하지 않은 것을 제거 할 수 있습니다. 의존성이 설정되면 박차를 가한 설치 명령을 사용하여 목록에 종속성을 설치합니다..

이 프로세스에는 저장소에서 막대한 양의 파일을 가져 오는 과정이 포함될 수 있습니다. 일단 완료되면, bower_components 폴더.

Polymer 구성 요소를 사용하려는 HTML 파일을 엽니 다. 문서 헤드 내에서, WebComponents.js를 링크하십시오. 어느 것이 폴리 필 아직 웹 구성 요소를 지원하지 않는 브라우저의 경우 구성 요소 파일 가져 오기 HTML 가져 오기 사용.

다음은 그 예입니다.

이 설정을 사용하면 , , 집단.

진열장

이미 Google Polymer를 사용하고있는 웹 앱 중 일부는 다음과 같습니다..

Google

Google은 Google IO 2015 웹 페이지에서 Google Polymer를 사용했습니다. 파트너 사인 이동 통신사 및 공급 업체를위한 Google 무선 서비스 인 Google Fi; 및 Google 뮤직.

맞춤 요소

CustomElements는 웹 구성 요소를 사용하여 사용자 지정 요소를 찾을 수있는 허브입니다. Paper 요소를 사용하여 목록을 포함하고 작성합니다. 또한 Bower 및 NPM을 통해 이러한 요소를 설치할 수있는 편리한 경로를 제공합니다..

Chrome Dev Editor

놀라 울 정도로 잘 작동하는 코드 수정을위한 Chrome 애플리케이션입니다. 이 응용 프로그램은 사용자 인터페이스에서 FAB 버튼, 용지 메뉴 및 용지 대화 요소를 사용합니다.

폴리머 디자이너

끌어서 놓기 인터페이스를 사용하여 폴리머 요소로 웹 응용 프로그램을 만드는 도구.

일간 주식 예측

폴리머 요소로 완전히 구축 된 증권 거래소 보고서 및 예측.

고분자 메일

Gmail 용 이메일 클라이언트 앱. 슬프게도 완벽하게 기능하지는 않지만 멋지고 유동적입니다..

마지막 생각들

Polymer는 엄청난 범위를 가지고 있으며 API뿐만 아니라 모든 맞춤 요소에 익숙해지기까지 시간이 걸릴 수 있습니다. 그럼에도 불구하고 웹 컴포넌트와 폴리머는 우리가 웹 애플리케이션을 개발하는 방식에 확실히 영향을 미칠 것입니다. 웹 구성 요소에 대한 자세한 내용은 군중 앞에서 지켜보십시오. 참고 자료는 아래에서 찾을 수 있습니다..

데모보기
소스 다운로드

유용한 참고 자료

웹 컴포넌트의 상태
사용자 정의 요소에 대한 자세한 소개
Google Polymer의 공식 블로그