Polymer: Creating responsive UIsYouTube↗  IA↗(long shot)
Science & Technology  42.9K views 323 likes 14 dislikes   25 Jun 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
롭 도슨: 안녕하세요.
РОБ ДОДСОН: Всем привет!
반갑습니다.
Как поживаете?
저는 구글 개발자 관계 팀의
Я Роб Додсон из команды Google
롭 도슨입니다.
по связям с разработчиками.
오늘 저는 폴리머를 이용하여
И сегодня я бы хотел поговорить с вами о том, как
여러분만의 반응형 UI 엘리먼트를
создавать свои собственные управляемые
작성하는 방법을 설명하려고 합니다.
элементы интерфейса с помощью Polymer.
그럼, 폴리머란 커스텀 HTML 태그를
Polymer – это новый тип библиотеки
만들기 위한 새로운 라이브러리입니다.
для создания собственных HTML-тегов.
그리고 이 라이브러리에는 기본적으로
Он обеспечивает возможность
뛰어난 응답성 구현과 같은 기능이 있습니다.
встраивать управляемость по умолчанию.
정말 멋진 기능이죠.
Это действительно полезная функция.
최근 연구 결과 보통 사람들은 하루에
Как показали недавние исследования, среднестатистический человек
세 개 정도의 장치를 이용한다고 합니다.
использует в день около трех различных устройств,
한 장치에서 작업을 시작하고
обычно начиная что-то делать на одном устройстве
다른 장치에서 끝내는 것이 흔한 일이죠.
и заканчивая уже на другом.
이제 웹 개발자로서 우리의 책임은
Будучи веб-разработчиками, мы считаем своей обязанностью
이러한 새로운 다중 장치 환경에서
убедиться, что все наши проекты, которые мы воплотили в жизнь, хорошо работают
우리가 개발한 경험이 잘 작동하도록 하는 것입니다.
в этом новом мире множества устройств.
하지만 HTML과 CSS가 작업을 완료하기에
Но порой одних инструментов HTML и CSS
언제나 가장 좋은 툴은 아닙니다.
недостаточно для решения этой задачи.
이것이 바로 폴리머와 같은 라이브러리가 등장하게 된
Вот здесь-то библиотека Polymer
배경이며 실제로 큰 도움을 주고 있습니다.
и может пригодиться и действительно помочь.
말씀드린 것처럼 폴리머는 커스텀 HTML 엘리먼트를
Я уже говорил, что Polymer используется для создания собственных HTML-
작성하기 위한 것입니다.
элементов.
눈에 띄지 않는 곳에서 폴리머는 웹 컴포넌트라는
По сути, данный продукт фактически использует новый свод
새로운 표준을 이용하여 기본적으로 개발자가
стандартов, называемых веб-компонентами, которые по существу
엘리먼트를 구현할 때 브라우저 제작자가
дают разработчикам доступ к тем же низкоуровневым API-интерфейсам,
이용한 것과 같은 낮은 수준의 API에
которые используются создателями браузеров
접근할 수 있게 합니다.
для внедрения своих элементов.
요컨대 이제는 응답성과 성능이 우수한
С профессиональной точки зрения это означает, что мы действительно
공유 HTML 엘리먼트로 형성된 전혀 새로운 상태계를
имеем возможность создать целую новую экосистему
개발할 능력을 갖추게 되었습니다.
совместно используемых, управляемых и эффективных HTML-элементов.
또한 우리가 이용하는 툴은 기본적으로 성능이
А когда наши инструменты эффективны по умолчанию,
우수하기 때문에 다중 화면 웹의
это делает весь процесс поддержки
전체 지원 프로세스를 훨씬 쉽게 만듭니다.
мультиэкранных веб-приложений намного проще.
이 비디오에서는 반응형 폴리머 엘리먼트
В этом ролике я хочу показать вам,
작성 방법에 대해 살펴봅니다.
как создавать управляемый элемент Polymer.
우리는 실제로 모든 앵커를 모아
Фактически мы займемся созданием небольшого тега для сворачивания панели,
작은 메뉴 버튼에 넣는
который соберет все свои привязки
작은 축소형 툴바 태그를 생성할 것입니다.
и поместит их в небольшую кнопку меню.
중요한 점은 여기서 다루는 모든 기술은
Но самое главное, каждый метод, который мы здесь описываем,
폴리머를 이용하여 만드는 모든 반응형 엘리먼트에
может быть применен к любому управляемому элементу,
적용할 수 있다는 사실입니다.
который мы создаем с помощью Polymer.
이제, 함께 작업하면서
В ходе работы мы будем
우리는 다른 개발자와
создавать что-то, чем можно
공유할 무언가를 만들 것입니다.
поделиться с другими разработчиками.
따라서 다른 사람들이 유연하게 사용할 수 있도록
Мы должны постоянно себя спрашивать,
할 방법에 대해 끊임없이 자문해야 합니다.
как сделать нашу идею доступной для других.
이 프로세스의 첫 번째 부분은 엘리먼트의 모습을
Сначала необходимо определиться,
언제 바꿀지 정하는 것입니다.
когда мы хотим изменить внешний вид нашего элемента.
사이트는 컨텐츠의 양과 레이아웃이 각각 다르고
Каждый сайт предназначен для различного количества контента
특히, 화면 크기가 다르기 때문에
и компоновки, в частности, на экранах различного размера,
언제 모습을 업데이트할지 파악해야 합니다.
и необходимо знать , когда обновлять внешний вид страницы.
이에 대한 예를 하나 보여드리겠습니다.
Давайте рассмотрим это на примере.
여기에 있는 툴바에는 9개의 아이템이 있습니다.
Вот у меня девять объектов на панели инструментов,
따라서 이 툴바는 약 900픽셀까지는
что означает, что размер моей панели может быть только около 900 пикселей перед
축소할 필요 없이 표시됩니다.
ее сворачиванием.
하지만 여기에 있는 툴바에는 4개의 아이템이 있습니다.
А вот здесь у меня 4 объекта на панели.
따라서 이 툴바는 500픽셀까지 축소할 필요 없이
И размер этой панели может быть в пределах 500 пикселей
표시됩니다.
перед ее сворачиванием.
사이트는 컨텐츠의 양이 각기 다르기 때문에
Каждый сайт сталкивается с такой проблемой, как
이와 같은 문제가 나타날 수 있습니다.
различное количество контента.
따라서 어떻게 하면 중단점의 영향을 받지 않는
Так как же я могу создать управляемый элемент,
반응형 엘리먼트를 작성할 수 있을까요?
который не встраивает все свои точки прерывания?
한 가지 방법은 개발자가 실제로
Один вариант – позволить разработчику
중단점을 통과하고, 외부에서
действительно добавить точку прерывания,
엘리먼트를 구성하고 언제 축소해야 할지
действительно настроить мой элемент из вне
알려주도록 하는 것입니다.
и сообщить мне, когда необходимо, чтобы он сворачивался.
이를 위해 폴리머 팀은
Именно для выполнения этой задачи команда Polymer
core media query 엘리먼트를 만들었습니다.
и создала элемент core media query.
core media query 엘리먼트는 보이지 않는 곳에서
По сути элемент core media query
뷰 포트의 크기를 확인하고
проверяет размер окна просмотра
개발자가 제공한 중단점과 일치하는 시점을 파악합니다.
и контролирует, соответствует ли он точке прерывания, установленной разработчиком.
이 엘리먼트의 작동 방식을 살펴보겠습니다.
Давайте посмотрим, как это работает.
여기에 core media query 엘리먼트가 있습니다.
Здесь вы видите элемент core media query.
저는 미리 쿼리 속성을
Я уже настроил для его атрибута query
최대 폭 500픽셀이 되도록 구성했습니다.
максимальную ширину 500 пикселей,
즉, 화면 크기가 500픽셀 미만이면
а это означает, что при размере экрана менее 500 пикселей
미리 확인하여 쿼리 매치 속성이
для атрибута guery matches будет установлено
true가 되도록 합니다.
true.
실제로, small screen이라는 바인딩을 만들고
Это означает, что мы можем создать свою собственную связку под названием
이를 쿼리 매치 값으로 설정할 수 있습니다.
small screen и поместить ее в значение атрибута query matches.
화면 크기가 500픽셀 미만이면
Когда экран менее 500 пикселей,
small screen을 true로 설정합니다.
он установит значение true для small screen.
그리고 small screen을 보는 모든 엘리먼트는
И теперь любой элемент, использующий small screen,
이제 모습을 바꾸어야 할 때임을 알게 됩니다.
будет знать, что пора обновить внешний вид.
이제 축소형 툴바 태그에 이를 실제로 적용해봅니다.
А теперь давайте поместим это в наш тег collapse toolbar.
시작하기 위해 아주 간단한 폴리머 정의를
Вот очень простое определение Polymer
만들었습니다.
для начала.
그리고 가장 먼저 할 일은
И первое, что мы сделаем,
core media query 엘리먼트를 가져오는 것입니다.
это импортируем тот самый элемент core media query.
그 다음으로는 media query element를
Затем перетащим элемент media query
폴리머 엘리먼트용 템플릿으로 드롭합니다.
в шаблон нашего элемента Polymer.
마지막으로, 이 쿼리 속성을
И, наконец, мы опубликуем этот атрибут query
속성 목록에 추가하여 외부 환경에 게시합니다.
для общего пользования, добавив его в наш список атрибутов.
그리고 값을 core media query 엘리먼트의 쿼리 프로퍼티로
И мы можем связать это значение со свойством query
다시 바인딩할 수 있습니다.
в элементе core media query.
이를 통해 개발자는 실제로 중단점을 통과하고
Это действительно позволяет разработчику добавить точку прерывания,
우리의 태그 안에 이를 반영할 수 있습니다.
что будет отображаться внутри нашего тега.
이를 통해 우리는 엘리먼트의 모습을
Благодаря этому мы знаем, когда пора
언제 바꿀지 파악할 수 있습니다.
обновлять внешний вид нашего элемента,
하지만 우리는 엘리먼트의 모습을 실제로
но это подводит нас к следующему вопросу: как мы
어떻게 업데이트할 것인가라는 다음 문제에 봉착하게 됩니다.
на самом деле можем изменить внешний вид элемента?
이제, 이를 위해 조건부 템플릿 바인딩이라는
И в этом нам поможет еще одна функция Polymer,
폴리머 기능을 하나 더 이용합니다.
называемая условной привязкой шаблонов.
아시다시피 폴리머 엘리먼트의 최고 수준에는 컨텐츠를
Как мы знаем, на высоком уровне элемента Polymer
섀도우 DOM에 렌더링하기 위한 템플릿이 있습니다.
существует шаблон для преобразования контента в shadow dome.
하지만 정말 멋진 기능은 이 최고 수준 템플릿이
Но вся суть в том, что этот шаблон высокого уровня
실제로 데이터 바인딩을 지원하는 중첩 템플릿을
может содержать дополнительные вложенные шаблоны,
추가로 포함할 수 있다는 점입니다.
поддерживающие связывание данных.
따라서 우리는 중첩 템플릿 중 하나 내부에
Следовательно, если мы используем условие if внутри
if 조건문을 사용한다면 실제로
одного из наших встроенных шаблонов, мы
small screen의 값에 바인딩하고 이보다 더 작은 화면 크기에
действительно связываемся со значением small screen
컨텐츠를 표시할 수 있습니다.
и отображаем контент только на экранах меньшего размера.
이에 대한 예로, 실제로
Например, я попытаюсь
작은 화면에서만 렌더링되는 템플릿 내부에서
захватить все ссылки моей панели инструментов
메뉴 버튼 안에 미리 추가해 둔
с помощью элемента content, который я разместил внутри
컨텐츠 엘리먼트를 사용하여 툴바 외부에 있는
кнопки меню, находящейся внутри нашего шаблона,
모든 링크를 처리해보겠습니다.
создающего только экраны меньшего размера.
이제, 우리 태그를 실제로 이용하는 개발자 관점에서 보면
Теперь с точки зрения пользователя, разработчики, которые
개발자의 코드는 그대로 유지됩니다.
используют наш тег, их код будет оставаться таким же.
아무것도 바꿀 필요가 없습니다.
Им не нужно ничего менять.
그냥 몇 개의 앵커 태그를 처리하기만 하면 됩니다.
Они просто добавят несколько тегов привязки.
이들은 쿼리 속성을 최대 폭 500픽셀로 설정합니다.
Для атрибута query они установят максимальную ширину 500 пикселей.
이제 툴바는 제 역할을 합니다.
И теперь с панелью инструментов все в порядке.
어떻게 표시되는지 예를 보여드리겠습니다.
Я покажу пример, как это выглядит.
이제, 여기에서 500픽셀 중단점에 도달하면
Итак, здесь, когда мы достигаем
모든 앵커 태그가 툴바에서 나가
точки прерывания 500 пикселей, вы
메뉴 버튼으로 들어가는 것을
увидите, что все теги привязки
확인할 수 있을 것입니다.
перемещаются из панели инструментов в кнопку меню.
개발자가 우리의 엘리먼트를 이용한다면
Это просто фантастика, так как если разработчики используют
여러 화면 크기를 지원해야 한다는 문제로
наши элементы, им не нужно забивать голову
스트레스를 받을 일이 전혀 없습니다.
поддержкой всех этих разных размеров экрана,
따라서 앱에 멋진 기능을 추가하는 것과 같은
а это означает, что они могут уделить больше времени тому,
즐거운 일에 시간을 더 투자할 수 있습니다.
что им нравится делать, например, добавлять действительно полезные функции в свои приложения.
이 예제의 코드를 확인하려면
Если вы хотите получить код для этого примера,
GitHub의 robdodson/collapse-toolbar에서
заходите на сервис GitHub, и вы найдете его
확인하시기 바랍니다.
на странице robdodson/collapse-toolbar.
폴리머에 대한 자세한 내용은 폴리머를 이용한
Если вы хотите узнать больше о Polymer,
웹 컴포넌트 구축에 대한 애디 오스마니의 비디오와
посмотрите ролик моего коллеги Эдди Османи
폴리머 엘리먼트를 이용한 구글 서비스 사용에 대해
о создании веб-компонентов с помощью Polymer и ролик Эрика Бидельмана
설명한 에릭 비델맨의 비디오를 시청하십시오.
об использовании сервисов Google с элементами Polymer.
그리고 폴리머 웹사이트 polymer/project.org도
Также обязательно посетите веб-сайт Polymer
확인하시기 바랍니다.
polymer/project.org.
아직 팔로우하지 않았다면 트위터의 @polymer와
И если вы еще не подписались на наши новости, приглашаем вас
구글 플러스의 PolymerProject도 팔로우하십시오.
в Твиттере, ник @polymer, и в Google+, ник PolymerProject.
이제 여러분 모두가 앞으로 나아가
А теперь действуйте
웹의 컴포넌트화를 시작하시기 바랍니다.
и начинайте компонентизировать веб-приложения уже сейчас.
반응형 엘리먼트를 통한 새로운 생태계 구축은
Каждый из нас может внести свой вклад в создание новой экосистемы
우리 손에 달려있습니다.
управляемых элементов.
제 이름은 롭 도슨입니다. 시청해주셔서 감사합니다.
Я Роб Додсон, и я благодарю вас за внимание.
Similar videos:

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201471% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201461% match

