跳到主要內容

十分鐘理解何謂「網頁開發軟體工程師」

by Vanessa Wang   歡迎支持我的臉書專頁：【工程師作家的轉職人生】


上週有個朋友打電話給我，說她認真考慮跟我一樣轉行當軟體工程師，想要多理解我的工作內容。

很多人想要學寫 code，但未必知道會寫 code 以後能夠做什麼、有哪些工作選擇。這篇我想以淺顯的方式講解所謂的 web developer （網頁開發工程師）的工作內容到底是什麼。

首先說明一下，coding 相關的職業非常多：你可以寫手機的 app、寫網頁、開發人工智能、做金融業的預測模型、做機器人（包含工廠用來大量生產各種產品的機器）、開發自動駕駛技術等等等。太多了。程式語言存在的目的就是做自動化、減少人工作業時間，所以運用的範圍無遠弗屆。

這篇要講的只是這其中的一種職業，那就是 web developer，因為這是我現在做的，也是許多非本行的人學會寫程式語言後第一個會考慮的職業。網頁開發工程師，顧名思義就是寫網頁的人；仔細想想，現在世界上任何產品、公司都有網頁，因此網頁開發工程師的職缺非常多，再加上這是 coding 相關職業中入門門檻較低的選擇，因此市面上的「軟體工程師速成班」（coding bootcamps）大部分也都是教網頁開發。

網頁開發又分成前端工程師及後端工程師，我做的是前端。那我們的工作內容到底是什麼呢？

我們都在網站上買過東西。舉個例，當你在 Amazon 上買一件毛衣的時候，你會看到毛衣的照片、看到價格、看到尺寸... 使用者看得到的這一切，都是前端工程師用 code 寫出來的。當你選擇衣服尺寸的時候，你會看到只剩下 Large，Medium 跟 Small 都沒有了。讓使用者看到剩下哪些尺碼、讓那些已經缺貨的尺碼變成不能夠選取的狀態、讓使用者在沒有選擇尺碼前不能按下一頁結帳... 凡跟使用者介面相關的東西，都是前端工程師的責任。

至於網頁上字體要多大、怎麼排版比較好看這種事，通常就有另外的 「網頁設計師」負責設計美感。工程師主要是處理邏輯的部分，像是使用者按哪一個鈕會跳到哪一頁、信用卡號碼少寫一個碼下單不能成立、如何讓已登入會員在下次登入時看得到之前放在購物車裡的商品等等。




前端工程師的工作，就是讓買家能順利的下單，買到她想要的尺寸、顏色。但網頁如何知道什麼時候 Medium 開始缺貨？又怎麼知道什麼時候紅色的毛衣又進貨了呢？

想像一個傳統的商業模式，大概就是有一個店員會去倉庫查看，看完再跟客戶回報「我們還有最後一件紅色的毛衣」。在購物網站上，這個「查庫存」的動作，就是後端工程師處理的邏輯。每個網頁背後都有一個「資料庫」，暫且可以把它想成一個巨大的 excel 表格。這個表格上記載了所有毛衣的顏色、尺寸庫存。每當有一位買家下單一件毛衣，這件毛衣就得從這張 excel 表格被畫掉。而每當毛衣再進貨時，這些新的毛衣就得記到 excel 表格上。

總結一下：資料庫上記載著所有毛衣的庫存量；前端工程師負責透過網頁介面讓使用者輕易得知剩下什麼顏色什麼尺寸；而在這中間跑腿、在每次下單或進貨時去更新資料庫的人，就是後端工程師。

關於前端及後端，我還喜歡用房子做比喻。如果網頁是一間房子，前端工程師就是做所有室內裝潢的人，而後端工程師則是負責供應水源、電源、瓦斯、網路等等。舉個例子來說，蓮蓬頭怎麼跟出水口接在一起、怎麼透過把手控制水溫水量，這是前端工程師的責任；但水源的供應、源頭水壓、把管線拉到廁所的位置，這就是後端人員要做的。前端與後端工程師必定要很緊密的合作，不然只有蓮蓬頭卻沒有水無法洗澡、而沒有蓮蓬頭或者開水源的把手，一樣使用不到水，還是無法洗澡。

