“前端”工匠系列(一):合格的工匠,究竟該搞什麼 | 京東雲技術團隊

来源:https://www.cnblogs.com/jingdongkeji/archive/2023/05/05/17373191.html
-Advertisement-
Play Games

此文為系列文章第一篇,為淺嘗輒止的引入,目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是乾什麼的這個話題有個無門檻的瞭解。 ...


作者:京東零售 劉偉東

此文為系列文章第一篇,為淺嘗輒止的引入,目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是乾什麼的這個話題有個無門檻的瞭解。

“前端職能是什麼”

說起"前端",維基百科對這個技術角色的定位是“前端(英語:front-end)和後端(英語:back-end)是描述進程開始和結束的通用辭彙。 前端作用於採集輸入信息,後端進行處理。 電腦程式的界面樣式,視覺呈現屬於前端。”對於當下服務於互聯網各企業的前端研發人員來說,這個崗位定義是很清晰的。前端是個對於後端的相對概念,它的崗位角色更應該關註“採集和呈現”兩個部分。

從以上的概念來看,前端研發的正常職責是通過編碼工作對數據及業務邏輯進行展示,用戶通過操作界面(或其他交付方式)與系統進行交互,最後用戶的交互信息可以按照功能邏輯的預期傳輸到後端服務遞交給業務後端及更下游的演算法層處理。

“編碼工作包括什麼呢?”

前端研發人員工作對接的上游干係人包括產品和UI設計,必要輸入有產品文檔和UI設計稿件,下游干係人為後端研發人員,必要的輸出為一整套界面交互及邏輯處理實現代碼。

產品要向研發團隊輸出PRD(產品需求文檔Prodcut Requirement Document的簡稱)來對此次產品或者迭代的具體的功能細節進行詳細的描述,通過需求評審會議的方式與研發人員和設計人員進行“語言的互通轉換及翻譯”工作,得以把所有的產品邏輯向不同專業人員表達清晰,這是一切需求交付最重要的環節。對於新增的或者複雜的需求,需要有交互設計人員與產品人員共同輸出交互設計稿件,從另外一個維度對產品需求邏輯進行闡述,對於前端研發人員對於需求理解的清晰程度來看,交互設計稿件的嚴謹和質量十分重要。

UI設計人員需要根據產品需求文檔和交互設計稿件對界面的UI風格、色系及動效等素材進行設計畫製作,向研發人員輸出UI設計稿件,此項工作需要前端研發、產品和設計人員進行多輪溝通以便敲定所有元素細節。UI設計稿件的設計質量和對產品邏輯的描述精細度,直接對前端研發人員的編碼設計方式和效率產生影響,前端研發人員必須對UI設計稿件有足夠的重視,避免在實現過程中反覆與產品和設計人員對設計稿件的細節進行確認甚至重新設計。如果這種情況出現,勢必對項目的排期產生影響。最後,前端研發的界面輸出要通過UI設計人員的驗收測試才算完成界面編碼工作。

與後端研發人員的對接是研發工作中的重中之重,最終,一整套前後端研發人員公認的經過冒煙用例自測的代碼包才是此階段的合格產出物。介面規範、約定習慣以及默契度較高的對接伙伴,都是業界不斷在研發調試、聯合調試以及提測冒煙過程中提效降本的思路。“一切都是人的事”“約定大於習慣”這些對軟實力、流程的嚴謹程度都提出了要求。

研發流程中最後的步驟是UAT驗收後上線。上線一定要採用“流水線自動化”的方式才行,也就是大家常說的“CI/CD”。只有這樣做,才能保證主幹版本代碼與線上代碼版本完全保證一致,不會因為人為把自己本地代碼編譯打包後發佈到線上,導致主幹分支成為擺設;所有上線相關的合併、編譯、打包、發佈等核心流程都是流水線自動跑事先部署在流水線各個節點的腳本,才能避免人為操作“失誤”導致的線上問題。

“上線了?”

上線是個很值得探討的話題,因為對於研發來說,只有上了線並且發揮了預期或者超預期的業務價值的代碼,才算是對企業、對社會有一點點貢獻,個人的價值才能在工作中得以體現。上線完成就是研發工作的結束嗎?對於很多研發團隊來說,這就是最後一步了。但是,研發流程僅僅止步於此,是不符合“合格”這個標準的。一套代碼,只有在上線後,才開始受到真正用戶的親測使用,研發人員的產出物才算是“生命開始”。產品功能在用戶的使用中“表現是否符合預期”、“是否有邊界異常”、“是否存在打不開頁面的情況”、“是否存在顯示異常的情況”,諸如此類的問題,都應該是產研需要關註的話題。

因此,研發人員需要預先在代碼包中預留與線上真實用戶“交流”的抓手,通過分析用戶在“可用性和性能”做出可以提升用戶體驗的改進措施,例如,“特殊邏輯自定義埋點上報”、“邊界兜底監控”、“系統運行時監控”等,只有做到了這些,才能說對一個用戶功能的真正上線,後續也才有精細化運營的可能。可是,對於很多研發人來說,“上線即需求的終點”、“線上問題由業務反饋”、“有客訴嗎?”都是研發普遍存在的心理。

