前端工程師工作兩年心得,技能覆盤、願景規劃

閱讀時間約 10 分鐘

之前工作滿一年的時候有想過要寫個前端工作一年心得,但去年十月的時候手上正在開發一個時程很趕的專案,加上在寫 2022 年度的 ithome 鐵人賽,所以一直沒有時間來分享心得。

到了 2023 下半年時,自己有刻意放慢生活的節奏,終於有時間有紀錄轉職以來的歷程。

本篇文章主要想要分享自己在前端工程師工作兩年的心情與一些體悟,主要會分為幾個重點:

  • 工作一年與兩年的差異
  • 網頁服務的多元性
  • 接案 vs 產品
  • 看待 Bug 的心態
  • 如何跳槽?定期梳理職涯、職能脈絡
  • 為團隊與自己貢獻價值
  • 珍惜每個合作機會
  • 往後的規劃

那麼我們就開始吧!

工作一年與工作兩年的差異?

老生常談,一個人的工作能力未必可以與工作的時間成正比,所以這邊探討的主要是我個人工作一年與工作兩年以後的差異,並不代表所有前端都是如此。

在工作滿一年時,我認為自己在工作能力上有顯著突飛猛進的進步,可以獨立使用 React 、TypeScript 與 Storybook 開發前後端分離的前端 spa 具會員、權限機制的網站,以及基於在自己專業上有一定程度的溝通、調解與談判能力。

雖然成長快速,但依然有滿多值得加強的地方,例如:要面對未知問題的緊張程度仍需要調適、有談判的能力但需要再圓潤一點。

到了工作兩年時,有關心態的問題基本上都解決了,有了經驗、看過許多奇奇怪怪的問題後,開發上更心如止水,也更有心力去研究自己有興趣的問題。

而技能方面相比第一年,我認為自己變得「更有意識地在寫」也「更有意識地閱讀程式碼」,重寫自己程式碼的時間多了,也更願意觀察別人的做法。

實務技能上,多了更多有關網頁原理、協定、後端、網頁攻擊與 SEO 的概念,也開始使用 Next 開發量體更大的產品,雖然還是沒怎麼接觸到單元測試就是了。

要說成長最多的階段肯定是零至一年這個工作階段,滿兩年後雖然成長幅度沒有這麼顯著,但在學習、工作效率上,變得更有餘韻,也更能融會貫通,心態上也更加從容。

網頁服務的多元性

隨著做的功能越來越多、越來越複雜,要讓使用者保有良好的使用體驗並不是只有, UI、UX 與前後端分離而已,還要考量到很多議題,舉例來說:

  • 需求評估:當需求出來時,要跟產品設計師討論需求方的需求與目的是否符合既有的軟體架構,及是否能在預期的時間做完,如果來不及的話是不是有什麼其他的替代方案,或是針對最重要的功能到次要的功能,依照優先順序進行階段性開發。
  • 可維護性:開發服務與 Bug 的時候要考量程式碼的品質,以及開發文件、內部文件的撰寫,這並不是單純是工程師追求完美,而是有意義的產品維護,讓下一個接手的人可以更好維護(也許這個人也只是幾個月後的自己)。
  • 資安:網頁的安全性包括阻擋常見 XSS 、 CSRF、DDos 攻擊,還有一些格式驗證、資料存取方式與位置,都是在開發階段需要考量進去的。
  • 成本控管:如何在不影響使用者體驗把程式資源壓縮、優化減少主機成本是一件需要在撰寫程式碼有意識做的事,前端在打包程式碼時有很多的工具去針對前端資源(圖片、靜態檔案)做壓縮。
  • SEO:好的 SEO 可以讓公司在不用下廣告的狀況下,獲得更多的網站流量,有流量就可以用其他商業手段變現,老闆就會更開心。而在撰寫程式碼時,需要更注意有語意的 HTML 標籤與其架構,有了好的 SEO 後網站流量變大,上述的事項就會顯得更重要。
  • 使用者體驗:使用者體驗可簡單可複雜,我認為最基本的程度是在產品設計師給出流程後,有能力省視流程完整性,不好的流程有可能會讓使用者卡在一個使用者情境中,無法逃離。更進階一點的話,在不影響時程的狀況下,要去自己補齊一些需求方原本沒有考慮進去的錯誤處理,自行優化使用者體驗,其中包含一些細微的操作動畫、提示框等。
  • 溝通:產品的需求並不是只有產品設計師需要注重,對於工程師來說也要去把關,而不是在拿到規格書時全盤接收,最重要也最容易被忽略的是:每一次溝通的目標都是為了對齊團隊的任務目標。這件事非常非常的重要,因為工程師需要大量團隊合作,意見分歧屬兵家常事,學會包容、接納、妥協與拒絕都是工程師職涯路途中,非常重要的技能。
  • 架構:良好的架構不僅能減少程式碼的數量、優化整體服務的品質與效能,就開發者而言也能有更好的開發者體驗。架構這件事並不如一開始想像中簡單,也不是一建立專案就能確定架構是否能完全符合需求,會有階段性的優化重構期,直到服務穩定上線。
  • 自動化:能夠自動化就不要手動處理,前端最直覺、也最瑣碎麻煩的入門自動化工具就屬 EsLint 了,幾乎大部分的程式碼風格都可以從 EsLint 配置處理,如果有使用一些特殊的框架工具,只要不要太冷門,幾乎都有配合的 EsLint 插件。還有其他自動化工具也很重要,例如:CI/CD 、 模板自動化等,都蠻值得摸索跟導入的,這部分自己的經驗較少,希望未來有機會可以多嘗試一點。

