對前端開發人員的責任擴大

本文擴展了我以前的文章“當前端意味著全棧”，最初在Stripe的增量雜誌中出現。它建立在“大鴻溝”和“哦，我想我們現在是全棧開發人員”中探討的主題上。

我的前端旅程始於wordpress的style.css 。使用幾行代碼來轉換網站的力量令人著迷。通過HTML和CSS，我可以並且可以 - 可以 - 鼓勵購買或社交共享。

甚至在專業前端工作之前，我都體驗了藝術和邏輯的獨特融合。這是一種表現力的藝術形式，但受到溝通和業務目標的約束。

前端發展是一個引人入勝的十字路口：

• 藝術和邏輯：創造性表達和技術精確度的融合。
• 商業和表達：將業務目標與藝術設計平衡。
• 左右大腦：參與分析和創造性思維。
• 設計和啞光：將美學敏感性與技術專長相結合。

我的教育背景反映了這種雙重性 - 計算機科學與藝術課程的融合。

“前端開發人員”一詞被廣泛理解為職稱。但是，在公司之間的角色差異很大，使職位的描述符不足。展示實用技能是關鍵。

克里斯·科伊爾（Chris Coyier）前端開發人員

儘管標題可能有所不同，但核心重點仍然保持一致：瀏覽器的網站。

• 前端=瀏覽器
• 後端=服務器

儘管工作角色不斷發展，但這種基本的區別仍然存在。

“以瀏覽器為中心”的開發提出了獨特的挑戰。儘管進行了標準化的努力，但瀏覽器的不一致仍然存在。最近的一次遭遇強調了這一點 - 日期字符串在Chrome中正確解析，但在Firefox中造成了錯誤。這是前端發展的現實。

除了瀏覽器差異之外，用戶行為還增加了另一層複雜性。屏幕尺寸，深色模式，顏色域，像素密度，帶寬和輸入方法（鍵盤，鼠標，觸摸）都會影響用戶體驗。這些注意事項同樣適用於桌面和移動設備，並通過HTML電子郵件變得更加明顯。

這種眾多未知數需要從前端開發人員採取全面的方法。

最關鍵的方面？用戶。這是我們工作的原因。他們是我們CSS藝術的受眾，我們的小部件的潛在買家，反應影響我們工作的個人。這些用戶正確地放置在基座上，代表了瀏覽器以外的不同景觀：不同的語言，需求，能力和緊迫水平。前端開發人員彌合了代碼和用戶之間的差距。

前端開發使我們處於最前沿，將我們的創作直接與用戶聯繫起來，這是許多人感到有意義的職位。這是在考慮反應之前。

對以用戶為中心的強調似乎是不言而喻的。理想情況下，從首席執行官到實習生的公司的每個成員都應優先考慮用戶。但是，前端開發人員的角色是獨一無二的。當我們編碼<button></button>，我們將交互元素直接放置在用戶的瀏覽器窗口中。調整顏色直接影響用戶的視覺體驗。

這類似於陶瓷藝術家塑造咖啡杯。它正在將工藝應用於數字體驗。雖然後端開發人員可能會非常關心用戶，但正如莫妮卡·迪肯斯庫（Monica Dinculescu）恰當地指出的那樣，他們經常“外包責任”。

前端開發人員是瀏覽器專家。掌握HTML，CSS和JavaScript是基本的。這不是過時的教條；數十年的經驗證實了它的重要性。即使與預處理程序或框架一起工作，瀏覽器也最終會收到HTML，CSS和JavaScript。調試和瀏覽器優化是關鍵職責。

儘管CSS仍然是我個人的最愛，而HTML需要不斷關注，但JavaScript值得特別檢查。它從一個簡單效果的工具到整個Web堆棧中的主要語言的演變是顯著的。現在，只能使用JavaScript構建整個網站。

JavaScript在瀏覽器中的功能超過了HTML和CSS的功能。它可以通過解析HTML創建的DOM（文檔對像模型）和應用樣式的CSSOM（CSS對像模型）。

但是，這並不是完全準確的。 HTML首先被解析，這是網站速度的關鍵方面。理想情況下，僅使用HTML提供了網站的基本信息和功能。

這種哲學被稱為漸進式增強。雖然我為此而努力，但完美的依從性並不總是可行的。一個<button></button>可以在沒有JavaScript的情況下運行，但是通過JavaScript添加AJAX提交會增強用戶體驗。同樣，在JavaScript執行之前，完全取決於JavaScript的元素可能不會呈現。有時，實用性勝過嚴格的堅持： “只要按下按鈕，山姆。沒有人會死的。”

