iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
17
Modern Web

菜鳥工程師必修的 30 堂溝通課系列 第 29

前端工程師如何從菜鳥到專才?

好不容易成為前端工程師了,究竟該如何深入成為「專才」?
 
【不要以為你看到的就是全世界】
有很多菜鳥前端進入第一份工作後,就認為公司的環境就是整個業界的縮影,
從此就對「業界」有刻板印象,運氣好一點遇到好主管至少能開拓你的視野,運氣很差遇到爛環境,最糟甚至會讓你萌生繼續轉換跑道的念頭。
 
所以各位必須要先清楚了解,「你的開發能量會反射在你的公司環境」,
 
有許多朋友說:「我雖然還沒全部技能都涉獵,但都略懂,不過我很急著找工作所以就先投履歷了,但是邀請我面試的公司感覺都很差,還會要我做很多雜務,甚至要加班,是不是業界都是如此?」
 
其實上面所問的問題,他已經幫自己解答了,你既然技能掌握上都是半桶水,你又奢望能吸引到哪些好公司呢?
 
什麼都懂一點但又不專精,企業自然會把你當做助理來使喚,而說實在的你也沒有資格數落這些公司,創立公司就是必須自行思考財務流來支撐起一個公司,或許因為財務拮据而無法任何事項都面面俱到,但至少也在思考如何在業界中生存,所以自然會把一個任何都不怎麼會的職員當作「助理」來使喚,讓你成為公司的齒輪協助運轉,乃人之常情。
 
那麼到底該如何在第一份工作吸引到好公司呢?
我都會要求往前端工程師發展的,至少要做到運用三大框架做到前後端分離的完整作品。而前端設計師,則是必須透過 UI 軟體設計出 Mockup(精稿),再設計 RWD+SCSS 設計出網頁版型。
 
如果你沒有自行累積到能量到這一步就去投入職場,你要有心理準備遇到的公司品質都不會太好。或者找你的都會是「接案型網頁設計公司」,或者是「中型企業時常辦活動,而產生的砲灰式活動版型」,開發的內容都千篇一律,要求的不是你的程式碼品質,而是要求你的快速。或者是乾脆讓你進來,之後讓你去摸些非前端領域的技能,例如後端、MIS。
 
我可以理解為了生活,自然想快速投入職場,但如果你來到上面公司,切記不要認為他們就能代表業界。初期你可以先以「了解軟體公司文化」、「部門協作」、「了解快速開發需要具備的技能」,但若是都掌握起來後就不能久待,切記不要成為有十年經驗,但是用一年經驗重複十次的人才。
 
所以如果你現在還有時間,請你至少要累積到我上面所提供的條件,再去找第一份工作,你才會發現找你的公司開始多元化了,自己也能稍微挑選符合自己開發能量的公司。
 
【前端專精方向】
 
這裡我就先以 CSS、JS 的方向來說明,
CSS 是易學難精的東西,
也因此大家都會誤認它是很好理解的語言。
 
但會寫不代表你寫得好,我這邊就提供幾個問句,
你思考看看自己的程度如何
 
1.你在開發的網頁版型,過了幾天再回頭看 CODE,你透過 class 名稱能立即回想自己是如何撰寫的嗎?
 
2.當專案進入維護階段,過了三個月臨時要改一個版型設定,你要花多少時間才有辦法進行修改?
 
3.如果今天版型需要多人開發,你會先建立基礎架構,並使用 SCSS 拆分任務進行分工嗎?
 
4.一個案子過了一年,回頭你再看時,你的感想是「靠這誰寫的?」,還是「我真是個天才,一年前寫得架構超神」
 
5.你能力是否有辦法訂定 CSS Guidelines,設計閱讀文件,讓你的部門其他同事跟著遵循,或者是讓其他事業群也能 follow,同時又能透過版本進行更新迭代?

如果你或你同事能力沒有到 4 或 5,說老實話你還差著遠呢,多看些 SMACSS、OOCSS、BEM、MVCSS 設計模式後,再看看大廠的程式碼像是 pure、Bootstrap、Semantic UI 找出類似共通點,再將它融合到自己的風格裡吧。
 
再來則是 JS 部分,我希望你更深入 JS 的核心,探索它的底層,運用各種方式來認識 JavaScript。
 
例如以下兩個資源:

IT 鐵人邦 kuro 重新認識 JavaScript
https://ithelp.ithome.com.tw/users/20065504/ironman/1259

IT 鐵人邦 卡斯伯 邁向 JavaScript 勇者之路
https://ithelp.ithome.com.tw/articles/10190562
 
你會發現上面每個"小節",背後都有很底層的 JS 原理,我強烈建議你要開一個 medium 去整理自己的思考脈絡,你不用寫成讓別人易懂的 BLOG,而是寫給自己看的筆記,這也有助於幫你建立長期記憶,之後若要回顧,你最快回顧就是看你的筆記,而不會認為說這些觀念久了就忘了,讓筆記成為你的第二個腦是非常重要的。
 