What about 3rd party JavaScript? #AskPolymer -- Polycasts #44
Chrome for Developers
69.4K views 125 likes 3 dislikes 23 Mar 201659% match

Lazy loading data with app-route -- Polycasts #47
Chrome for Developers
120K views 320 likes 5 dislikes 01 Jun 201659% match

Polygit. The Polymer CDN! -- Polycasts #45
Chrome for Developers
450.1K views 286 likes 5 dislikes 07 Apr 201659% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201458% match


Routing with carbon-route -- Polycasts #46
Chrome for Developers
195.5K views 259 likes 10 dislikes 20 Apr 201657% match

Unit Testing with Web Component Tester -- Polycasts #36
Chrome for Developers
17K views 127 likes 5 dislikes 03 Dec 201557% match

#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
382.8K views 37 likes 2 dislikes 18 Nov 201556% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201456% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201455% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201439% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201538% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201435% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201434% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201434% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201433% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201433% match


Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201432% match

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201432% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201432% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201431% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201431% match

Google I/O 2014 - Unlock the next era of UI development with Polymer
Google for Developers
100.5K views 971 likes 26 dislikes 26 Jun 201431% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201431% match

The Setup: Creating new apps using Google APIs
Google for Developers
123.3K views 796 likes 30 dislikes 13 Nov 201430% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201430% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201529% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201428% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201428% match


Settings Privacy About Contact Donate