最近在軟體開發的社群裡,愈來愈常聽到「前端工程(Front End Engineering,F2E)」或「前端工程師」這類的名詞,相較於過去,這完全是新的名詞。

在這一回中,就讓我們來介紹和這個名詞相關的種種概念和想法吧。

前端程式設計獨立出來的發展歷程
在最初的Web應用程式開發模式裡,甚至早在Web應用程式之前,不論是有使用者介面(UI),或是沒有使用者介面的(Console/Terminal)的應用程式,通常都是由程式設計工程師,來負責程式的開發。

在開發團隊裡,通常會有專門的視覺設計人員(或者最起碼會有外包的視覺設計人員)來負責產生視覺設計的產物,像是圖片、動畫,以及在畫面上的配置關係。但對程式設計而言,其實是沒有什麼專門的分工。

身為一個程式設計者,你或許一方面要寫出程式處理資料的計算及存取,另一方面,也必須同時撰寫和圖形式使用者介面相關的各種處理邏輯,因為在分工的模式裡,這都是屬於程式設計師的工作範疇之內。

而所謂「前端工程」中的前端,即指一個應用系統和使用者接觸的部份。使用者和使用者接觸的組成是什麼呢?基本上就是使用者眼睛所看到,以及透過輸入裝置(像是鍵盤、滑鼠、觸控螢幕)所能操控的部份。

相較於「前端」,另一邊的組成自然就是「後端(Back-end)」,所要處理的,也就都是毋需直接碰觸到使用者的部份,像是資料的計算、資料庫的操作及存取等等。

在軟體的組成上,明確分出了「前端」及「後端」,跟著也就伴隨著將程式設計的工作,也明確分出了「前端工程師」,以及「後端工程師」兩種角色。由於工作內容變得涇渭分明,所需要的技能取向,也就被明確區分開來。

例如,我們在人力銀行的網站上,已經時常可以看到公司徵才的職務名稱上,明確寫出「前端工程師」之類的職稱。

這說明了,將程式設計師的工作,依據「前端」和「後端」的分工方式來區分,已經成了一個很普遍、很流行的作法了。

網頁應用程式開發的興盛,前端應用的模式崛起
在現在,大家聽到「前端工程師」,甚至會直接聯想到就是Web應用程式的前端工程師,這當然是因為人們會開始這麼區分,基本上就是基於Web應用程式的開發模式的。

在最早的Web應用程式開發模式裡,基本上和使用者接觸的環節,就是單純的HTML,所以視覺的呈現單純,而接受輸入的方式也單純(滑鼠點擊及HTML表單輸入)。

所以,只要美術的視覺人員可以提供HTML及相關的設計圖,接著,若程式設計師要加以套用時,並沒有太多的困難。也因此,並沒有什麼前端的工程可言。

但是,隨著Web應用程式逐漸成為主流,對應的相關技術也不斷產生和發展,諸如CSS及JavaScript的相關技術,讓Web應用程式和使用者接觸的組成,不僅豐富,同時也複雜了起來。

從技術上來說,熟悉HTML、CSS及JavaScript是Web前端工程師的重要條件,而這些技能取向,又和傳統程式設計師的訓練大相逕庭。

即使JavaScript也是個程式語言,透過JavaScript也是在編寫程式,但是編寫程式時所圍繞的議題,又和傳統程式設計訓練所關心的不大相同。就像是效能最佳化的方式和技巧,在前端及在後端都是截然不同的課程,所運用的工具、方法,以及所涉及的技術和領域,也都大不相同。

因此,當前端工程的重要性被重視之後,伴隨著衍生出來的部分,即為前端工程所需的專業技能,而這些技能是十分獨特的,這正是「前端工程師」的角色應運而生的重要原因。

前端程式設計的溝通面向大不同

另一方面,和視覺設計人員或是使用者體驗工程人員溝通時,所重視的面向,並不同於探討運算及資料處理的商業邏輯,或是探討系統架構。

因此,當人們在討論「前端」時,關心的議題及取向,是不同於討論「後端」的。有了專門的「前端工程師」,不但可以有熟練相關前端技術的工程設計人員,而且他們可以更擅長、更樂於與視覺設計人員,或是使用者體驗工程的人員溝通,以便提供更好的前端使用者體驗。

有了「前端工程師」這樣的同事來幫忙,我想,會有很多喜歡「後端工程」的程式設計者,都會因此鬆了一口氣吧。

因為他們不需要再去處理一些他們並不是那麼擅長,或是那麼喜歡處理、面對的前端相關事宜。他們可以更專注在他們喜歡的工作類型之上。

相反的,也會存在那麼一群人,就是享受開發前端的樂趣,也樂於發展自己在前端工程上的技能,因而不斷地精進。

將前端和後端區分開來,意謂著軟體開發的分工,在程式設計的環節上,變得更為精細。而這個分工的意義,不僅是在技能上,同時也是在個人的興趣上。

不同的工作角色分工模式早已出現
早從著名的MVC(Model View Controller)設計模式被發明出來時,就「明示」著這種角色分工的方式。在這個設計模式裡,將應用程式的組成分為三塊,其中View的部份,負責處理視覺的呈現,而Model的部份,則處理諸如演算法、資料庫操作等。

一旦將應用程式畫分為這三個組成之後,也代表著程式設計人員可以依此來分工。事實上,將應用程式分為這三種組成之後,不同的分工角色就可以平行開發,之後再來整合。這也正是MVC設計模式可以帶來的優點之一。

以Web的應用開發來說,前端和後端的介接介面,可以是一組RESTful的API,而這組API象徵的後端可以提供的服務,所以後端工程師只需要專注的完成這組API的實作即可。而另一方面,前端工程師的責任,便是在於運用前端技術呈現出視覺及使用者體驗設計的樣貌,同時透過這組API獲得後端所提供的服務。

透過這組API,可以讓前端和後端的工程師各自發展自己所應專注的事務,甚至在後端的API實作尚未完成之時,就可以利用一組「dummy」的API,讓前端的工程得以很快展開。

所謂dummy,即在於API的實作並不是真正最後的實作,而是一些簡易、甚至只是回傳固定回傳值的實作,並不會耗去太多的時間和代價,就可以有一份「長相上」符合API介面的實作。

它的作用,就是在於讓前端的工程可以盡早開始,不必受限在後端的開發進度。待後端的API實作完成或陸續完成時,再進行整合。

這樣的工作模式,一方面可以因此得到了MVC模式的好處,另一方面也符合現今專業細緻分工的趨向,讓前端或後端的工程師,都能專注在自己所喜愛、所擅長的領域,發揮最大的合作效應。

從前端工程師的興起,說明了現今程式設計的分工是趨於愈來愈精細,而一位優秀的前端工程師所能發揮的作用及價值,也是同樣十分巨大的。

作者簡介


Advertisement

更多 iThome相關內容