那如何通過“預先”的方式建立與用戶之前的溝通通道呢?因為此文為前端領域文章,所以我們此次只說前端部分。

“與用戶交流”

有效的交流是需要以有效的信息為載體的。對於技術實現來說,就是對核心代碼塊進行合理的代碼埋點。當特殊用戶行為發生時,當代碼處理邏輯走向了一個非正常的處理單元時,當發生了代碼處理邏輯沒有覆蓋到的情形時,埋點上報代碼就會觸發執行,向中心化的埋點服務發送消息。技術人員通過對此次用戶行為觸發的埋點信息的分析,從而得到用戶在瀏覽或操作頁面過程中的“正常或異常”情況的“現場復現”,當然,這種復現可以是數據信息,也可以是截圖或視頻回溯,具體要用什麼方式來複現用戶行為,要以“有效”為目標,綜合考慮“用戶流量成本、研發成本、性能影響以及存儲成本”等因素來最終選型。

“實時 OR T+1”

對於業務前端用戶行為及觸發邏輯的監控,有實時監控和非同步監控兩種。

在實時關註用戶行為、實時分析等場景里,需要使用實時監控,這個“實時”,一般到秒級就夠用了,一些業務使用分鐘級也是可以的,具體看業務的需要。對於實時監控,上報行為是從每一臺用戶的設備上觸發並上報的,應用於大體量業務來說,這個數據量的採集、上報、收集、存儲、分析和報表的生成,都是相當耗費資源的。為了降本提效,埋點服務首先會對用戶數據按照特殊的規則(比如正態分佈)進行一層比例的抽樣,降低分析及報表生成過程中對資源和人力的消耗。

在用戶端日誌查詢、特殊邊界場景復現、日誌排查定位故障等場景,“實時”就不是必要的,這種場景下一般採用T+1查詢,但是又引入了大量級日誌的存儲周期的話題,一般企業應用級的用戶日誌保存14天就完全夠用了,因為對於C端日誌來說,更多的是對現場故障的復現、處理及跟進,如果演算法策略對用戶日誌有需要,只需要在一定時間內採用處理任務對用戶日誌進行一次處理,把輸出的標簽、行為特征等關鍵數據存儲就可以,基礎的用戶日誌還是應該被存檔或清除釋放資源供給更有價值的最新日誌來使用。

綜上所述,實時監控和非實時監控分別應對兩種場景:實時對應“業務可用性、線上運行時異常”等使用訴求,非實時對應“性能指標、用戶日誌查詢、用戶行為復現”等使用訴求。

“後續”

之後會繼續講述一些有關"用戶體驗、效率提升、頁面搭建"相關的話題。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:本文主要介紹GaussDB(DWS)網路流控能力,並對其管控效果進行驗證。 本文分享自華為雲社區《GaussDB(DWS)網路流控與管控效果》,作者:門前一棵葡萄樹。 上一篇博文GaussDB(DWS)網路調度與隔離管控能力,我們詳細介紹了GaussDB網路調度邏輯,並簡單介紹瞭如何應用網路隔 ...
  • 0. 前情提要 系統的某個用來上報數據的介面存在死鎖的問題。這個介面內部對多張表進行了Update操作,執行順序為A表、B表、C表、D表、A表。死鎖發生的SQL,一條是第一次更新A表的SQL,另一條是第二次更新A表的SQL。整個更新都處在一個事務內,理論上講,只要第一個Session開始執行事務,第 ...
  • Redis事務(Transaction)通過將多個Redis操作封裝為一個原子性的操作序列,確保在事務執行過程中,不會受到其他客戶端的干擾。從而在保證數據一致性的同時,協調併發,提高數據操作的效率和性能 ...
  • 如何優雅的將項目中的代碼,亦或是你的demo代碼展示到界面上?本文對使用簡單、便於維護且通用的解決方案,進行相關的對比和探究 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 Symbol是JavaScript中的原始數據類型之一,它表示一個唯一的、不可變的值,通常用作對象屬性的鍵值。由於Symbol值是唯一的,因此可以防止對象屬性被意外地覆蓋或修改。以下是Symbol的方法和屬性整理: 屬性 Symbol.l ...
  • 前言 之前寫了一個vue+django的一個通過串口控制的上位機系統。但是實際生產中,不如部署到伺服器上,這樣可以更好的節約成本。但是這樣就需要弄一個客戶端來控制處理串口信息。那我就在想能不能通過網頁直接拿到客戶端的串口信息。所以問了萬能的chatgpt,得到了以下答案: 是的,前端可以使用 Web ...
  • 在 HTML5 中,文檔對象(即 document 對象)具有一個 visibilityState 屬性,該屬性表示當前文檔對象的可見性狀態。 visibilityState 可能的取值有以下三種: - visible :表示文檔當前處於激活狀態,即當前選項卡處於前臺或當前視窗處於屏幕最上層。- h ...
  • 在隨筆《基於SqlSugar的開發框架循序漸進介紹(28)-- 快速構建系統參數管理界面》中介紹了基於SqlSugar開發框架,構建系統參數管理的後端API部分,以及WInform界面部分內容,本篇隨筆介紹基於Vue3+ElementPlus的前端界面開發過程。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...