接案跟產品怎麼選擇?

我個人在接案與產品的部門都待過,兩者的特性略有不同,前者講求速度與客製化,由於接案會有合約、成本的問題,通常是獨立作業為主,好處是可以做大量、各式各樣的案子,比起產品更能摸到從零到有的成就感,缺點是案子趕的時候會加班加到沒日沒夜。

後者重視服務不中斷、深入且貼近使用者體驗,雖然跟接案相比時程可以更充裕,但面臨問題更多元與深入,能摸到的東西未必比接案充實,缺點也是優點:門檻高、需要累積,通常比較難第一份就做到自己喜歡的產品。

不論選擇哪種類型的工作,我更傾向選擇優良好程式碼、有前輩的組織,比起自己面對的客戶型態不同,組織有良好的程式碼規範、有經驗的前輩,會奠定自己在面對程式碼的態度與後面工作的發展性。

Bug 到底怎麼解才能有效率?

自己在工作兩年後,除錯能力有滿顯著的提升,除了 console.log 外,也仰賴解讀錯誤訊息的能力、使用 Google 、chatGPT 與閱讀文件拼湊出適合自己當下的答案。

有些新人在剛入門時,會過度仰賴主管、前輩的意見,久而久之就不會培養到問題解決的能力,即便身邊的人再強,都要有責任感,用「不管怎麼樣自己一定要用盡所有手段給這個 Bug 交代」的心態來解決問題,在執行力與成就感的累積會有無以倫比的體驗。

如果真的毫無突破口,多找前輩、主管、社群網友討論,好好陳述自己除錯用過的方式、解 Bug 的思路,都可以有不錯的靈感,老話一句:不要當伸手牌,不論是對誰都毫無好處。

如何跳槽?定期梳理職涯、職能脈絡

軟體工程師要在薪資與能力上有突破性的成長,最好的方法絕對是累積到一定程度後,跳到一個整體環境更有挑戰性的公司。

在這中間當然不是白白工作一兩年就能換取更好的工作待遇,一定要在工作期間累積新的、對公司有卓越貢獻的經驗,並且持續吸收新的技能,才有機會跳到更好的公司。

不論是多少年資的工程師,在完成階段性任務時,例如:獨立開發完某個流程或是功能,或是把某個服務完整上線,甚至小到透過自動化解決一些日常的任務,都要將這些經驗整理到履歷上。

定期整理履歷是一個最好梳理、職能脈絡的方式,不論有沒有要換新工作,都要確保自己的履歷是處於經常更新的狀態,才有機會被獵頭、資方看到,被動性的收到新的機會。

只要有持續累積,以軟體工程師而言,跳槽是非常理所當然的結果。

為團隊與自己貢獻價值

相信不少跟我一樣 junior 或是 mid level 的軟體工程師都是以資深作為努力目標,在自己工作的過程中有不少崇拜、嚮往的資深前輩們。

先說說自己對於資深的指標在哪:

  • 清楚知道自己寫的每一行程式碼在幹嘛。
  • 能具體化問題、指標,並有效解決或是執行。
  • 具需求規劃、評估、架構的能力。
  • 擁有指導、凝聚團隊的能力。
  • 可以用除了程式碼以外的手段、工具、方法解決問題,例如:談判、溝通、協商等。

我認為還有很多資深工程師需要具備的特質,不過許多概念可以回歸到貢獻價值、協助團隊進步等核心理念,要成為資深絕對很需要累積,嘗試在日常開發中為團隊創造一些工作範疇以外的加分貢獻,可以很好的累積團隊成員對於自己的技術印象。

除了為團隊貢獻價值,永遠要記得在工作外善用軟體自動化的能力為自己創造價值,這一點我覺得格外重要,一方面是小程度、持續性地累積競爭力,一方面更是持續培養自己對軟體與程式的熱情與成就感。

能用最小的努力,讓這個世界更方便、更進步一點,是我最初想當軟體工程師的初衷,過了兩年來復盤自己的初衷,很開心自己一路以來沒改變,所以也想寫下來勉勵未來的自己。

珍惜每個合作機會

覺得在這次復盤中最想肯定自己的就是:我很珍惜每一次的工作與合作機會。