當你花了 2~3 個月投入底層後,接下來就是實作了,
我知道你們也應該了解 JS 已經有無限可能,
你會 JS 後,很多 NPM 與相關軟體妳都可透過 JS 來開發,
與其如此,不如我實際點講業界案例。
 
前端其實有非常多領域可以涉獵,
例如說:
 
[Chrome 插件]
想個主題來寫個輔助性質的插件,
像是六角學院也設計了許多插件來協助工作效率上,
而若是你在電商公司時,也會需要寫 Chrome 插件。
 
其中最有名的應該就是求職天眼通了,
原開發者也是前端工程師,當初他是以 side project 來寫,
後來也因為吸引到許多關注,而辭職成立公司來經營。
 
[desktop app]
最為著名的就是 Eagle - 設計師圖片管理工具,
是一位寫 angular 的台灣前端設計師,雖然他不會寫桌面應用程式,
但只要你會 JS,你就能用 Electron 來開發跨平台的桌面應用程式,
現在他這個軟體已經廣受各個國家好評,只要你挖掘到使用者的痛點,
並想出辦法找到解決方案,那麼你也可以寫出讓全世界受益的軟體。
 
網址:https://tw.eagle.cool/
 
[WebGL 3D 開發]
WebGL 有辦法透過它在網頁開發 3D 介面,
舉凡博弈與其他視覺產業都會有大量運用,
錢景也非常不錯,畢竟業界相當缺乏會前端又對 3D 有 sense 的前端設計師。
 
以業界來說版塊便是其中的佼佼者。
官網:https://blockstudio.tw/
競選網頁:https://electionsdesign.com/
 
[mobile app]
最有名自然就是 React Native,
透過 JS 就能開發出雙平台,
講得好像很美好,但裡頭你必須針對各平台的雷點進行除錯,
但假使你掌握到裡頭的 know how,
業界目前也急需此前端人才,薪水也有辦法談得很高。
 
[Google Map]
搭配 D3.js 2D 視覺圖表,運用地圖 API 便能有各種可能。

最讓我印象深刻的就是 Uniform Map 制服地圖,
作者將各個學校的制服運用 Google Map 來呈現,
也由於他們理念廣受大家贊同,也接連募資成功。
 
除此之外,房仲產業也時常會用地圖顯示各地段的房價與物件,
只要跟地域有關的,你就不得不了解 Google Map API。
 
官網:https://uniform.wingzero.tw/school/map/tw
 
[PWA、AMP]
這已經是目前網頁上的最新趨勢,
讓網頁不論在效能與實用性又大幅加分,
但如果前面你沒涉獵一兩種更加認識 JS 的話,
要理解這段會難上加難,但他們勢必會變成未來的趨勢。
 
[專精 SPA 底層]
如果前面都不想投入,還想成為專才的話,
至少你要在 SPA 前後端分離上有卓越的研究,
各種非同步上 Observable 理解為何,其中著名框架是 RxJS,
另外要將弱型別變得易於管理,是否要改寫強型別 TypeScript?像是 Vue.js 老爸已經放話說,Vue 3.0 版本即將可以支援 TypeScript,你又了解多少?
 
看看下方的 Vue.js roadmap,你深入到哪了?每個技能都值得花半把個月研究
Vue Roadmap: https://github.com/flaviocopes/vue-developer-roadmap
 
【總結】
以上的技能只要你會其中的兩項,
並有設計出讓人使用的產品,年薪百萬只是基本,
沒有的請來找我,可再代為轉薦。
 
而這些你也可以參考成,
是否為投入下間公司的面試評估依據,
能夠研究新技術,同時又能對 JS 有深入了解,當然求之不得!
 
會整理這篇文章,
就是希望各位菜鳥前端瞭解,
找到第一份工作只是開始而已,
接下來你必須結合妳的興趣與熱情,
找到你想投入的項目,提升自己的技術價值。
 
若你沒任何動力搞 side project,
那麼就從面試公司挖掘你想投入的方向也是 ok 的。


上一篇
【專案管理篇】我們用溝通協作,打造出 400,000+ 瀏覽數平台
下一篇
【懶人包閱讀順序】菜鳥工程師必修的 30 堂溝通課
系列文
菜鳥工程師必修的 30 堂溝通課30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
david111esc
iT邦新手 5 級 ‧ 2019-09-30 09:39:40

剩最後一天了,讓人意猶未盡!!!

廖洧杰 iT邦高手 2 級 ‧ 2019-09-30 16:37:29 檢舉

謝謝你喜歡我的文章,很高興有幫助到你哩 :D

我要留言

立即登入留言