我想我們現在是*全棧開發人員

*由“我們”，我的意思是前端開發人員。

這是2019年Jamstack Conf London演示文稿的書面版本，這是在一次不幸的山地自行車事故阻止我出席後創建的。我將其重新出現在此處出於檔案目的，並展示WordPress Gutenberg的功能。

？你好！我的職業生涯一直致力於前端發展，並幫助他人在這一領域表現出色。

和男孩，我的手臂累了。

我管理CSS-Tricks（最近慶祝其成立12週年），該網站致力於網絡開發資源。

我還共同創立了前端技術的社會編碼平台Codepen。

此外，我共同主持了ShopTalk Show播客，接近第400集。

通過這些經驗，我與無數開發人員進行了互動，獲得了對行業的寶貴見解以及網站創建的多方面性質。

定義前端開發人員角色

✅這是一個職稱和公認的職業。

這不僅僅是語義；這是相關的就業和頭銜的真正工作。財務補償強調了其重要性。

但是，我們如何定義這一角色及其期望是主觀的。

瀏覽任何技術工作委員會，您會為前端開發人員找到許多帖子。

定義前端開發人員角色（續）

✅直接與瀏覽器，設備和用戶進行直接交互。

儘管許多網絡專業人員每天都使用瀏覽器，但前端開發人員居住在其中，利用DevTools和在各種瀏覽器，版本和平台上進行測試。

至關重要的是，他們優先考慮用戶體驗，包括可訪問性注意事項。

米娜·馬克漢姆（Mina Markham）提供了對前端開發人員角色的高級解釋：[如果有的話，插入Markham的報價]。

後端開發人員存在區分；不是後端開發人員無視用戶，而是責任是分配的。

Monica Dinculescu恰當地指出：[如果有的話，請在此處插入Dinculescu的報價]。

瀏覽器是前端開發的核心。如果您的重點是瀏覽器中的事物的外觀和功能，那就是前端開發。這比經常承認的更具挑戰性。

定義前端開發人員角色（續）

✅儘管有多種工具，但依賴HTML，CSS和JavaScript。

這些是瀏覽器理解的基本語言。雖然涉及其他技術，但核心可交付的居住在這些語言中，而前端開發人員對此負責。

熟練水平各不相同；一些開發人員可能會寫最小的JavaScript，而另一些開發人員則專注於它。這導致了令人著迷的鴻溝。

我的文章“大鴻溝”探討了這種二分法：[如果有的話，請插入到文章的鏈接]。

這不是一個單一的觀點；許多開發人員承認這一分歧。

布拉德·弗羅斯特（Brad Frost）介紹了“前部”和“前後”，以對該部門進行分類。他強調說，這種多樣性是一種優勢。

在Google，這種區別在工作冠軍頭銜中得到認可和反映，對兩種職業道路都有同等的補償。

自2015年以來，JavaScript的突出是不可否認的。

（對於更大的視圖，請使用DevTools。您是前端開發人員，對嗎？ ）

我們的角色本質上令人著迷！我們都與瀏覽器，用戶和設備進行交互。但是，我們的專業知識和貢獻差異很大。

有些人專門研究設計，攝影，法律方面，績效優化，可訪問性或社交媒體。

隱喻地，我們可以將其視為分支樹。 [如果可用，請在此處插入樹圖]。

這個隱喻可能不是完美的，但它說明了分裂。我們分享基本技能，但分為不同的專業領域。一個分支重點關注JavaScript和“前後”任務，而另一個則沒有。

由於該討論以前端開發人員在全堆棧作品中的不斷擴展的作用為中心，因此讓我們專注於那些具有更強JavaScript技能的人。

網絡開發的不斷變化景觀

後端任務轉移到JavaScript

現在，在JavaScript領域內處理了許多先前考慮的後端職責的任務。

組件驅動的設計和開發

謝謝，JavaScript！

非JavaScript服務器端渲染項目很少包含組件（存在例外，但請考慮Rails Landscapes上的龐大的PHP CMS和Ruby）。儘管存在模板並包含在內，但與真實組件驅動的開發相比，它們蒼白。

有趣的是，儘管JavaScript框架之間存在分歧，但組件的概念被普遍接受。甚至本機Web組件也反映了這一點。

讓我們檢查Codepen（主要是反應供電）。即使是小SVG圖標也是一個組件。我們稱之為<svgicon></svgicon>組件是因為它抽象了有用的方面。

將圖標與數字配對是另一個組件，因為其重複模式和潛在的交互功能。

一排MetaItem組件可能會成為一個組件，以及項目的其他顯示方面。

因此，整個項目成為一個組件。

這些是UI結構的視覺和功能抽象。語義HTML為它們支撐，但這些抽像是自定義的構建塊。

較大的部分成為組成部分。項目網格成為管理佈局和分頁的組成部分。

設計人員經常使用“符號”在諸如Figma，Sketch和Adobe XD之類的工具中使用，從而在概念上與組件相似。

許多開發人員很容易理解組件。

站點級體系結構/路由

後端任務轉移到JavaScript（續）

傳統上，URL處理和現場結構是後端的關注點。現在，“路由”越來越成為前端責任。

[在此處插入代碼片段]

在Codepen的UI中，組件擴展超出了網格。一切都變成了一個組件：標籤，標題，按鈕，形式，菜單和側邊欄。

最終，整個頁面成為一個組件，有效地將URL轉換為組件。

所有URL成為組件，授予整個站點的控制。

這種建築責任是巨大的。考慮現有的前端工作量；它不會消失；它擴展。這解釋了前端開發人員的全棧式角色的越來越多。

國家管理，數據獲取和操縱

後端任務轉移到JavaScript（續）

大多數JavaScript框架中心的州管理解決了許多過去的前端意大利面問題。

但是，狀態通常依靠數據獲取，現在經常承擔前端責任。更新並將數據發送回服務器增加了進一步的複雜性。

GraphQL提供了強大的解決方案。它的價值有所不同，但對我來說，這是關於授權的。

借助強大的GraphQl端點和Apollo等工具，前端開發人員可以訪問UI構造所需的任何數據。

[在此處插入GraphQl查詢代碼段]

請注意，在組件中管理數據獲取和異步處理。是否應該使用骨架，旋轉器或延遲渲染？錯誤和超時如何處理？

還處理了通過GraphQL突變的數據操作和發送更新。

[在此處插入GraphQl突變代碼段]

突變並不比查詢要復雜得多，但這增加了前端開發人員的工作量 - 以前在後端處理的任務。

這些示例通過React中的Apollo客戶端說明了GraphQl。

關於組件，查詢，突變和样式，讓我們考慮共同列出樣式信息。

前端開發人員始終管理樣式，但是在獨立的組件中，共同融合樣式是有道理的。

在這裡，CSS模塊範圍樣式到特定組件。仍使用用於抽象的全球樣式和SASS。

[在此處插入CSS模塊代碼段]

[插入代碼段顯示樣式導入]

組件化和共同位置會導致包含邏輯，查看模板，查詢，突變和样式的文件夾。

這很方便，具有積極的副作用。 JavaScript捆綁包僅包含所需的內容（代碼分配）。造型不會膨脹；當組件未使用時，它們的樣式將被刪除。命名是由於文件劃分的命名而簡化的。

GraphQL紀錄片是有見地的。凱爾·馬修斯（Kyle Mathews）（20:24左右）討論了React對前端問題的影響和GraphQL的相似效果。

雖然不適合所有項目，但這種方法對大型，複雜的應用程序有益。

現有的前端職責：

• 設計實現
• 設計系統集成
• 可訪問性注意事項
• 性能優化
• 跨瀏覽器測試
• 跨設備測試
• UX注意事項

新職責：

• 組件驅動的設計
• 站點級體系結構
• 路由
• 數據獲取
• API相互作用
• 數據突變
• 國家管理

工作量大大擴展。這並不意味著每個人都必須掌握各個方面，但是這些任務屬於前端域。

佩吉·雷茲（Peggy Rayzis）討論了前端發展的擴大範圍和越來越多的專業化：[如果有的話，請在此處插入Rayzis引用]。

許多任務已從後端轉移到JavaScript。

不斷發展的技術範圍

讓我們檢查技術範圍的發展。

LAMP（Linux，Apache，MySQL，PHP）是一個重要的，儘管較老，但可以為許多CMS提供動力。該堆棧中的前端開發人員處於光譜的盡頭，與堆棧的核心技術相互作用。

平均值（MongoDB，Express，Angular，節點）包括角，前端框架。前端開發人員的工作與此堆棧更加重疊。

無服務器將堆棧向右移動。服務器身份變得較少相關；重點是服務器端代碼和API。前端開發人員甚至可以編寫無服務器功能並管理API。

肖恩·王（Shawn Wang）稱為設計系統，打字稿，阿波羅（Apollo）GraphQl和React“星”應用程序 - 所有前端技術。

技術討論越來越多地集中在前端開發人員頻譜上。

前端功能的無服務器擴展

我創建了一個有關無服務器技術的網站：[如果可用，請插入到網站的鏈接]。

我認為Jamstack（JavaScript，API，標記）是無服務器運動的一部分。 （shamstack可能更準確，開為舌頭）。

這是一個利用無服務器技術的jamstack網站：列出即將舉行的前端開發會議的網站：[如果可用，請插入到站點的鏈接]。

[在此處插入Markdown文件代碼段]

每次會議都是一個帶有元數據的前物質的降價文件。靜態站點生成器和平坦的刻痕文件是自然的。

該網站是公共GitHub存儲庫。這很重要：

1. 整個網站都在存儲庫中；部署涉及克隆和一個命令。
2. 不需要登錄，權限或憑據。
3. 內容，設計和功能是為公共貢獻而開放的。

GitHub頁面可以託管該網站，但Netlify提供了很大的優勢：

• 部署預覽
• 分析集成
• 編程圖像操縱

Netlify CMS為現場內容編輯提供了UI，消除了代碼編輯或GIT。 Netlify身份簡化了身份驗證。

考慮一個功能：一個按鈕顯示電子郵件輸入表格。提交電子郵件會觸發一封包含會議詳細信息的電子郵件。

這需要後端功能。僅客戶端技術不能發送電子郵件。使用API​​，但是API鍵需要後端代碼才能安全管理。

[在此處插入SparkPost代碼段]

SparkPost處理電子郵件發送。其node.js庫簡化了該過程。代碼是JavaScript。

這種運行情況如何？雲功能（AWS lambda，Azure功能，Google Cloud功能）是無服務器的關鍵。 Netlify使用NetLify功能（引擎蓋下的AWS lambda）。函數放置在A /functions/文件夾中，並通過相對URL訪問。

從前到後建立整個站點感覺很強大。

重新訪問的技術範圍

操作系統和服務器變得較小。可以在不關注這些產品的情況下製造整個產品。

數據庫不太關鍵；數據互動通常通過API（無頭CMS（如Foctful，以API為中心的工具）或Firestore等頁面上的庫）進行。

技術範圍允許與所有零件進行交互。

全棧功能

添加：

• GIT熟練度
• 測試技能
• 設計功能
• 建立過程知識
• 表演意識
• 可訪問性專業知識
• 部署管道設置

？
你天哪
右派
全棧
開發商！

然而，

技能很大。

專業化是可能的。

“實際”獨角獸（精通網站建設的各個方面的獨角獸）很少見。

後端開發人員仍然至關重要；網站複雜性需要他們的專業知識。

Codepen的問題跟踪器揭示了我不能孤單的任務。後端支持至關重要。我可以認為自己是全棧，但是後端技能是我的弱點。

現實通常類似於：[插入圖顯示前端和後端技能部分重疊的圖]。

或者，就我而言：[插入圖顯示的重疊量甚至更少，突出了無力的領域]。

這並不意味著貶義。這是一個隱喻。我們是整匹馬或龍，但邊緣粗糙。

令人興奮的是，技術使我們能夠涵蓋整個過程。當複雜性提高進入障礙時，會出現擔憂。但是，當技術簡化過程，使個人能夠獨立構建事物時，這也令人鼓舞。

請記住，質量是每個人的責任。

• 好UX
• 良好的表現
• 良好的安全性
• 良好的可訪問性
• 用戶的道德待遇

即使不直接參與影響這些方面的代碼，也倡導其適當的處理。

Codepen Pro（支持您當地的手工藝軟件產品）

以上是我想我們現在是*全棧開發人員的詳細內容。更多資訊請關注PHP中文網其他相關文章！