JavaScript的主導地位使其成為Web開發人員的主要重點，尤其是其改進的人體工程學和強大的框架。馬特·穆倫維格（Matt Mullenweg）的2015年建議“深入學習JavaScript”仍然很重要。 JavaScript在前端開發中的增長，尤其是在工作需求方面，是不可否認的。

儘管網站統計數據可能顯示出使用REACT的頂級網站比JQuery的比例較小，但職位發布講述了一個不同的故事，這是這些數字的逆轉。

前端開發人員的實際日常任務包括：

• 將設計轉換為代碼。
• 跨設備實施響應式設計。
• 構建可重複使用的組件和圖案。
• 應用語義HTML。
• 確保可訪問性。
• 優化網站性能。

即使是第一點本身就感覺就像是大學課程。

讓我們將其應用於假設的網站：

我們的思想競賽！

• CSS網格用於佈局。
• 字體優化：子集或滿載，並處理字體變動。
• 創建可重複使用的卡組件。
• 用CSS變量定義和管理配色方案或像Sass這樣的預處理程序。
• 優先考慮屏幕讀取器的源順序。
• 優化圖像格式（PNG，JPG，下一代格式）和ALT文本。
• 將內聯SVG用於圖標。
• 決定前端框架（React，Vue，Svelte）和構建系統。
• 考慮CMS集成（無頭或其他）。
• 計劃互動：重點狀態，過渡等

這說明了前端開發人員的思維過程。許多任務反復出現，但是每個項目的具體挑戰各不相同。

這使我們獲得了文章的標題。

儘管許多任務多年來一直是工作的一部分，但新職責正在出現，尤其是在現代JavaScript框架中。組件的概念對於這些框架至關重要。組件允許為項目量身定制的可重複使用的抽象。

這種基於組件的體系結構將前端開發人員提升到站點級架構師。一個頁面可能由嵌套組件（卡，按鈕，圖標，網格，標頭，側欄等）組成，每個組件都有自己的邏輯和样式。這通常涉及處理URL和路由，有效地使前端開發人員負責該網站的整體體系結構。

組件很少包含硬編碼數據；它們充當模板，通過JavaScript獲取數據。這通常涉及API（例如，帶有Apollo客戶端的GraphQl），並管理組件本身中的數據獲取和更新。這是另一個不斷擴大的責任。

除了API數據之外，網站還管理內部狀態：活動選項卡，模態對話框，手風琴狀態，錯誤消息，分頁，滾動位置等。有效地管理此狀態至關重要。從使用DOM作為真理的來源轉變為更複雜的狀態管理解決方案（內置於框架或通過第三方庫）是一個重大變化。前端開發人員現在負責架構和實施此狀態管理。

強大的國家管理和可重複使用的組件的需求導致了設計系統的興起。從系統上建造組件是自然的進步。

返回我們的設計示例：

出現了新的注意事項：

• 選擇JavaScript框架及其含義（靜態與服務器端渲染）。
• 設計數據獲取（GraphQL API）。
• 選擇一個CMS（無頭或其他）。
• 定義必要的組件及其相互作用。
• 管理客戶端狀態。
• 實施身份驗證。
• 利用第三方組件（例如，圖像加載器）。

這些職責被添加到設計實施，語義，可訪問性和性能優化的現有任務中。前端開發所需的技能正在不斷擴大。

這種增長是由Web的擴展驅動的：使用情況增加，更廣泛的互聯網訪問，不斷增長的網絡經濟以及越來越強大的瀏覽器。

專業化變得越來越普遍。一些開發人員專注於設計和HTML/CSS，而另一些開發人員則專門研究系統或數據管理。儘管所有人都可能擁有“前端開發人員”，但他們的角色和職責可能會有很大差異。

我們討論網站開發的方式也發生了變化。 LAMP堆棧（Linux，Apache，MySQL，PHP）完全集中在後端。平均值（Mongo，Express，Angular，節點）引入前端技術（角，節點）。 Node.js的出現使JavaScript開發人員可以同時處理前端和後端，從而模糊了角色之間的界限。通常使用Node.js的“無服務器”體系結構進一步擴展了前端開發人員的覆蓋範圍。 Star（設計系統，打字稿，Apollo，React）代表完全建立在前端技術上的堆棧。

擴大的職責可能令人生畏。感到不知所措很普遍。專業不僅可以接受，而且建議。專注於感興趣的領域並建立專業知識。

唯一的常數是變化。擁抱它。

Å我是一名白人男性，提供了很大的優勢。 ↩️²瀏覽器支持許多其他語言（HTTP，SVG，PNG等）。更廣泛的知識增強了能力。 ↩️“具有諷刺意味的是，許多WordPress站點不是使用客戶端JavaScript組件構建的。 ↩️

以上是對前端開發人員的責任擴大的詳細內容。更多資訊請關注PHP中文網其他相關文章！