iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
2
Modern Web

前端工程師養成手冊系列 第 29

時勢造英雄,奠定前端工程師的未來發展

來到這裡,我相信你已經對前端工程師的工作內容有些輪廓,這裡我將會順便講解前端工程師的由來,以及主要負責的工作項目有哪些讓你知曉。

歷史淵源

在以前根本沒有分所謂的前端與後端,所有內容都是一個工程師包辦全部,或是設計師兼網頁排版,也就是網頁設計師。那為什麼會多了前端工程師這個名詞呢?

原因是瀏覽器逐漸進步的緣故,十幾年只要你會寫一個 HTML,就算介面超醜沒 CSS 也可從中賺取非常好的收入,隨著瀏覽器能夠有很多嶄新功能,也讓網頁技術也跟著進步,以致於工程師的技術水平要求也水漲船高,舉例來說:

  • CSS:設計的東西也開始講求美感,需運用 CSS 還原設計稿樣式
  • AJAX:在 2007~2008 年,AJAX 技術帶來嶄新的發展,讓使用者能夠不換頁便能更新網頁內容
  • 使用者體驗:電子商務也在同時間盛行,所做的介面也需要講求使用體驗,好讓使用者能夠經由網站引導達成他們想做的事情
  • 瀏覽器:各個瀏覽器如雨後春筍般出現,初期只能用「災難」來形容,毫無共通標準可言,一個 HTML+CSS 排版各自表述
  • 網頁效能:不只能讓網頁動,同時也會考量效能進行優化

從上面的細節你可以依稀看出前端工程師的職缺為何會脫穎而出,因為要得已經不是一個會動的網頁,而是具備優良使用者體驗的網頁介面了。

同時也需兼備左右腦的運作,美感與邏輯也需要一定的程度,才能夠將設計師提供的設計稿忠實地在網頁上呈現,我們甚至會說 1px 也不差地還原到前端介面上便是如此。

前端工程師職缺開始流行的重大關鍵

而真正開始奠定前端工程師的蓬勃發展,我個人認為是在 2007~2012 開始有了飛躍性的發展,原因如下:

智慧型手機盛行

第一代 iPhone 在 2007 年問世,讓大家對手機有了足夠的信心,但也造就了許多開發上的難度,例如說每個手機系統上的瀏覽器非常多元,在 2012 年時,Android 系統竟多達 4000 種型號,也伴隨著螢幕解析度的多樣性,小則 240px,大則 1920px,這對沒有前端工程師的軟體公司來說無疑是個頭痛的問題,因為光程式商業邏輯就已經無暇應付,更何況還需要處理瀏覽器 client 端上的功能是否能運作正常。

響應式網頁設計

2010年 Ethan Marcotte 發表了 Responsive Web Design (響應式) 設計,以 CSS3 Media Queries 的設計核心以解決網頁解析度問題,也打破了大家都認為手機版網頁只能是單欄式排版,而是能夠自適應螢幕解析度適時呈現單、雙、三欄式設計方式

綜上所述,軟體公司也開始發現,前端介面無形間增加不少 Loading,原本全包的工程師光是資料庫商業邏輯就忙得要死,接下來又還得確保各載具上瀏覽器跟解析度問題而忙上加忙,而這個工作你也沒辦法交由設計出身的 UI 來負責,於是乎「前端工程師」的職稱也依時勢推出。

前端工程師的主要工作內容

現階段大家都會提到只要是前端就一定要會 XX 語言,要會那個框架、要會什麼工具,但就以我的觀點來說,前端工程師的工作項目應該是最瞭解「網頁瀏覽器」的工程師。

你應當成為瀏覽器的先鋒,當 w3c 出了任何的草案、ECMAScript 出了哪些規範時,瀏覽器也會適版本號依序地納入新語法,在大家還在用舊語法實作功能,你早能領先一步看出該瀏覽器技術預期將會成熟,並納入未來專案導入項目中,讓自己的公司有足夠的技術能量,成為業界的領頭羊。當瀏覽器顯示介面有問題時,你能透過內建的開發除錯工具找出緣由並加以解決,不論是預期外的 BUG 或是效能問題都是你該挽起袖子解決的問題。

所以在實作一個前端介面時,至少你該先瞭解網站客群特性,例如完全沒有在用 IE,以 Chrome 為主,甚至到 can i use 觀察語法支援性。如果你在不瞭解瀏覽器需求的情況下便貿然進行開發,我可以說你是個不及格的前端工程師。我時常遇到許多朋友都吃過不少這樣的虧,當客戶對瀏覽器一知半解時,也沒有訂下瀏覽器支援性的合約,以致於開發結束後才發現客戶族群都是用特定瀏覽器,那剛好你用的語法都是最新最潮的 beta 版語法,只有少部分主流瀏覽器有支援,以致於花了更多時間在重構,那就非常不好了。

已往多方領域發展,不局限於網頁介面

很多人都會認為前端工程師只是負責「網頁排版」,但已現在的趨勢來說,前端工程師能夠發展的空間已經多到你沒辦法想像,這有助於歸功在 JavaScript 身上,現在的前端可以用 JavaScript 幹很多事情,例如說:

  • electronjs:寫一個跨平台的桌面應用程式
  • Node.js:跨足後端,或倚賴核心開發各種應用程式
  • React Native:設計雙平台 APP
  • pixijs:透過 WebGL 開發動畫核心,跨足 3D 世界
  • A-Frame:將 3D 介面以 VR 模式進行運作

以上隨便列舉的項目,都足夠你投入個好一陣子,讓自己能夠成為前端特定領域的翹楚,所以當你在向他人講解前端時,應該知道如何介紹前端的廣度了吧?

最後再補充各類前端介紹文章,讓你對前端工程師有著更深入的瞭解


上一篇
如何規劃前端職涯,成為百萬前端
下一篇
設計師投入前端的不二法門
系列文
前端工程師養成手冊30
0
SunAllen
iT邦好手 1 級 ‧ 2018-01-01 02:26:58

好專業@@

0
SunAllen
iT邦好手 1 級 ‧ 2018-01-01 02:27:02

好專業@@

0
牛哥
iT邦好手 1 級 ‧ 2018-01-01 07:13:59

新年快樂!

我要留言

立即登入留言