Skip to content

Latest commit

 

History

History
66 lines (36 loc) · 6.17 KB

chapter1.md

File metadata and controls

66 lines (36 loc) · 6.17 KB

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

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

歷史淵源

在以前根本沒有分所謂的前端與後端,所有內容都是一個工程師包辦全部,或是設計師兼網頁排版,也就是網頁設計師。那為什麼會多了前端工程師這個名詞呢?原因是瀏覽器逐漸進步的緣故,十幾年只要你會寫一個 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 幹很多事情,例如說: