政府網站營運交流平台 - 國家發展委員會
:::

再也不一樣的前端

點閱次數:206     資料來源:國家發展委員會     發佈日期:

以往我們在網站製作上,就前端工程這個範圍來說,就是把視覺設計師所設計的平面稿從圖片轉換成可互動、點擊的頁面,不外乎就是 HTML與 CSS還有 javascript,這些彷彿千年不變的根基,在近年來由於技術的進步也開始有了改變。這個轉變的起點我覺得要從 jQuery的誕生開始說起。jQuery的誕生讓程式人發現,原來我們其實可以透過其他的方式來幫助其他人更快、更方便的使用javascript,不太需要像以前那樣學習冗長不變的寫法,省去真的去學習原生的 javascript腳本語言,可以直接學習 jQuery,來提升網站的互動性,讓網站活起來,也讓網友更加驚喜。

jQuery是什麼呢?jQuery是用 javascript寫的一個資源庫,如果你可以想像電腦都是透過01010101的訊號所組成你眼前在電腦上看到一切,而你可以透過 Word打字輸入你想要的文字,然後讓 Word儲存資料之後,再透過 OS編譯、轉換成010101的訊號,再儲存於硬碟上,那這個對你來說很方便的工具肯定就是 Word了,所以對於需要冗長撰寫、門檻稍高的 javascript來說, jQuery就好比 Word一樣,讓你簡單學習、快速上手,就好像有如 Word的神助,讓你寫文章可以非常順暢一般,透過 jQuery可以更快、更簡單的學習 javascript,而且寫出吸引人注目的互動效果,比方說頁面在 loading時會有數字在奔跑,或是換頁時網站會有淡入淡出效果,又抑或是很多網站常見的左右切換圖片效果,透過 jQuery的誕生,我們開始習慣了這些透過 javascript帶來的轉變。

然後 HTML與 CSS也絕對不容小覷,為什麼呢?因為 HTML是整個網站的基礎,面對 HTML的巢狀結構,大部分的HTML標籤都是成雙成對的,只有少部分是只有獨立一個,當頁面開始變長時,這些標籤就會越看越複雜,但有時候就開始會出現少一個結尾或多一個開頭現象,但是為了節省開發速度,程式人也研發了 pug(以前叫 jade,因為有撞名糾紛所以改名叫 pug)與 haml這兩種工具,這兩種工具解決了我們在 HTML巢狀結構中容易出錯的問題,也加速了 HTML在開發的速度。因為Haml、pug的緣故,我們可以把HTML做拆解,共用的部分可以獨立出來,最後在用include功能彙整再一起,可以有效劃分頁面結構,降低維護的難度。至於 CSS我們開始有 LESS與 SASS的選擇,對於時常需要運算的部分, LESS與 SASS提供了自動運算,並且讓 CSS有了變數功能,我們可以明確定義一些數值,並且徹底地重複運用,比方說網站的顏色,通常在設計上會有主要的三到四種配色,我們可以利用變數來做設定,屆時如果要更換色系,我們只要改變變數的數值就可以了,比起以前要一個一個找出來改速度快很多,而且還不會漏掉。最重要的是運用 LESS或 SASS可以把 CSS更加架構化,讓 CSS更有條理,對於網站維護上更佳容易。著名的 RWD Framework 響應式網站資源庫 Bootstrap,一開始就採用了 LESS來組織 CSS架構,一直到3.0版本後才開始也採用 SASS來編譯 CSS,由此可知現今直接編寫 CSS的機率已經開始減少。

但這些都不是重大的巨變,真正帶來巨大轉變的是 node.js,當 node.js誕生之後,透過 javascript就可以運行撰寫後端程式,導致前端工程師不再只是單單的前端,可以從前端跨到後端去,你會逐漸地發現這樣的轉變讓前後端變得更密不可分,以前只有後端工程師會提倡的MVC,現在前端工程師也會開始提MVVM,甚至有一段時間後端工程師顯得有點手足無措,由於node.js的誕生,也開始讓後端工程師吹起了研究 javascript的熱潮,甚至開始想學起前端工程來,不過由於前端的技術變化太大也太快,整個就是殺的大家措手不及,有一點想學也不知道從何學起,甚至新手想踏入前端世界時,也一整個覺得不知道該如何下手,這也是前端工程師目前人才有點缺乏的原因。前端工程再也不是單純的HTML、CSS與javascript,雖然靠原始的HTML、CSS與javascript還是可以製作網站,但是就沒有辦法完整的切分前後端的工作範圍,以及維護也會較為費力。

除了 node.js以外,由 Google推出的 Anglur.js、 Facebook推出的 React,以及最近突然爆紅的 Vue.js,都是現在前端界裡最新、最紅的技術,這些是什麼技術呢?其實這些技術有點類似 jQuery,也是採用 javascript開發的資源庫,但是既然已經有了 jQuery,那為什麼還要其他的 javascript 的資源庫呢? 主要是因為傳統動態程式語言,以前後端工程師都會將頁面拆解,然後將程式撰寫於頁面上,導致網站的前端檔案被拆散,讓前端工程師要維護時顯得有些困難,但是現在這個問題可以徹底解決,因為 Anglur.js、 React或 Vue.js 主要就是在處理頁面結構與資料的部分,可以徹底劃分前後端,讓 HTML的頁面更加單純,不會有程式碼在上頭,前端工程師可以更佳掌握頁面的組成。
使用 Anglur.js、 React或 Vue.js ,前端工程師可以透過 ajax技術,讓後端將所需的資料組合成 json檔案,然後再透過 Anglur.js、 React或 Vue.js 將 json的資料插入頁面中,除了前端可以更加掌握頁面組成,徹底運用 ajax也可以減少主機連線數或是減少主機運算,可以說是優點多多,所以才讓這樣的技術變得非常熱門。

Vue.js是目前來說入門門檻較低的其中一個framework,學習十分容易也簡單,透過官方網站文件的教學與解說,你可以在短短10分鐘就可以開始上手用,但如果要精通就需要多花一點時間,而概念上與 Anglur.js或React 其實差不多,所以先透過Vue.js學習概念,之後只要研究 Anglur.js與React的寫法就可以快速轉換,目前採用 Anglur.js比起React的可能會稍微少一點,因為由於 Anglur.js每次推出新版都會讓前端工程師需要重新學習寫法甚至概念,而且Anglur.js 版本二與版本一寫法完全不同,目前也已經公佈版本三會再重新推翻一次寫法,所以漸漸的讓前端工程師越來越沒耐心在學習 Anglur.js上。

如果想要學習 Anglur.js、 React或 Vue.js ,但是時間有限,以難易度來說 Vue.js是入門簡單、門檻最低,算是輕量型 Framework,可以透過 Vue.js先學習一些架構與思維,而 React則是比較齊全,所以要學習的東西較多,相對來說門檻就高。至於 Anglur.js ,由於 Anglur.js每次改版近乎規則與用法就會做調整,所以每次 Anglur.js更新幾乎就會掀起一片哀嚎,以至於 Anglur.js的支持者紛紛開始轉跳到 React或 Vue.js,當然對於比較晚出現的 Vue.js反而是個優點,對於這樣新型態的 javascript framework,如果對這部分完全沒有概念,花點時間看一下 Vue.js的官方網站,相信很快就可以快速上手,進入一個全新的前端時代!

作者:Nowill(張芳瑩) 品禾全端網路工作室策略總監

相關連結: