mithril 開發官網記錄

短期官網開發記錄

最近公司有個臨時的官網需求,想要兩個禮拜內就要出爐,聽到這麼急的需求,當下我當然是有點傻眼,因為只有我一人做,然後重點還要等設計圖,做電腦版還有手機版,跨平台的版面有時候可是很難搞的…尤其是也不是說很簡單的設計,所以其實挺趕的,因此在設計圖出來前,就先大概想像的應用情況,以下來講一下我的考量。

library 規劃考量

這邊因為頁面一開始得知,設計想要做single page application,想當然我可以先決定一個主軸library來使用,這邊我是找個類似react的library來使用,為何我不用react呢? 是有幾個考量

  1. library 大小太大
  2. 跟es5的js library相性不好(也就是不好結合)
  3. 需要搭配bundle tool

基於種種考量,這裡我選擇了mithril js,至於理由很簡單你把上面理由全都相反過來就好,再加上這個官網性質其實並沒有大型或複雜到需要用很有系統的寫法,用react就有點大材小用,個人覺得除了故意要學習用途外,每一個library都有適合他的地方,不是誰誰誰就是棒,其他都爛爛爛,轉回正題,mithril js 其實api簡單,文檔也很不錯,基本上讀完文檔她的用法你就懂了,唯一要注意的就是life cycle的beforeremove method,這個後面的地雷區會提到!

再來這邊我想到了多語系問題,之前我都是用django的i18n,但是這次由於頁面是用js來渲染的,所以我把i18n相關的功能也讓前端負責,我用的套件是i18next,使用方法很多這邊就不多介紹了XD 很方便的是你可以直接把把內容寫在js裡,包在json格式就好,後來隨著設計慢慢有想法後,需求也漸漸明朗,考慮到部份動畫需求所以就用到了svg,這裡相關套件是snap svg,再來就是頁面滑動效果是整頁一頁一頁捲動,直接給你們看我是用什麼套件就知道我想要表達什麼,我用到的是fullpage js,這個library的start數會那麼高,其實也不是沒理由,真的寫得不錯,接口留得不錯,很好用,最後考量到根據平台不同(手機或電腦)我需要渲染不同的html組件,因此我需要一個偵測user agent的library,這邊我是用到mobile detect js,這邊總結一下我用到的主要library有哪些:

從這邊可以發現有許多lib都是用es5寫法吧,mithril js他是可以用es5和es6寫法的,這也是我選擇他的主因,當然他的渲染效率也是頗高,或許有人會說他不需要用套件自己都可以寫,當然拉,全部任何東西都可以自己寫啊~ 包括react你也自己寫一個給我看看,在兩個禮拜內,從前面這邊看到重點了嗎? 期限!! 許多東西都是基於時間而有所考量和採取應變措施,可以跟你說實際上我寫官網的時間只有八天,就得上線囉,後面會講到時間分佈。

套件研究

關於套件的研究,其實大致上我都是先看文檔,與這個open source community活耀度,來決定是否使用它,裡面大概只有svg我是直接看網路上教學文較多的來選擇,因為svg我之前沒用過XD 只有看看文章的了解程度而已,所以想藉由教學來快速上手,剩餘我上面列的套件,其實都挺簡單的,建議各位可以簡單寫寫東西,看看library是否和各位客官的口味再決定是否使用喔。

實際開發

再來就講講我實際上開發時遇到的問題,也就是我事前沒想過遇到的事情,其實正常下都一定會發生意料之外的事情拉,所以建議預估時程最好留個幾天用來應付意外的,還有保留一些事後修修改改的時間囉,因為頁面做出來後,是有可能會被要求那可不可以怎樣怎樣的,下面就來講講主要遇到的地雷 :p

遇到地雷及瓶頸

第一要來講的就是svg! Oh my godness! 他讓我耗費最多時間,因為設計師用AI產生的svg檔,跟他用AI上所看到的,實際上有所出入,我這邊是不知道為啥他弄出來後,少了好多好多的漸層和透明效果,我花了一些時間研究,有線索提出可能是svg內容產出的時候沒有把 mask linear gradient 等等放入,def裡面,因此..我抱著一線希望手動把上千行的svg內容整理,呼呼~ 這邊實在是幸好 spacemacs 對於文字編輯的好用,讓我省了一些時間,但是我也花了一整天在整理… 整理完之後,的確部分效果有出來了! 但是還是有些效果沒有出現..於是乎,我自己手動加上那些效果,參數也是自己猜,才幾乎還原到85%的樣子,總結上,光是讓svg正常顯示我就花了兩天時間,開發時程有八天兩天就噴掉了。

關於mithril js的life cycle的onbeforeremove這個方法,一開始我卡了半天,他竟然意外的難以觸發,官方說法是Note that the onbeforeremove hook only fires on the element that loses its parentNode when an element gets detached from the DOM其實這句我有看沒懂XD,最後我看github issue有點說,建議你的元素一定要被包在array裏,然後…就真的成功了,天殺的超難觸發的,另外這套件網路上的教學其實可以不用看,因為都有點過時了,建議直接看文檔就好~

