iT邦幫忙

2021 iThome 鐵人賽

DAY 1
1
Modern Web

React.js 職場實戰!最常見的需求與解法!系列 第 1

React.js 職場實戰!最常見的需求與解法! — 前言

哈囉!我是 Harry,這次想和大家分享的是前端工程師的「工作日常」,我們可能會接到什麼需求,又該如何完成需求,這些都是工程師再熟悉不過的日常生活。

如果你想嘗試前端,卻對前端職場感到陌生而卻步,也許這個系列可以幫助你找到自己的方向。


系列內容

本系列的主要內容,都會提供當下的場景以及收到的需求,並提供對應的解決方案,大致上可以將架構分為:

  • 場景描寫(我的產品是什麼)
  • 需求描寫(遇到什麼問題)
  • 需求分析(列出解決方案)
  • 完成需求(執行解決方案)

舉例來說 —

場景描寫

我們的產品是一個展示圖片的網頁,網頁已經完成並上線了,你正喝著咖啡欣賞著自己寫下的優美程式碼,此時 PM 的聲音將你拉回現實:

需求描寫

「有用戶反應載入的速度很慢,圖片根本就跑不出來!可以幫忙看一下是什麼問題嗎?」

這時候,你的第一個反應可能是,「我的程式有問題⋯怎麼可能,失、失序了⋯」,這是很正常的反應,我們辛苦寫出來的程式碼居然被質疑有問題,這對工程師來說無疑是個沈重的打擊。

需求分析

但身為一個專業的前端工程師,我們必須拿出專業的態度來檢視並解決這個問題,所以首先我們要想一下自己的程式哪裡可能會有破綻 —

  • 「圖片列表一次拿幾張圖?100 張?」
  • 「畫面頂多顯示 10 張就極限了,是不是一次顯示 100 張太浪費資源了?」
  • 「如果拿了 100 張但只需要顯示 10 張⋯該怎麼做呢?」

通常透過這樣的自問自答,就能夠發現問題的所在,沒錯!我們的確不需要一次顯示 100 張圖,因為「畫面上看不到的圖片下載下來就是浪費」,我們無法確保使用者真的會看完 100 張圖對吧?

所以我們重新整理思路,圖片出現在畫面上了再去拿圖片資源,這個行為的重點是什麼,他在技術上該怎麼稱呼?

Lazy Loading、懶加載、按需加載

現在我們已經列出了解決問題的方案,最後我們重新將 PM 提出的需求內化一次 —
「透過對圖片加入 Lazy Loading 來優化網頁速度」
完美。

完成需求

剩下的就是動手寫程式,把這個需求解決掉,繼續享受美好的放空時光。

結語

這裏我簡單的舉例了這系列所進行的模式,不知道這樣的情境模擬有沒有讓各位看官有身歷其境的感覺呢?

之後的文章就會加入程式碼來讓整體體驗更加豐富,我預計會用 CodeSandbox 來做示範,如果對它不太熟悉的朋友們可以先去玩玩看!

這次的系列前言就到這裡結束,如果有想聽的題材也歡迎在底下留言讓我知道,我們下次見。

掰掰~


下一篇
React.js 職場實戰!圖片 Lazy Loading
系列文
React.js 職場實戰!最常見的需求與解法!3

尚未有邦友留言

立即登入留言