Componentize the Web Google Developers English Korean

Componentize the WebYouTube↗ IA↗(long shot)
Science & Technology 28.1K views 231 likes 12 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

Hi, I'm Addy Osmani.

안녕하세요, 저는 에디 오스마니입니다

I'm a Senior Developer Relations Engineer working on Polymer.

저는 폴리머를 다루는 선임 개발자 관계 엔지니어입니다

Today we're going to take a look at how to save you

몇 줄의 코드를 이용하여 웹을 위한 컴포넌트를 만드는 시간을

time building components for the web in fewer lines of code.

절약할 수 있는 방법에 대해서 알아보겠습니다

Before we dive in, let's talk about web components.

시작하기에 앞서, 웹 컴포넌트에 대해서 얘기해보겠습니다

They're still pretty new to a lot of people.

아직 많은 사람들이 이에 대해 잘 모르기 때문에

So let's make sure we're all on the same page before we go

이를 이용하여 무언가를 만들기 전에

and build something.

이에 대해서 확실히 이해하고 넘어가겠습니다

Web Components are an emerging set of standards

웹 컴포넌트는 여러분이 새로운 HTML 엘리먼트를

that allow you to build new HTML elements.

만들 수 있기 위해 나타난 일련의 기준입니다

The APIs are Templates, Custom Elements, Shadow DOM,

API는 템플릿, 커스텀 엘리먼트, 셰도우 돔,

and HTML Imports.

그리고 HTML불러오기 입니다

Each one of these APIs is useful individually.

이러한 API는 개별적으로 유용하게 쓰입니다

But when used together, they enable

하지만 함께 쓰이게 되면,

developers to be really productive.

개발자들이 정말로 생산적인 일을 해낼 수 있습니다

So Polymer helps developers stay more productive.

폴리머는 개발자들이 더욱 생산적인 일을 해낼 수 있게 합니다

What do we mean by productivity?

생산적이라는 말이 무슨 뜻일까요?

Well, take a component like tabs, a pretty common place

탭과 같은 구성요소는 웹에서 꽤 흔한 컴포넌트입니다

component on the web. You've probably used a tab component at some point.

탭 컴포넌트를 써보신 경험은 다들 있으실 겁니다

Writing a tab component on the web has changed over time.

웹에서 탭 컴포넌트를 만드는 방법은 시간이 지나면서 바뀌었습니다

Years ago, we started off in markup

몇 년 전에는 약간의 자바스크립트와 함께

with a little bit of JavaScript.

마크업을 이용해서 만들기 시작했습니다

But since then, we've piled more and more and more

하지만 그 이후로, 우리는 더욱 더 많은 로직을

and even more of our logic into JavaScript.

자바스크립트에 쌓아갔습니다

Maybe this isn't the best approach.

이게 최선의 방법이 아닐 수도 있습니다

Look at the suffering it causes.

이로 인해 발생하는 불편한 점들을 보세요

Perhaps there's a better way of doing this.

이것보다 더 나은 방법이 분명히 있을 것입니다

Using web components with Polymer,

폴리머와 함께 웹 컴포넌트를 사용하면서

we could rewrite those nasty-looking widgets

우리는 훨씬 더 읽기 쉬운 커스텀 HTML 엘리먼트를 사용하여

using a custom HTML element, which is much more readable.

이렇게 보기 좋지 않은 위젯을 다시 쓸 수 있습니다

So, here's what tabs would look like if they were just HTML.

HTML만 사용했을 때에는 이렇게 보입니다

It's much easier to see what's going on.

현 상황에 대해서 쉽게 볼 수 있습니다

The code is declarative.

코드는 서술문입니다

읽기 쉽고 서술하고 있습니다

And it's descriptive.

간단하게 보이죠?

Simple, right? My-tabs is just an element, something componentized

마이탭은 구성요소로 나뉜 엘리먼트일 뿐이며,

that's readable, semantic, and describes

읽기 쉽고 시맨틱기능을 가지고 있으며

exactly what it offers.

제공하는 기술을 정확하게 표현합니다

Components are awesome because they

컴포넌트는 굉장히 멋집니다

force us to think about constructing

우리가 웹앱을 만들 때에 빽빽하게

web apps as a composition of components,

연결된 조각들로 이루어진 덩어리가 아닌

rather than a mass of tightly coupled pieces.

하나의 컴포넌트 구성요소로써 생각하게 만들어 주기 때문입니다

We're no longer looking at a soup of divs and script.

