Polymer Web App 구축기 (1)

Polymer를 프로젝트에 사용하게 된지 어느덧 1년가량 되었다. 그동안 서너개의 프로젝트를 0.5 버전부터 지금의 1.1버전으로 개발을 하였고, Amsterdam에서 열린 첫 Polymer conference를 다녀와서 마이크로소프트웨어에 이 내용을 기고 하기도 했다.

이번 글은 Polymer를 이용해 개발하면서 겪은 여러 애로사항과 이슈들. Polymer conference로부터 얻은 정보를 기반으로 하여 해결한 사항들과 앞으로의 웹앱의 미래에 대해 조망해보고자 한다.

• Polymer + Firebase 의 조합

Firebase는 Realtime database 로 Facebook의 parse와 같은 데이터 API를 제공하는 솔루션이다. object로 collection을 구성할 수 있고 offline pushing 및 쉬운 authentication 및 deploy를 제공하는 특징이 있다.

다른 특징으로는, security rules를 각 object마다 적용하여, 쓰기/읽기 권한을 적용할 수 있고, 여러개의 프로젝트 콘솔을 만들 수 있고, 처음 무료 버전을 쓰더라도 많은 유저가 사용하여 다음 pricing 단계로 이동하기 전까지 성능 이슈없이 이용할 수 있다.

Polymer와 Firebase는 궁극의 조합이 될 수 있다. 데이터 바인딩 및 비동기 적인 데이터 Syncing과 authentication. 기존 웹 UI와 바인딩하는 방식이 서버로 call을 하여 response를 받아 각 object를 해당 element에 연결해주는 지저분한 방식이라면, Polymer+Firebase를 이용하면 명시적이고 간편하게 서버 연동이 끝난다. 뿐만 아니라, 데이터 업데이트에 따른 실시간 웹 데이터 반영은 덤이다.

다만, 이 연동을 무턱대고 하면, 이 후에 performance적인 문제 및 데이터 비동기 불일치에 따른 버그로 상당한 시간이 소요될 수 있음을 깨달았다.

Firebase의 authentication을 이용하면, 구글, 페이스북, 트위터 같은 oauth login과 email,password 로그인 및 회원가입을 손쉽게 구현할 수 있고 유저를 콘솔에서 편리하게 관리할 수 있다. 유저가 있는지 없는지에 따라 element를 이와 같이 관리할 수 있다.

<paper-dialog modal opened=”{{!user}}”>…</paper-dialog>

유저 세션이 없을경우, 특정 dialog를 띄우는 형태이다.

데이터를 put하고, 해당 uniqKey에 직접 접근할 수 있는 url이 주어지기에, 기존의 일반적인 서버와 같은 DB 쿼리를 날리고 결과를 가져오는 방식과는 차이가 있다. 해당 child url의 Object 전체를 가져와서 이를 필터링하거나 정렬하는 방식이기에, 복잡한 서버 프로세스를 필요로 하는 서비스에는 맞지 않을 수 있다.

List와 같은 형태를 구현할때, 해당 child의 object array를 바인딩하는 것이 dom-repeat을 이용하면 쉽게 가능하고, nested한 dom-repeat도 가능하다. 다만, firebase의 object를 dom-repeat items의 array로 변형해야할 경우가 있는데,

arrayify: function(obj) { if(obj==null) return null;

var that = this; var arr = Object.keys(obj).map(function(k) { return obj[k]; }); return arr; }

이와 같이 해당 object를 넣어주면 된다.

Polymer가 제공하는 element에는 Firebase를 위한 element 가 있다. (firebase-collection, firebase-document, firebase-auth) 이 element를 활용하여 간단하게 구현도 가능하지만, Web API 를 직접 이용하여 컨트롤 하는 것이 더 명시적으로 보인다.

또 하나의 장점 중 하나는 배포 단계인데, firebase-tools npm을 install 하고 배포하고자 하는 root폴더에서 firebase deploy 하면, firebase 쪽으로 파일이 업로드 되고 기본적으로 [id].firebaseapp.com 형태로 url을 가지게 된다. 이 url을 커스텀 도메인과 연동할 수 있으며, 이를 위해서는 pricing 다음 단계로 결제를 해야한다.

• Polymer power tools

이번 컨퍼런스에도 발표된 바 있듯이, Polymer 팀은 더욱 생산적인 개발을 위해 여러 지원 도구를 제공하고 있다.

Polyup https://github.com/PolymerLabs/polyup : v0.5에서 v1.0을 손쉽게 변형해주는 도구

polyserve https://github.com/PolymerLabs/polyserve : 간편한 웹 서버 실행

vulcanize https://github.com/polymer/vulcanize : Html file을 minimyzing 및 concateration을 적용해주는 툴

crisper https://github.com/polymerlabs/crisper : CSP를 위해 html file을 분리해주는 도구

polybuild https://github.com/polymerlabs/polybuild : production 배포를 위해 위의 vulcanize, crisper, poly clean을 한번에 실행해주는 빌드용 도구

polylint https://github.com/polymerlabs/polylint : polymer 구문 오류를 잡아주는 도구

polygit http://polygit.org/ : Polymer element CDN url을 제공.

polydev https://github.com/PolymerLabs/polydev : polymer devtools 로서, 성능 분석에 용이.

위의 도구들이 설치되어 있는 Polymer starterkit ( https://github.com/PolymerElements/polymer-starter-kit )을 이용하면 빠르게 웹 개발을 시작할 수 있다.

Polymer starterkit의 advanced 버전을 이용하면 위의 도구들이 기본적으로 설치되어 있으나 상용적으로 이용하기에는 커스터마이징할 요소가 많다. 특히, 빌드스크립트의 gulp 요소 및 paper-element를 대체하는 등의 요소가 필요하다. 이것이 불필요하다면, lite 버전이 간단하기에 이를 사용하는 것이 좋다.

• Adaptive UI

다양한 모바일 스크린 크기에 대응할 수 있는 UI를 제공하기 위해, paper-element는 이것들이 모두 대응 되어 있는 material design 형태의 모듈을 제공하는데 이를 이용하면 모바일 디바이스별 대응 UI를 쉽게 구현할 수 있다.

iron-media-query 모듈을 이용하면, 디바이스 크기별 액션및 css를 적용할 수 있다. on-query-matches-changed 핸들러를 통해 해당 스크린 사이즈가 감지되면 특정 액션을 호출할 수 있다.

<div class$=”{{_computeStyle(largeScreeen)}}”>

_computeStyle: function(largeScreen){

return largeScreen? ‘large’ : ‘small’;s

}

이런 형태로 스크린 사이즈별 class를 분리하여 적용할 수 있다.

다음 글은 웹앱을 구축하면서 얻은 성능적인 이슈 및 여러 애로사항 및 팁을 중심으로 전개하고자 한다.