Polymer.js: 웹 애플리케이션 개발의 미래?
게시 됨: 2022-03-11약 1년 전인 2013년 5월에 Google은 Polymer.js를 출시했습니다.
그래서 우리는 1년 후입니다. 그리고 질문은 다음과 같습니다. 아직 황금 시간대를 맞이할 준비가 되었습니까? 폴리머 웹 개발 기술을 사용하여 프로덕션 준비 애플리케이션을 만드는 것이 아직 가능합니까?
이 질문에 답하기 위해 웹 애플리케이션을 개발하고 얼마나 잘 작동하는지 알아보기 위해 테스트 드라이브에 Polymer를 사용했습니다. 이 기사는 그 경험과 그 과정에서 배운 것에 관한 것입니다.
Polymer.js: 개념
Polymer 튜토리얼을 시작하기 전에 먼저 Polymer.js가 무엇이라고 주장하는 것이 아니라 실제로 무엇인지에 대해 정의해 보겠습니다.
Polymer에 대해 알아보기 시작하면 즉시 자칭하는 독특한 세계관에 매료되지 않을 수 없습니다. Polymer는 "요소를 웹 개발의 중심으로 되돌려 놓는" 일종의 자연으로의 접근 방식을 취하고 있다고 주장합니다. Polymer.js를 사용하면 고유한 HTML 요소를 만들고 확장 가능하고 유지 관리가 가능한 완전하고 복잡한 웹 애플리케이션으로 구성할 수 있습니다. 내부를 알거나 이해할 필요 없이 선언적인 방식으로 HTML 페이지에서 재사용할 수 있는 새로운(즉, 사용자 정의) 요소를 만드는 것이 전부입니다.
요소는 결국 웹의 구성 요소입니다. 따라서 Polymer는 웹 개발이 기본적으로 기존 요소 패러다임을 확장하여 보다 강력한 웹 구성 요소를 구축하는 데 기반을 두어야 하며, 이는 마크업을 "대체 스크립트"(그들의 단어를 사용하는)로 대체하는 것보다 이루어져야 한다는 것입니다. 달리 말하면, Polymer는 점점 복잡해지는 맞춤형 JavaScript 라이브러리(jQuery 등)에 의존하기 보다는 브라우저의 "기본" 기술을 활용하는 것을 믿습니다. 참으로 흥미로운 발상이다.
네, 이것이 이론입니다. 이제 현실을 살펴보자.
폴리머 웹 개발: 현실
Polymer의 철학적 접근 방식은 확실히 장점이 있지만 불행히도 (적어도 어느 정도는) 시대를 앞서 가고 있다는 생각입니다.
Polymer.js는 (W3C에 의한) 아직 표준화 과정에 있고 오늘날의 브라우저에는 존재하지 않는 많은 기술에 의존하여 브라우저에 막대한 요구 사항을 부여합니다. 예를 들면 그림자 돔, 템플릿 요소, 사용자 정의 요소, HTML 가져오기, 돌연변이 관찰자, 모델 기반 보기, 포인터 이벤트 및 웹 애니메이션이 있습니다. 이것들은 놀라운 기술이지만 적어도 현재로서는 최신 브라우저에 적용되지 않은 기술입니다.
폴리머 전략은 프론트 엔드 개발자가 이러한 첨단 브라우저 기반 기술을 활용하도록 하는 것입니다. 이 기술은 현재 W3C에 의해 표준화 과정에 있습니다. 한편, 그 격차를 메우기 위해 Polymer는 폴리필(오늘날의 브라우저에 아직 구축되지 않은 기능을 제공하는 다운로드 가능한 JavaScript 코드)의 사용을 제안합니다. 권장되는 폴리필은 이러한 기능의 기본 브라우저 버전을 사용할 수 있게 되면 (최소한 이론적으로) 매끄럽게 대체되도록 설계되었습니다.
알았어 괜찮아. 하지만 이 문제를 바로잡겠습니다. 적어도 지금은 JavaScript 라이브러리(예: 폴리필)를 사용하여 JavaScript 라이브러리의 사용을 피할 것입니까? 글쎄요, 그것은 "매혹적입니다".
따라서 결론은 Polymer가 아직 존재하지 않는(또는 더 정확하게는 대략적인) 브라우저 기술에 궁극적으로 의존하고 있기 때문에 Polymer가 일종의 림보 모드에 있다는 것입니다. 따라서 오늘날 Polymer.js는 요소 중심 애플리케이션이 미래에 어떻게 구축될 수 있는지에 대한 연구에 더 가깝습니다(즉, 필요한 모든 기능이 주요 브라우저에서 구현되고 폴리필이 더 이상 필요하지 않을 때). 그러나 적어도 현재로서는 Polymer가 바로 지금 여기에서 강력한 세계관을 바꾸는 강력한 응용 프로그램을 만들기 위한 실제 옵션보다 흥미로운 개념처럼 보입니다. Google 문서의.
폴리머 아키텍처
이제 우리 가이드에. Polymer.js는 구조적으로 4개의 레이어로 나뉩니다.
기본: 현재 모든 주요 브라우저에서 기본적으로 사용할 수 있는 필요한 기능입니다. 기초: 브라우저 자체에서 아직 기본적으로 사용할 수 없는 필요한 브라우저 기능을 구현하는 폴리필. (이 레이어가 제공하는 기능이 브라우저에서 기본적으로 사용 가능해짐에 따라 이 레이어가 사라지게 하려는 의도입니다.) 핵심: 기본 및 기초 레이어에서 제공하는 기능을 활용하기 위해 폴리머 요소에 필요한 인프라. 요소: 애플리케이션을 생성하는 데 도움이 될 수 있는 빌딩 블록 역할을 하기 위한 기본 요소 세트. 다음을 제공하는 요소를 포함합니다. ajax, 애니메이션, 플렉스 레이아웃 및 제스처와 같은 기본 기능. 복잡한 브라우저 API 및 CSS 레이아웃을 캡슐화합니다. 아코디언, 카드 및 사이드바와 같은 UI 구성 요소 렌더러.
폴리머 응용 프로그램 만들기
시작하려면 Polymer, 그 개념 및 구조를 소개하는 데 도움이 되는 몇 가지 기사와 튜토리얼 작성이 있습니다. 하지만 저와 같은 사람이라면 이러한 절차를 거쳐 실제로 응용 프로그램을 구축할 준비가 되었을 때 어디서부터 시작해야 할지, 어떻게 만들어야 할지 잘 모르겠다는 것을 금세 깨닫게 될 것입니다. 이제 프로세스를 거쳐 알아 냈으므로 다음과 같은 몇 가지 지침이 있습니다.
폴리머 웹 개발은 요소 생성에 관한 모든 것이며 요소 생성에 관한 것입니다. 따라서 폴리머 세계관과 일치하게 우리의 애플리케이션은... 새로운 요소가 될 것입니다. 그 이상도 그 이하도 아닙니다. 알겠습니다. 알겠습니다. 그것이 우리가 시작하는 곳입니다.
폴리머 프로젝트 예제의 경우 애플리케이션의 최상위 요소 이름을
그러나 다음 단계는 훨씬 더 많은 생각이 필요합니다. 우리는 애플리케이션을 컴포넌트화하는 방법을 결정해야 합니다. 쉬운 접근 방식은 시각적인 관점에서 애플리케이션의 구성 요소를 식별한 다음 이를 Polymer에서 사용자 지정 요소로 생성하는 것입니다.
예를 들어 다음 화면이 있는 앱이 있다고 가정해 보겠습니다.
상단 표시줄과 측면 표시줄 메뉴가 변경되지 않고 앱의 실제 "콘텐츠"가 다른 "보기"를 로드할 수 있음을 식별할 수 있습니다.
그러한 경우 하나의 합리적인 접근 방식은 다음을 생성하는 것입니다.
그런 다음 ListView와 SingleView라고 하는 두 개의 기본 보기를 만들어 "콘텐츠" 영역에 로드할 수 있습니다. ListView의 항목에 대해 ItemView를 만들 수 있습니다.
그러면 다음과 같은 구조가 생성됩니다.
좋은 뉴스
이제 예제 폴리머 응용 프로그램이 있으므로 "toptal-app.html"을 가져오고 태그를 추가하기만 하면 모든 웹 페이지에 삽입할 수 있습니다.
사실, 여기에는 폴리머 패러다임의 힘과 아름다움이 많이 있습니다. 애플리케이션에 대해 생성한 사용자 정의 요소(전체 애플리케이션에 대한 최상위 요소 포함)는 웹 페이지의 다른 요소로 처리됩니다. 따라서 다른 JavaScript 코드 또는 라이브러리(예: Backbone.js, Angular.js 등)에서 해당 속성과 메서드에 액세스할 수 있습니다. 이러한 라이브러리를 사용하여 고유한 새 요소를 만들 수도 있습니다.
또한 사용자 정의 구성 요소는 다른 사용자 정의 요소 라이브러리(예: Mozilla의 X-Tag)와 호환됩니다. 따라서 사용자 정의 요소를 만드는 데 무엇을 사용하든 상관없습니다. Polymer 및 기타 모든 브라우저 기술과 호환됩니다.
따라서 Custom Elements 사이트와 같은 포럼에서 새로 생성된 요소를 공개하고 공유하는 Element Creator 커뮤니티의 출현을 이미 보기 시작한 것은 놀라운 일이 아닙니다. 거기에 가서 필요한 구성 요소를 가져와서 응용 프로그램에서 사용할 수 있습니다.
반면에…
폴리머는 개발자, 특히 초보 앱 개발자가 찾기 어려운 거친 모서리가 많이 있어 다소 부서지기 쉽다는 것을 알 수 있을 만큼 충분히 새로운 기술입니다.
다음은 샘플링입니다.
- 문서 및 지침이 부족합니다.
- 모든 Polymer.js UI 및 비 UI 요소가 문서화되어 있는 것은 아닙니다. 때때로 그것들을 사용하는 방법에 대한 유일한 "지침"은 데모 코드입니다. 어떤 경우에는 폴리머 요소의 작동 방식과 사용 가능/사용 방법을 더 잘 이해하기 위해 폴리머 요소의 소스 코드를 참조해야 할 수도 있습니다.
- 더 큰 응용 프로그램을 구성하는 방법은 완전히 명확하지 않습니다. 특히, 요소 간에 싱글톤 개체를 어떻게 전달해야 합니까? 사용자 정의 요소를 테스트하려면 어떤 전략을 사용해야 합니까? 현 시점에서 이러한 유형의 문제에 대한 지침은 기껏해야 부족합니다.
종속성 오류 및 버전염. 권장되는 대로 Polymer.js 요소를 다운로드하더라도 동일한 요소의 다른 버전 종속성을 가리키는 종속성 오류가 발생할 수 있습니다. 폴리머 요소는 현재 과중한 개발이 진행 중이지만 이러한 종류의 문제는 개발을 상당히 어렵게 만들고 개발자의 신뢰와 관심을 약화시킬 수 있습니다.
- 모바일 플랫폼의 문제. 모바일 플랫폼에서의 Polymer.js 성능은 종종 실망과 문제 사이 어딘가에 있을 수 있습니다.
- 전체 라이브러리 및 폴리필(gzip'ing 없이)을 다운로드하는 것은 느리고 사용하려는 모든 폴리머 요소를 다운로드해야 합니다.
- 폴리필, 라이브러리 및 사용자 정의 요소를 처리하는 것은 모바일 플랫폼에서 비용이 많이 드는 작업으로 보입니다. 다운로드가 완료된 후에도 몇 초 동안 빈 화면이 표시되는 경우가 많습니다.
- 특히 더 복잡한 기능(예: 끌어서 놓기 또는 캔버스로 렌더링)의 경우 데스크톱에서는 제대로 작동하는 기능이 모바일 플랫폼에서는 제대로 작동하지 않거나 아직 지원되지 않는다는 것을 알 수 있습니다. 나의 특별한 경우에 내가 겪었던 좌절 중 하나는 iOS에서 캔버스로 렌더링하는 것이었습니다.
- 부적절하거나 혼란스러운 오류 보고. 때때로 속성 이름의 철자를 틀리거나 코어 레이어 자체와 관련된 것을 깨뜨릴 때 문제가 어디에 있는지 확인하기 위해 조사해야 하는 두 개의 호출 스택이 포함된 이상한 오류 메시지가 콘솔에 표시됩니다. 때로는 이것을 해결하기가 쉽지만 때로는 소스를 추적할 수 없기 때문에 오류를 피하기 위해 완전히 다른 전략을 시도해야 하는 경우가 있습니다.
결론
폴리머는 흥미로운 기술이지만 아직 초기 단계라는 점은 부인할 수 없습니다. 따라서 대규모 엔터프라이즈 수준의 프로덕션 준비 응용 프로그램 개발에는 아직 적합하지 않습니다. 또한 Polymer.js 웹 개발과 관련된 가이드나 튜토리얼이 많지 않습니다.
JavaScript 중심 또는 DOM 중심 접근 방식이 근본적으로 더 나은지 여부에 관해서는 아직 심사위원이 없습니다. 폴리머는 몇 가지 설득력 있는 주장을 하지만 반론이 존재합니다.
아마도 가장 주목할만한 점은 Polymer는 DOM과 같은 브라우저 기술을 사용하는 데 상당한 수준의 전문 지식이 필요하다는 것입니다. 여러 면에서 jQuery 이전으로 돌아가 DOM API를 학습하여 요소에서 CSS 클래스를 추가하거나 제거하는 것과 같은 간단한 작업을 수행하고 있습니다. 이것은 확실히 적어도 어느 정도는 앞으로가 아니라 뒤로 한 발짝 내딛는 것처럼 느끼게 합니다.
그러나 사용자 정의 요소가 미래에 웹 개발의 중요한 부분이 될 가능성이 높기 때문에 오늘날의 웹 개발자에게는 조만간 이 분야에 뛰어드는 것이 현명할 것입니다. 그리고 이전에 사용자 정의 요소를 생성해 본 적이 없다면 Polymer(및 이 튜토리얼)를 시작하는 것이 합리적일 것입니다.