轉轉徵人頁面開發記事

  1. 1. 主要架構
  2. 2. 開發過程
  3. 3. Polymer 感想
  4. 4. 最後

banner

徵人頁面

這次的專案需求相對自由,不用管 IE 死活,對技術也沒特別要求,加上只有單一頁面,所以我決定用最單純的開發環境來進行。

主要架構

  • 主框架:Polymer,用官方的 polymer-cli 創建專案。
  • 輔助工具:BrowsersyncSVGOMG(線上 SVG 壓縮工具)

沒有 webpack,只有用 polymer-cli 預設的指令打包壓縮。

開發過程

基本上由於頁面單純的關係,沒有遇到 Polymer 比較深的坑,到是 css animation 眾多,導致在網頁效能上耗費許久,Chrome 沒有太大問題,然而 Firefox(57 beta 版)的 CPU 使用率卻降不下來,不得已只好先在 Firefox 下把部份動畫取消,但這幾天更新的版本似乎處理掉這個問題了,所以又重新把動畫給加回去,穩定版的就請自求多福。

Polymer 感想

初次看時覺得很像 Vue.js,甚至覺得 Vue 如果能直接結合 web component 的技術應該也不錯。

摸索時最讓我困擾的,大概就是 CSS 作用域的控制,由於每個元件裡面的 html 元素都被 Shadow DOM 包裝起來,所以 css reset 起到的作用其實不大。但是 CSS 可以額外使用的功能很靈活,可以直接設定 var 值來把 component 預設值蓋過,不須透過 js 來傳參數,相對簡潔許多。在大致了解內建的 :host::slotted 的用法後,一樣的元件用 Polymer 做或許會比用 Vue 要來的簡潔。

開發期間唯一遇到一個算是坑的大概是初始 js 載入這件事,最一開始的頁面需要載入一支 webcomponents-loader.js 作為引導,在開發期間不會有什麼事,但打包之後卻無法在 Firefox 正常執行,得改成 webcomponents-lite.js 這支有加上 polyfill 的 js 才行。

Polymer 給我的感覺比較像是可以在一般專案裡,將複雜的元件剝出來獨立處理,而不是整個頁面都直接這樣開發,至於 Polymer 跟直接使用 web component 差別在哪,我目前也沒有頭緒。

最後

對轉轉工作有興趣的人請跟我們聯繫吧!