以上就是我對網頁開發工程師的簡單說明。如果對「機器學習」這個主題有興趣，可以看這篇：初學 Python 與 Machine Learning 心得。

如果想要知道我當初靠線上課程自學轉行成為網頁開發工程師所使用的資源，可以看 九個月自學轉行軟體工程師。


再附上幾門我在 Udemy 上過的課；我自學轉行的知識來源就是靠這幾門課。這些課程的特色是價格低（特價時我看過低於$20鎂）、內容充實（30小時以上的教學影片）及注重實作。
The Complete Web Developer in 2024: Zero to Mastery （這門課現不在 Udemy 上）
Complete Machine Learning and Data Science: Zero to Mastery (機器學習及資料科學)

標籤：

留言

張貼留言

這個網誌中的熱門文章

什麼是 Assertiveness? 你容易被情感勒索嗎？

來到美國後我才第一次聽到 assertive 這個單字。美國人將 assertiveness 視為很高的美德，因為那代表一個人具備足夠的自信、溝通技巧、人際成熟度，以至於能夠堅定、清楚地表達自己想要的與不想要的，卻不會因此傷害他人或顯得傲慢、無禮或威脅他人。 Psychology Today  是這樣定義 assertiveness 的： “Assertiveness is a social skill that relies heavily on effective communication while simultaneously respecting the thoughts and wishes of others. People who are assertive clearly and respectfully communicate their wants, needs, positions, and boundaries to others.  Individuals who are high in assertiveness don't shy away from defending their points of view or goals, or from trying to influence others to see their side. They are open to both compliments and constructive criticism. ” （「Assertiveness 是一種社交技能，依靠的是在有效溝通的同時尊重他人的想法及需求。Assertive 的人能清楚且尊重他人地說明自己的需求、渴望、處境以及社交界線。擁有 assertive 特質的人會積極地說服他人了解自己的觀點，也積極地爭取、辯護自己的想法。他們對於讚美及有建設性地批評同樣地歡迎。」） 美國人如此看重、欣賞的 assertiveness 這個單字在中文卻似乎沒有相對應的翻譯。Google translate 將 assertive 翻成「斷言的、斷定的、過分自信的」；我覺得這些翻譯充滿負面含義且非常不正確。 生長在台灣的我，認為台灣確實沒有 assertiveness 的文化。我觀察到的台灣人，普遍很少直接說出自己想要什麼；如果說出來，
20 則留言
閱讀完整內容

常聽人說「現在人人都要學會 coding」-- 但到底是要學什麼？從何開始？去哪裡學？

最近換工作，要學很多以前我沒用過的程式語言技術，像是 TypeScript, GraphQL, Relay 等等。於是我上網找了很多免費的、付費的教學影片，像是在 YouTube、 Udemy、PluralSight 等等平台。 但很多教學影片從製作至今已經過了兩三年甚至五六年。在軟體的世界，過一年就人事已非了，何況是現在去看 2016年的教學說明。許多 web packages 的版本在六年間已經從 version 5.x 跳到 18.x 之類的... 因此即便那個教學影片再怎樣的手把手教學都沒有用。資訊已經完全過時。 軟體的世界就是這樣，技術日新月異。圖書館都不願意收舊的 coding 教科書，因為過時的資訊難以幫助到人。 軟體的世界就是這樣，技術日新月異。圖書館都不願意收舊的 coding 教科書，因為過時的資訊難以幫助到人。 許多人常萌生要自學 coding的念頭，但因為不得其門而入，一不小心熱情就會澆熄。身為一個自學 coding轉行當軟體工程師的人，我理解這種感覺。我們身在一個資訊爆炸的時代，但資訊量太大，找到對自己有用的教學資源其實就是自學最困難的一步。 很多人想到要學 coding，會想「課程會不會很貴？」「會不會很難？」「會不會需要花很久的時間？」其實這些問題都問錯了。自學 Coding是個知難行易的學問；如果知道怎麼找自學的資源，不用花多少錢甚至免費就能達成。如果找到對症下藥、適合自己的資源，認真跟著看跟著做也不會難上手。但如何找到那個沒有過時、資訊正確又適合自己的課程？很多人花了大把時間、大把金錢就卡在這個第一步。 我舉一個生活化的例子你就懂了。Ikea 的傢俱你說難組嗎？其實一點都不難，但先決條件是 Ikea的說明文件非常好懂、資訊正確，而 Ikea 家具的品管做得不錯，大部分我們買回家的包裝裡頭零件都正確，因此照著說明書一步一步完成不難還非常有成就感。 但我們也都買過很爛的家具組：說明書沒人看得懂、裡頭的零件缺一大堆，甚至連家具的裁切、材料本身都有問題，大小根本組不起來。不然就是說明書過時了：零件已經改版本了，但說明書沒有更新。如果組一個家具要一直打給客服補貨、換貨，而且甚至問題在哪裡我們都推敲不出來、客服那頭沒人回答我們問題... 我們一定非常洩氣，很快就放棄組家具了。我們一定心想「組家具太難了！」 以網頁開發這塊的 coding來說，
1 則留言
閱讀完整內容

