在 2020 年(及以後)成為前端開發人員意味著什麼

已發表: 2019-12-19

你有沒有想過前端開發者前端部分到底意味著什麼? 我曾經問過 Eric Meyer(他建立網站的時間幾乎和有網站的時間一樣長)他是否知道這個詞在早期是什麼意思,他說是的。 所以,這不是一個全新的頭銜或職位,但多年來它的範圍肯定有所變化。

​​“前端”本質上是指網絡瀏覽器。 我認為自己是一名前端開發人員,如果你稱我為 Web 瀏覽器開發人員,我真的不會討厭它。 但是,這可能不會流行(聽起來有點像您構建 Web 瀏覽器)。 作為前端開發人員,您與 Web 瀏覽器密切合作並編寫在其中運行的代碼,特別是 HTML、CSS、JavaScript 和 Web 瀏覽器使用的少數其他語言(例如,像 SVG 這樣的媒體格式)。 或者,也許更常見的解釋是,最終被處理成瀏覽器可以理解的語言的代碼。 那是您作為前端開發人員的領域!

瀏覽器不是單獨存在的,它們運行在各種各樣的設備上。 我們通過響應式設計時代了解到這一點。 最重要的是:用戶在這些設備上使用這些瀏覽器。 沒有人比前端開發人員更貼近用戶。 因此,前端開發人員為使用在各種設備上運行的瀏覽器的人們編寫代碼。

7 隻手拿著不同的移動設備(如手機、筆記本電腦和平板電腦)的圖像。
圖片來自Shuttershock

​​僅處理龐大的用戶、設備和瀏覽器環境本身就是一項工作! 我認為你不是每天都從哲學上思考你的職位,這很好。 我們只是在這里和你的老爺爺克里斯做一點反思。

​​如果您剛剛從編碼訓練營畢業,並且您的網站建設經驗有些狹窄和新奇,如果您將前端開發視為“React”而將後端開發視為“Node”,那您可以原諒東西”或“Python 的東西”,這些都是當今最熱門的口味。 你也沒有錯。 React 通常用作前端框架(實際上是在瀏覽器中運行的 JavaScript)。 Node 和 Python 是不能在 Web 瀏覽器中真正運行的語言示例。 它們是為在 Web 服務器(呃,計算機)上運行而構建的。

​​在這個領域停留一段時間,你會看到這些庫、語言、構建過程,甚至是關於如何最好地構建網站的整個哲學都像慢潮一樣來來去去。

​​您可能會看到一些老前輩不時揮舞拳頭,大喊我們應該從過去的錯誤中吸取教訓。 您還可以看到一些特別喧鬧的年輕人同樣高高地揮舞著拳頭,宣布過去是無關緊要的背景,不再是有用的話題。

一個孩子很傻,另一個孩子看起來很生氣,正在揮舞他的拳頭。
圖片來自Shuttershock

​​​他們都是對的,大概吧。 只要沒有人討厭,這都是流程的一部分。

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​我發現今天的許多網​​站確實比過去的網站更複雜。 特別是大的。 社交網絡和媒體播放器。 旅遊預訂網站。 電子商務店面。 工程工具。 這些網站開始很大,而且只會變得更大。 他們是獨立的經濟體,擁有龐大的團隊支持他們。 這種複雜性是網絡技術變革的一個原因,也是新舊學校之間摩擦的一個原因(如果我們可以簡單地描繪它的話)。

​​許多從事技術工作的人基本上都在為一個大網站工作。 所以我們最常聽到這些人的消息。 這些人構建工具。 他們寫博客文章,他們繼續播客,他們發表演講。 他們幫助改變技術本身,以滿足他們的需求。

​​​一直以來,“前端”仍然只是瀏覽器。 瀏覽器語言、HTML、CSS 和 JavaScript 仍然是發揮作用的核心技術。 這些語言在發展,瀏覽器本身也在發展,但速度更慢。 他們的做法與硅谷最喜歡的口號完全相反:快速行動,打破常規。 它們移動緩慢,很少破壞任何東西。

​​​作為前端開發人員,仍然關心在那些設備上使用那些瀏覽器的用戶。 他們的經驗就是我們的工作。 工具只是幫助我們做到這一點,希望如此。

​​那麼作為前端開發人員,你在做什麼?

  • ​​您正在執行設計,使其在任何屏幕上看起來都不錯
  • ​​您正在將語義應用於內容
  • ​​您正在抽像地構建 UI,以便您可以有效地重用部件和样式
  • ​​您正在考慮瀏覽器中呈現的內容的可訪問性
  • ​​您關心網站的性能,這意味著您正在處理瀏覽器正在使用的資源有多大和多少。

​​​​這些事情一直都是真的,而且永遠都是,因為它們從根本上是瀏覽器級別的問題,而這就是前端。

​​​正在改變的是瀏覽器能夠進行越來越多的工作。 這有各種各樣的原因,比如瀏覽器 API 變得更強大、庫變得更高級、計算機變得更好。 多年來,將工作從服務器卸載到瀏覽器變得越來越有意義(單頁應用程序!)。 雖然觀看鐘擺向後擺動(預渲染站點!)並找到中間立場(JAMstack!)很有趣。

​​現在的前端開發可能還包括:

  • ​​構建整個網站,從最小的組件到整個頁面直至 URL 級別
  • ​​從 API 中獲取您自己的數據並根據需要操作數據以進行顯示
  • ​​自行處理網站的狀態
  • ​​通過用戶交互和輸入來改變/更改數據,並通過 API 將數據保持在狀態並返回到服務器

​​​這些都是現在可以在瀏覽器中完成的事情,讓這位老開發者睜大了眼睛。 當您認為這是您已經必須做的所有事情之上時,那真是一大堆責任。

幾個不同的人在大干草堆中尋找的圖像。
圖片來自Shuttershock

​​雖然這些工作的大海撈針多年來一直在增長,但我們作為前端開發人員所擁有的指路明燈並沒有太大變化。 我們的核心責任仍然是照顧在設備上使用網絡瀏覽器的用戶。 所以我們必須獲取一些數據。 這很酷,我們這樣做是為了構建一個快速、語義化、可訪問的頁面,以滿足用戶的需求。 所以我們需要建立一個設計系統。 這很酷,我們這樣做是為了為我們的用戶構建一個易於理解的界面,該界面能夠在不造成不一致混亂的情況下不斷發展。 所以我們必須學習一些新的不熟悉的技術。 好吧,我們的工作是密切關注並確保最終出現新事物以更好地為用戶提供我們的網站。

祝你好運!

Chris Coyier 在辦公桌前工作的照片。
照片來自飛輪內部攝影師 Kimberly Bailey

下一步:為什麼 Chris Coyier 選擇 Local 和 Flywheel 為其網站提供動力

了解 Chris 如何使用 Local 和 Flywheel 將他的網站提升到一個新的水平。 看看他最喜歡的功能是什麼,他如何依靠 Flywheel 遷移他的網站(免費!)等等! 點擊這裡了解更多。