div와 스크립트로 채워진 덩어리로 보여지지 않는 겁니다

Now, this is where Polymer comes in.

이때, 폴리머가 쓰일 수 있습니다

Polymer is a new type of library for the web that

폴리머는 웹 컴포넌트를 기반으로 하여

allows you to easily build applications

여러분이 쉽게 앱을 만들 수 있도록 하는

based on Web Components.

웹에 있는 새로운 타입의 라이브러리입니다

It includes a set of polyfills for the native APIs.

이것은 네이티브API를 위한 일련의 폴리필을 포함합니다

So you can start using them today.

여러분은 이걸 오늘부터 사용할 수 있습니다

What Polymer really does is it provides

폴리머로 인해서 편리하게

a convenient and opinionated layer on top of vanilla web

자신의 생각을 담은 레이어를 평범한 웹 컴포넌트에

components, with features like Two-way data

양방향 데이터 바인딩, 서술문 이벤트 핸들러, 속성 감시와

binding, declarative event handlers, property observation,

터치 제스쳐와 같은 특징과 함께 담아서

and touch gestures, to help you quickly build powerful apps.

여러분이 빠르게 강력한 앱을 만들 수 있도록 합니다

So let's build a tabs element using Polymer.

자, 폴리머를 이용하여 탭 엘리먼트를 만들어봅시다

Let's first take a look at our completed element.

작성한 엘리먼트를 봅시다

Our control is both beautiful and quite functional.

우리가 만든 제어는 아름답고 꽤 기능적입니다

We begin building our first element using seed-element, a boilerplate project providing sample code and structure to help you get off the ground quickly.

여러분이 순조롭게 시작하는 걸 돕기 위해서 샘플코드와 구조를 제공하는 시드 엘리먼트, 보일러 플레이트 프로젝트를 사용하여 첫 번째 엘리먼트를 만들어봅시다

The boilerplate is available on GitHub at the following link.

보일러 플레이트는 다음의 링크에 있는 깃허브에서 이용 가능합니다

Once you're on the page for the repository, click the Download ZIP button to download the boilerplate

리포지토리 페이지에서 ZIP 다운로드 버튼을 클릭하여

to your machine.

보일러 플레이트를 여러분의 기기로 다운받으면 됩니다

Next, create a new directory called development

그 다음으로, development라는 새로운 디렉터리를 만들고

and a sub-directory called my-tabs.

my-tabs라고 불리는 서브디렉터리를 만드세요

Extract the contents of the zip file to your my-tabs folder.

zip파일에서 콘텐츠를 여러분의 my-tabs 폴더로 뽑아내세요

Next, we'll rename the files from the boilerplate,

세 번째로, my-tabs와 함께 시드 엘리먼트를 새로 바꾸면서

replacing seed-element with my-tabs.

보일러 플레이트에서 파일의 이름을 다시 지으세요

It should look like this.

그러면 이렇게 보일 것입니다

So, my-tabs.css and my-tabs.html.

my-tabs.css와 my-tabs.html이죠

Next, let's talk about dependencies

이제는 엘리먼트를 작성하는 데 있어

for creating our element.

종속성에 대해서 알아봅시다

So, this is Bower.

이것은 바우어입니다

It's a package manager that can be used to install and manage front end dependencies.

프론트앤드 종속성을 설치하고 관리할 수 있는 패키지 매니저입니다

Before you can begin working on your element,

엘리먼트를 다루기 전에

you'll want to make sure you have Bower installed.

바우어가 설치되어 있는지 확인하세요

Follow the instructions on the Bower site

툴을 설치하기 위해서

for installing the tool.

바우어 사이트에 있는 설명서를 따라 하세요

If you have Node.js installed, this

Node.js가 설치되어 있다면

can typically be done by running this command.

명령어를 입력하시면 설치할 수 있습니다

Bower will install all the different modules we'll need.

바우어는 우리가 필요한 다양한 모듈을 설치할 것입니다

You can now install the dependencies needed by untitled element by running

이제 my-tabs 디렉토리에 바우어로 설치된

bower install from the my-tabs directory.

무제 엘리먼트에 필요한 종속성을 설치할 수 있습니다

Navigating back a level, this will add a few dependencies

이전의 화면으로 돌아가면 여러분의 development 디렉토리,

to your development directory, Polymer, the web component

폴리머, 웹 컴포넌트 폴리필 그리고 docs를 사용하는데 필요한

polyfills, and one or two others we'll be using for docs.

몇 가지 다른 것들에도 종속성을 추가했습니다

