我認為前端的職責可能需要重新劃分

語言: CN / TW / HK

作者 | Murat Çorlu

譯者 | 平川

策劃 | 閆園園

“前端”的新職責和挑戰都將越來越多。我們每天都聽到新的 Web API,如 Web Assembly、Web Worker、Web GPU 等。我們為應對那些新增的層所做的工作不僅和“基本 UI”相關。相反,我們會藉助瀏覽器提供的新功能,將之前在後端處理的一些東西移到“前端”。

本文最初發佈於的 Murat Çorlu 個人部落格。

在雲服務的高度抽象的幫助下,大多數專案的後端工作都日益減少。僅使用一些公有云服務(如 Firebas 或 CloudKit)提供的動態協同資料,就可以創建出功能完備的客戶端應用程式。我們不需要維護任何伺服器,就可以實現身份驗證。有許多身份驗證提供者,甚至是一些身份驗證服務,都可以幫我們做到這一點。

而且顯然,事情不止於此。不難想象,將會有更多的資料庫服務,我們可以直接從前端讀取或寫入資料,而且安全、高效。專案的大部分後端工作將只是多個雲服務之間的相互連線和配置。

那麼,每位 Web 開發人員都將是一名“前端開發人員嗎”?當然,總還是需要更為底層的伺服器端專家的,至少還需要他們來建立那些雲服務。但是,Web 專案中 90% 的工作可能將在客戶端完成。這將意味著,“前端”的新職責和挑戰將越來越多。

這一點,從每天都會聽到的新 Web API(如 Web Assembly、Web Worker、Web GPU 等)中就可以看到。我們為應對那些新增的層所做的工作不僅和“基本 UI”相關。相反,我們會藉助瀏覽器提供的新功能,將之前在後端處理的一些東西移到“前端”。

以 Web Assembly 為例。Web Assembly 讓我們可以在瀏覽器中執行一些庫,而且具有原生效能。你不能在 Web Assembly 層做 DOM 操作。不過,你可以做一些非常消耗 CPU 的事情,如影象處理、資料加密,甚或是機器學習。

Web Workers 讓我們可以在渲染週期之外執行其他 JavaScript 例程,而且不會阻塞 UI。WebGPU 讓我們可以充分利用 GPU 的能力,更高效地進行影象計算、加密計算或 3D 渲染。WebRTC 讓它可以與客戶端 App 的另一個使用者建立點對點連線,併發送 / 接收任何資料,包括影片流或音訊流。檔案系統訪問 API 提供對使用者本地檔案系統的完全訪問,可以讀 / 寫檔案和目錄。

作為前端開發人員,我們在日常工作中並不熟悉這些東西。與此同時,真正的 UI 工作並沒有減少。建立持久、可重用、靈活、易用且可訪問的元件仍然是一項很大的挑戰。設計師和產品所有者的工作乾淨利落,才能帶來最好的 UI 和最佳的使用者體驗。

因此,我希望將來,人們會考慮將 Web 客戶端開發中的這些新職責分開。讓我起名的話,我會稱之為“Web UI”和“Web Core”。

Web UI 開發人員

或許,我們可以將 Web UI 開發人員的職責大致羅列如下:

  • Web 元件

  • CSS

  • 路由

  • 表單

  • 動畫

  • 可訪問性

  • Web 字型

  • 畫布

  • SVG、SVG 過濾器

作為前端開發人員,這些都是我們很熟悉的工作事項。它們都和 UI 及使用者互動直接相關。我們都知道,如果你考慮成為所有這些領域的專家,並能夠建立一個實現相當不錯的 Web 應用程式,會面臨許許多多的挑戰。

這個領域也是當前流行的 Web 框架所針對的領域。我們可以用 Lit 構建元件,用 Angular 管理複雜的表單,或是用 Tailwind 建立響應式網格。(最後一個是開玩笑。)

Web Core 開發人員

Web Core 開發人員可能主要負責業務邏輯和客戶端 App 中類似服務後端的部分,主要包括資料管理、業務邏輯和可擴充套件性(和當前後端開發人員的工作非常類似,是嗎?),它們不會直接修改 UI。如果要為 Web Core 開發人員列出一些技術名稱的話,或許可以列出下面這些:

  • WebGL——WebGPU

  • Worker

  • WebAssembly

  • Web Crypto

  • IndexedDB

  • 檔案系統訪問 APIWebRTC

沒有 React 或 Angular,這裡沒它們什麼事。但對於複雜的 Web 應用程式,那些 API 就像是寶藏。此外,面對一位資深 React 開發人員,問他 WebGPU 或 WebAssembly 的專業知識是不公平的。

示例專案團隊結構

考慮一個管理照片 / 影片的 Web App 專案。我們將開發一個 Web 應用程式,可以向庫裡新增照片和影片,並可以對它們進行編輯、分類或分享。

我們不會為這個應用開發任何後端程式碼。我們將使用一個數據庫服務和一個檔案儲存服務,並搭配一個身份驗證服務一起使用。這些服務都是完全託管的外部服務,影象 / 影片編輯將完全在客戶端完成。我們將以端到端加密的方式將所有資料儲存到儲存服務上。

如你所見,在這個專案中,不管是 UI 還是“Core”,都有相當多的事情要做。UI 端的挑戰有:

一個精緻的 UI,用於顯示和搜尋照片和影片,以及將它們新增到庫中。一個功能齊全且易於使用的 UI,用於編輯影象和影片。和其他人分享相簿,評論照片。儘可能提高該 App 的“可訪問性”。

另一方面,Core 端也面臨著巨大的挑戰:

  • 編寫一些“Web Workers”,以非阻塞的方式與雲服務通訊。

  • 編寫一個非常高效的影象操作庫。

  • 編寫一個非常高效的影片編輯庫。

  • 一個加解密 API,在將影象和影片傳送到儲存服務之前以及獲取到它們之後對其進行加解密。

將部分資料儲存在本地,使 App 可以離線執行,並能稍後通過服務同步。

我想,當我們像這樣列出任務時,任務型別的劃分就非常清楚了。“Web Core”任務是純粹的 I/O 挑戰,從不涉及 DOM 或 CSS。另一方面,“Web Core”團隊將為“Web UI”團隊提供的 API 與當前“前 - 後”端世界的 API 非常相似。JS 介面代替了 REST 或 GraphQL API。

小    結

頭銜和學科並不是讓開發者永遠堅守職責的高牆。相反,它們幫助我們一次只專注於一件事。注意力分散是我們這個時代最嚴重的疾病之一。我認為,對於每一位 IT 專業人員來說,關注質量而不是數量是非常有價值的。

今日好文推薦

是什麼讓 Redis“氣急敗壞”回擊:13 年來,總有人想替 Redis 換套新架構

活動推薦

:fire:重磅上新|Web 3.0 入局攻略

究竟何為 Web 3.0?從 Web1.0 到 Web 3.0,網際網路到底經歷了什麼?想去相關領域創業,抓住未來機會,到底該從哪做起?推薦研讀上 新專欄《Web 3.0 入局攻略》 ,帶你剖析不同領域內的典型應用案例,快速上手! 新人僅 ¥59 ,原價 ¥129,掃海報搶