是不是要「很聰明」、「數學很好」才能寫 code?

在我去年開始自學寫程式之前，我常常問是軟體工程師的朋友：「寫 code 很難吧？感覺超難懂。」在我心目中，寫 code 跟「數學能力」最有關係。 有趣的是，凡軟體工程師給我的回答，幾乎都一樣：「不會呀。學寫 code 就像學英文、日文那樣，就是一個語言。」 但我不是很能夠被這個答案說服，因為我以往跟程式語言的歷史告訴我，寫 code 是很困難的。我從高一第一次接觸 C++，到後來大一上土木工程系的必修課也是修 C++，經驗都蠻慘的，因此我就宣判自己沒有寫程式語言的天份。直到去年我從零開始再次透過線上課程自學寫 code，我才終於體會朋友們說的「學 code 就像學任何一個異國語言一樣」這句話的意思。 就從我高一的時候，第一次接觸程式語言的故事說起吧！那時是我學校的物理老師鼓勵我學程式語言的。他以完全免費的方式輔導我在假日期間學 C++，大概也是看到我對理工科有興趣，想說我可以自學寫一些小程式、搞不好還能參加什麼比賽之類的。於是他給我開了書單，讓我買了兩大本比字典還厚的 C、C++ 教學工具書（這種書現在還存在嗎？）來看，並且給我出功課，要我自己研究怎麼做出一些程式。 但朽木如我，一直碰壁，步步都感到挫折。那時的我，還不知道怎麼「自己找答案」，因此我心中一直期待老師可以好好示範他到底要我做什麼，因為我連他出的功課的題目、他到底想要我做些什麼我都不了解，也不知道從何問起。現在回想起來，老師心中一定是想：「這有什麼難的？自己看書，看不懂去找答案，不就這樣嗎？實際做做看、做不出來用力想直到做出來為止，難道還要手把手教學嗎？」但要知道那時候的我，雖然很喜歡數學、物理，理工能力不差，但「電腦」對我而言，就是一個玩接龍和踩地雷的工具，因此我連怎麼按照書上的說明去設定寫程式的環境都搞不清楚。 總之，第一次學寫程式的經驗，就在我心中無限多個黑人問號中無疾而終。直到上了大一又再次遇到 C++。 這次我以為我可以學得比較好，畢竟這是我第二次跟 C++ 碰面了。我們用的課本，再次是那種厚得令我第一天就把它切割成三分的工具書。但豈知第一堂課老師也就講完差不多三分之一本課本，一下就上完一、兩百頁的進度。 「等等啊！」我心中吶喊。第一堂課我們就從 Hello World 上到 for loop，而且是雙層的 for loop， 因為要用程式語言畫出這個形狀：
2 則留言
閱讀完整內容