You're now ready to begin working on the my-tabs element.

이제 여러분은 my-tabs 엘리먼트를 다룰 준비가 되었습니다

So, here's what the boilerplate seed-element ships with,

이것이 보일러 플레이트 시드 엘리먼트 쉽이

looks right out of the box.

적용된 모습입니다

For my-tabs, we won't directly be using JavaScript.

마이탭에서, 우리는 직접적으로 자바스크립트를 사용하지 않을 것입니다

So you can add the noscript attribute to our element.

그러니, 노스크립트 속성을 엘리먼트에 추가할 수 있습니다

This informs Polymer that we won't

이를 통해서 폴리머는 우리가 이 특정한 엘리먼트에서

want to interact with JavaScript for this particular element.

자바스크립트를 사용하고 싶지 않다는 걸 인식할 것입니다

Now, a tab element can actually be built using a number of existing Polymer elements.

탭 엘리먼트는 이미 존재하는 많은 폴리머 엘리먼트를 사용하여 만들어질 수 있습니다

And this is pretty powerful.

이건 꽤 강력합니다

You can compose whole elements and apps

다른 사람들이 작성한 엘리먼트를 이용하여

from elements written by other people.

전체 엘리먼트와 앱을 구성시킬 수 있습니다

You can find our existing elements

다음의 주소를 통해서 폴리머 사이트에

over on the Polymer site at the following address.

이미 존재하는 엘리먼트를 찾으실 수 있습니다

For example, core-selector is an element

예를 들어, 코어 셀렉터는 선택될 수 있는 아이템 목록을

that manages a list of items that can be selected.

관리하는 엘리먼트입니다

They can be divs, spans, or something else.

아이템은 divs나 spans 또는 다른 게 될 수 있겠죠

Here's a quick example of it in action.

어떻게 작동되는 지 예시를 보여드리겠습니다

You can select items in a list and trigger an active state

목록에 있는 아이템을 선택하여 실행상태로 만드세요

on them. Magical.

마법과도 같습니다

So you can install this element for use

다음의 행을 사용하는 마이탭에서

in my-tabs using the following line.

이 엘리먼트를 사용하기 위해서 설치할 수 있습니다

It'll then go and fetch your dependency from Bower.

그러면 바우어에서 종속성을 가져올 것입니다

Once installed, you can reference this new import

설치가 되면, my-tabs 안에 있는

inside of my-tabs.

새로운 불러오기를 참조할 수 있습니다

So core-selector can now be used in this page.

이제 코어 셀렉터가 이 페이지에서 사용될 수 있습니다

Next inside of your element definition at the line,

이제 여러분의 엘리먼트 안에 extends="core-selector"라고

extends="core-selector".

이 행에 나와 있죠

This tells Polymer that you'd like

이로 인해 폴리머는

to extend the functionality of the selector element.

여러분이 셀렉터 엘리먼트의 기능성을 확장하길 원한다고 인식할 것입니다

This lets us get its functionality for free.

이를 통하여 기능성을 자유롭게 쓸 수 있게 되었습니다

여기서 기억해야 할 부분이 있습니다

Styles defined within your element

스타일은 여러분의 엘리먼트 안에서 정의되고 범위가 정해지며,

get scoped, meaning they don't leak into the rest of the page.

다른 페이지로 새어나가지 않습니다

Shadow DOM lets us let in as much or as little

셰도우 돔은 최대한 혹은 최소한의 규모로

of the outside world as we choose.

우리가 선택하여 받아들일 수 있습니다

In this case, our styles are scoped within the confines of the my-tabs element.

이 경우에서, 스타일은 my-tabs로 국한된 범위 안에 있습니다

We can use this fact to apply a little bit of Flexbox magic

이러한 점을 여러분의 엘리먼트 안에 있는

inside our element.

플렉스박스에서 적용할 수 있습니다

Now we're going to add in one more import called layout.html,

더욱 중요하며 기본적이고 엘리먼트가

which is basic and will allow our element to be a Flex container.

플렉스 컨테이너가 되도록 만드는 layout.html을 추가해보겠습니다

A Flex container is basically an element

사실상 플렉스 컨테이너는 자식을 포함할 수 있는

that might contain children, in our case, tabs,

융통성 있는 엘리먼트로

that we'd like to make flexible.

이번 경우에는 탭에 적용해 보겠습니다

One thing the Polymer team believe in, in this brave new world of Web Components,

새로운 웹 컴포넌트의 세계에서 폴리머 팀이 믿고 있는 사실은