其實我在整理svg的時候就有考慮是否放棄改成用切圖,然後展現動畫效果,可是能夠做的還是比svg少很多,但是基於我想學點東西的心態,其實我還是努力的去弄XD 畢竟這也是我離職前被託付的工作,也希望動畫效果能夠好些,而且responsive效果也不賴,畢竟svg自己就會去縮放了,但是事情沒有到這邊就為止,之後我使用了svg snap這個套件,遇到了天殺的問題..

svg snap

一開始我有在教學網站試玩了snap,想說還算挺好用的,也大概玩出點心得,可是就當我開始去下載官方最新版snap 0.5.x ,開始開發專案,發現莫名的,我是動畫位置總會莫名偏移,這邊我就直說了,我花了半天..終於發現這是一個超大bug,像是你想要旋轉一個長方形360度,這樣簡單的功能就會爆掉了,他的中心點會無故地亂跑,我看到github上面已經有人發出issue,個人建議是如果你想用的話,就先使用0.4.x版的吧,這版你會用得比較快樂,但是由於遇到這些種種地雷,svg動畫方面我就先暫時擱置了,轉而先把版面先弄好再說,因為畢竟可是有電腦版和手機版,而且就算是電腦版也有不同螢幕尺寸問題,需要一定時間去調整。

responsive

基本上這邊遇到的不同手機顯示會有點差異的問題會比較大,就算一樣是google chrome,但是在iphone和在android顯示就是會有不同,這邊我個人其實就是換不同的css寫法,達到一樣的排版效果試試看,切記開發者工具的介面只能參考參考,一切還是以實體機為主,畢竟開發工具的模擬無法完全正確,這裡主要我遇到有一個神奇的bug? 應該說個人猜測是瀏覽器解釋行為不同,用手機看這網站,原本右上角漢堡排,是要過一段時間才會突然從畫面右邊跑進來,一個很怪的現象,但是iphone卻除了這個以外,我的header做邊LOGO卻整個往上移跑版了,一直找不到原因,但是過了一天後,我卻突然靈光一閃,想到是不是我那個漢堡排從右邊影響到了LOGO排板,經過各種分析後,我看到唯一的盲點是,我的header width是用 100%,我以為body的100%是螢幕所視範圍,但是iphone的表現行為讓我感覺body的width是變動的,個人猜測是我寫的動畫內容有擠到,所以我就把width改成 100 vw,竟然就真的解決了這個問題,但是我不知道為啥android上面原本就是正常,然後這個專案我有故意一直用flex來進行排版,感覺flex支援性已經很不錯了,反而有些用flex來排效果還比較好,相較之下反而用 % 好像還比較容易有神奇bug。

另外對於fullpage這個套件,因為手機browser有個討厭的地方,就是你只要往上滑後,瀏覽器的header就會自動隱藏,但是fullpage其實在一開始的時候就會自動計算寫死,每頁的高度,當瀏覽器header自動隱藏後,就會發現高度沒有滿版… 關於這邊我只好使用比較髒的手法, height: 100vh !important,強制覆寫掉inline style。

退而求其次

基本上各平台版面調完後,我也大概預料到應該就到deadline了,事實上也的確如此,因此svg動畫那邊,我就沒有特別花時間去設計了,畢竟那邊若要講求一點,可能也要弄掉一天的時間,加上在手機是另外一種呈現,才讓我覺得動畫部分就先暫時擱置,感覺做專案趕時程就是這樣囉,原則上當然以能夠做越多為優先,但是也要量力而為,能夠做出來的就要有品質保證,而不是每個都隨便做都保證有做出來。

總結

其實我主力於後端,前端我也只是拿我其他程式語言的背後實力,過來騙吃騙喝,哈哈! 對於css算是摸了不少屬性和特性,但是對於怎麼寫個好結構的css目前尚未有個結論,js方面其實這個專案我並沒有用什麼架構,畢竟沒多複雜,但是其實若時間上允許的話,我建議各位是可以多用用pure js拉,瀏覽器已經越來越支援了,除非你想要支援ie8…那種,你可以看看不需要jQuery,我大學是個jquery愛好者,因為跨瀏覽器實在太好用。

要是時間充裕下我個人會偏好使用es6 + mithirl js + i18next,剩下功能就手動來吧XD 只是我只能說很多很多時候,由於時間因素必須有所抉擇,react真的有點過於肥大…當然往後時代網路越來越快的情況下,可能也不算什麼了吧XD,至於svg好用的js套件,snap我不知道該不該建議,他問題不少,除了最新版本(0.5.0)那個超大bug外,還有個cpu 100%的問題,效能吃很兇,這邊或許該找找其他library來替代,不過等我之後想對於svg有更深入的研究會再來寫個部落格,這篇就大概記錄到此囉,重點部分都大概列出來了。