軟體業是一個很小的圈圈,基本上大家都會知道業內有哪些強者、技術強大的公司,在這樣的環境下累積好的人脈可以創造未來許多美好的機遇。

雖然我並不是一個脾氣很好、技術很強的工程師,經營自媒體也不算特別殷勤,但我滿願意去幫助那些需要協助的同事或是想進入這個領域的人,讓我在隱隱約約中累積了一些好的運氣,生活上也多了更多願意幫助我的人。

如果可以的話,我會建議大家要好好善待與珍惜每個職涯上的際遇與人事物,因為面對這些事物的心態,會完全反映在寫程式的這條路的體驗上。

往後的規劃

基本上自己是以成為資深軟體工程師為目標,但我是一個很貪心的人,常常想要做這個、做那個,包括經營自媒體,也會透過自媒體接一些案子,這讓我在剛成為前端工程師時時常心力交瘁。

因此這些目標想在未來的日子中慢慢的實踐,但可能不會太給自己設限一定要在多久的時間內完成,其中最明確的目標就是:成為資深軟體工程師、完成「從今天開始的轉職計畫」的帶狀電子書,希望能向大家分享如何有系統的找到自己喜歡做的事,並且透過這套方法把自己也變成資深工程師!

好了,話說了這麼多,以上就是自己成為前端工程師兩年的工作心得,以及過程中所收穫的一些美好經驗,最後想期許自己在往後都可以有紀律的來復盤工作歷程。

希望這篇文章可以讓你有一些對職涯的靈感與樂趣,如果有任何問題都歡迎留言與我分享,我是 Vivian,我們下次見!

為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
前陣子在跟讀者聊天的時候,發現在 Junior 階段很容易遇到一些工作上挫折,但又不太知道怎麼解決或是優化。 也有可能在開發過程中碰到了些大地雷,但身邊的前輩、同事不一定能用比較軟性的方式好好的傳達,這是非常常出現的,尤其是在跨部門協作經驗較少的工程師,會不曉得怎麼用淺顯易懂的語言告訴⋯⋯
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
說到 HTML 元素的換行效果,在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
前端工程師可能會隨著工作經驗的累積,而開始想要寫出更好的網頁架構,又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。
Firebase Realtime Database 是一個 NoSQL 即時雲端資料庫,支援多平台(JavaScript SDKs、Android、iOS),可以讓使用者即時取得資料庫的資料。
前陣子在跟讀者聊天的時候,發現在 Junior 階段很容易遇到一些工作上挫折,但又不太知道怎麼解決或是優化。 也有可能在開發過程中碰到了些大地雷,但身邊的前輩、同事不一定能用比較軟性的方式好好的傳達,這是非常常出現的,尤其是在跨部門協作經驗較少的工程師,會不曉得怎麼用淺顯易懂的語言告訴⋯⋯
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
說到 HTML 元素的換行效果,在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
前端工程師可能會隨著工作經驗的累積,而開始想要寫出更好的網頁架構,又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。
Firebase Realtime Database 是一個 NoSQL 即時雲端資料庫,支援多平台(JavaScript SDKs、Android、iOS),可以讓使用者即時取得資料庫的資料。
你可能也想看
Google News 追蹤
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
Thumbnail
我的職務是工程人員,在我前期的工程人員是直接現場處理,後來門市數量快速增加,公司人力無法負荷,改委託外部協力廠商第一線處理,工程人員作驗收管理的工作。我是在這個轉換期間人事異動時進來的,進公司第一天到25年後退休的最後一天,原則上我算是做同一職務沒有變過,也沒升遷、輪調過,可見工作能力之不佳^=^。
相較於薪資、職涯發展等因素,"是否對寫程式感興趣" 才是最應該思考的問題。
Thumbnail
當我剛開始接觸這個領域的時候,經常會看到有人在討論: 到底要做前端還是後端工程師呢?後端工程師賺的比前端工程師多?前端工程師轉後端工程師?那前端與後端到底是什麼呢? 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理,對於想深入瞭解前後端的讀者會非常有幫助。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
Thumbnail
我的職務是工程人員,在我前期的工程人員是直接現場處理,後來門市數量快速增加,公司人力無法負荷,改委託外部協力廠商第一線處理,工程人員作驗收管理的工作。我是在這個轉換期間人事異動時進來的,進公司第一天到25年後退休的最後一天,原則上我算是做同一職務沒有變過,也沒升遷、輪調過,可見工作能力之不佳^=^。
相較於薪資、職涯發展等因素,"是否對寫程式感興趣" 才是最應該思考的問題。
Thumbnail
當我剛開始接觸這個領域的時候,經常會看到有人在討論: 到底要做前端還是後端工程師呢?後端工程師賺的比前端工程師多?前端工程師轉後端工程師?那前端與後端到底是什麼呢? 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理,對於想深入瞭解前後端的讀者會非常有幫助。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...