is that everything is an element.

모든 것이 엘리먼트라는 겁니다

That's one reason we're implementing these concepts

그래서 우리가 이러한 개념을 엘리멘트로써 보는 이유입니다

as elements. It's pretty powerful when you're just configuring components using attributes.

속성을 이용하여 컴포넌트를 구성하면 굉장히 강력해집니다

So going back to my-tabs, you want

마이탭으로 돌아가서,

to enable a way to render children

개별적인 탭을 정의하기 위해서

of your my-tabs element to define individual tabs.

여러분의 마이탭 엘리먼트 자식을 이동시키겠습니다

So working with these guys, the child elements.

이를 처리하기 위해서 자식 엘리먼트를 보겠습니다

Now this is achieved by adding in the shadow tag

템플릿안에 shadow 태그를 추가하여

inside of your template.

자식 엘리먼트가 보관되었습니다

These represent something called a Shadow DOM insertion point.

이걸 셰도우 돔 삽입점이라고 합니다

Now Shadow DOM refers to the ability of the browser

이제 셰도우 돔은 돔 엘리먼트의 서브트리를

to include a sub-tree of DOM elements

메인문서 돔 트리가 아닌

into the rendering of a document,

문서의 렌더링에 포함하는

but not into the main document DOM tree.

브라우저의 능력을 뜻합니다

This provides CSS and DOM encapsulation.

이는 CSS와 돔 캡슐화를 제공합니다

So now we have the final version of the code for our custom tab

우리의 커스텀 탭 엘리먼트를 위한

최종버전 코드를 가지게 되었습니다

Before we can use our new tab element,

새로운 탭 엘리먼트를 사용 전에,

you'll want to edit demo.html to add in the relevant markup.

demo.html을 편집하여 연결된 마크업에 추가하겠습니다

So let's highlight them.

하이라이트 표시를 하겠습니다

This is what it looks like with my-tabs in place

엘리먼트에 탭을 추가하기 전에

before we've added any actual tabs to our element.

제 위치에 있는 my-tabs의 모습입니다

Check that any references to seed-element now point

시드 엘리먼트 대신에

to my-tabs.html instead.

이제 my-tabs.html을 참조하는지 확인하세요

Next, we add in the markup for three new tabs inside our tabs

탭 엘리먼트안에 세 개의 새로운 탭에 마크업을 추가하겠습니다

element. Here we're just using some simple spans.

몇 가지 간단한 범위를 사용하겠습니다

So each span represents a new tab.

각각의 범위는 새로운 탭을 나타냅니다

So let's see what we've built.

우리가 무엇을 만들었는지 봅시다

Go and run a new preview server at the command line

여러분의 새로운 커스텀 엘리먼트를 미리보기 위해서

to preview your new custom element.

명령행에 있는 새로운 프리뷰 서버를 작동시키세요

And boom, there we have the my-tabs element.

자, 보세요 이제 우리에게 마이탭 엘리먼트가 생겼습니다

It's beautiful and it's functional.

멋지고 기능적입니다

You can now reuse this element across pages

이제 여러분은 이러한 엘리먼트를 캡슐화와 간단한 마크업과 함께

with encapsulation and a clean markup.

모든 페이지에서 재사용할 수 있습니다

I've never seen anything that looks so elegant.

이렇게 멋진 걸 본 적이 없습니다

Now that we've created our my-tabs element,

이제 my-tabs 엘리먼트를 만들었으니

let's deploy it to GitHub pages so you

깃허브 페이지에 배치해서

can share it with your friends.

다른 친구와 함께 공유할 수 있도록 만들어 봅시다

Elements can be shared, but we'll

엘리먼트는 공유할 수 있습니다

be working with two branches, master and GitHub pages.

하지만 우리는 마스터와 깃허브 두 개의 분기에서 작동시킬 것입니다

We want to ensure that our master branch contains the bare minimum of code that needs

마스터 분기가 다른 앱이나 엘리먼트를 작동시키는데 필요한

to be consumed by other apps or elements.

최소한의 코드를 확실히 가지고 있어야 합니다

Now your GitHub pages branch should contain a landing page and checked independencies, demos, and documentation.

이제 여러분의 깃허브 페이지 분기가 랜딩페이지를 포함하고 종속성, 데모와 문서화를 확인하도록 만들겠습니다

First, create a new repository on GitHub for your element.

먼저, 여러분의 엘리먼트를 위한 새로운 리포지토리를 깃허브에 생성하겠습니다

And push the source for my-tabs to this repository.

그리고 my-tabs 소스를 여기에 있는 리포지토리에 두겠습니다

Navigate back to your development directory from the terminal.

단말기의 개발 디렉토리로 돌아가서

And create a new temporary directory and CD into it.

새로운 임시 디렉토리와 CD를 만들겠습니다

Next, grab a copy of Polymer's Official Helper Tools.

폴리머의 오피셜 헬퍼 툴을 복사하세요

You can git clone them using the following one liner.

다음과 같은 하나의 라이너를 사용하여 깃 클론을 이용할 수 있습니다

You should now have the tools on your system.

이제 여러분의 시스템에 툴이 있을 것입니다

Take note of where they've been cloned to.

클론이 있는 곳에 노트를 기록하세요

Finally, run the gp.sh script found in the tools directory, passing in your GitHub username and the name of your element.

마지막으로 깃허브 사용자 이름과 엘리먼트 이름에 들어가서 tools 디렉토리에 있는 gp.sh 스크립트를 작동시키세요

This will create a gh-pages branch

이로 인하여 여러분의 엘리먼트에 랜딩페이지와

on GitHub containing a landing page

데모의 링크를 가진 gh페이지 분기가

for your element and a link to a demo for it.

깃허브에서 생성될 것입니다

It'll also include all of the dependencies needed

여러분의 엘리먼트를 미리보기 위해서

to preview your element live.

필요한 모든 종속성도 포함되어 있습니다

So this is where my landing page is now live.

이제 랜딩페이지가 여기에 있습니다

And if you've been following along,

계속해서 이러한 진행상황을 따라오셨다면

yours should be live on a very similar address

제 사용자 이름 대신에 여러분의 사용자 이름과 함께

with your username instead of mine.

비슷한 주소를 가지고 있어야 합니다

Let's take a closer look at the page.

조금 더 면밀히 페이지를 봅시다

Our landing page can contain examples and a summary

랜딩 페이지에는 예시와 속성이 요약되어 있고

of the attributes and events supported by our element.

엘리먼트에서 지원되는 이벤트가 있습니다

Now these are all straight from comments in our code.

우리가 만든 코드에서 설명한 대로 나와있습니다

And if your friend's click the demo button at the very top,

상단에 있는 데모버튼을 친구가 클릭하면

it'll take them straight to your demo page.

여러분의 데모페이지로 연결될 것입니다

And there we go.

이렇게 말입니다

Our element is both beautiful, functional, and awesome.

우리가 만든 엘리먼트는 멋지고 기능적이며 훌륭합니다

Hooray, I feel like a real engineer now.

오예! 진정한 엔지니어가 된 것 같습니다

Web Components with Polymer present an incredibly exciting

폴리머를 가진 웹 컴포넌트는 재사용을 할 수 있는

step forward for re-usability.

흥미로운 단계들을 제공합니다

And there's a whole world of elements

여러분이 사용할 수 있는

out there just waiting to be built.

아주 많은 엘리먼트가 나와 있습니다

To get started, go check out polymer-project.org .

폴리머를 사용하시려면 polymer-project.org에 들어가보세요

Now go out and help componentize the web today.

이제 웹을 직접 구성해보세요

감사합니다

Similar videos:

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

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

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

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201468% match

Building Node.js applications with App Engine and Custom Runtimes
Google for Developers
26.1K views 168 likes 4 dislikes 25 Jun 201464% match

Dart in Google Cloud
Google for Developers
15.3K views 111 likes 3 dislikes 25 Jun 201461% match

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

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201458% match

What's new in WebView
Google for Developers
19.8K views 121 likes 6 dislikes 25 Jun 201456% match

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

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

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201439% match

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

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

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

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201438% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201436% match

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

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

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

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201433% match

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

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

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

WebRTC tutorial
Google for Developers
134.5K views 649 likes 23 dislikes 30 Jun 201430% match

Google I/O 2014 - Polymer and Web Components change everything you know about Web development
Google for Developers
142.7K views 1.2K likes 22 dislikes 25 Jun 201430% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201430% match

Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
Google for Developers
92.3K views 875 likes 20 dislikes 29 May 201530% match

Google I/O 2014 - HTTPS Everywhere
Google for Developers
157K views 805 likes 113 dislikes 26 Jun 201429% match

Google I/O 2014 - Design principles for a better mobile web
Google for Developers
46.3K views 537 likes 18 dislikes 27 Jun 201429% match

Settings Privacy About Contact Donate