## 前端接案實況+報價範圍(六角2023)
大家早安，我是六角學院的廖校長

上封信有學員分享，他們剛好也有一樣頸椎復健，也跑去敗護頸套，這邊也提醒下，建議要做上封信影片提到的頸部伸展動作，以避免太過習慣護頸套，但肌肉不夠的問題，睡前做蠻合適的，一起當個脖子有弧度的人類（欸

來切回正題，我們很常被客服問到說，前端工程師可以接案嗎？那接案的種類有哪些呢？

實際上從 2019 年開始，我們就開始有在承接前端案件，在官網上也有廠商發案平台，不過我們算蠻佛系在經營，剛看了我們的財務報表，接案收入大概僅佔 8~10% 左右

未來在心力上，我自己可能還是會著重在中高階前端工程師培訓上，讓大家有更硬底子、更多元的職涯

這裡我就來分享一下這些年，我們承接過哪些前端案件，也讓學員們了解預期的案件內容

## 案件種類一：純 RWD 切版，費用在 2~5 萬左右，依頁數複雜度而訂

通常這類案件，我們心裡也是蠻黑人問號，為什麼網頁設計公司、系統公司會發包給我們切版案件

後來知道的原因是，通常在交付上，並不會提供純靜態 HTML 網頁給對方，而是對方會有要求的格式、或者是他希望你依照他開好的環境去開發，這樣廠商後續會比較好接手

這幾年比較常見的環境有看到的是 Vite、Bootstrap SCSS，HTML 有些會希望用 pug，部分會開好 React、Vue 環境，希望你在該環境接著開發

通常會提供給你 GitHub、GitLab 私密Repo，請你做好後發 PR 上來

在案件很趕的情況下，又有要求的前端架構上，就必須仰賴對前端素養很熟悉的開發者，才有辦法在短期 2~3 週內達到廠商要求的頁數

而不會因為自己不熟前端 NPM 體系，以及環境建立衝突不熟悉怎麼 Debug 情況下，光建立環境就花了一週，自然就沒辦法跟上接案要求的節奏

在六角接案生涯中，算是真的幾乎沒有要我們直接交付純靜態 HTML，而是都必須架設前端開發環境的

這也是為什麼網頁切版直播班會導入 Vite 的初衷，目的就是讓開發者比較能接地氣進行開發

## 案件種類二：一頁式動態網頁特效網頁設計，10~30 萬不等

這種案子.... 我們每次接每次都會後悔，然後每次做完就會嚷嚷靠北我下次絕對不接了，然後之後又會手賤想挑戰哈哈，因為開發出來蠻有成就感的

所謂的動態網頁特效，可以參考我們去年作的 2022 The F2E 跟版塊設計他們最近開發的新官網

這類型案件，他最困難的有兩點，第一點就是在溝通上，因為通常 UI 設計稿並沒辦法那麼忠實地還原動畫要呈現的效果，所以 UI 設計師有時只能透過文字敘述、口述，有時會搭配自己用簡報動畫來呈現他們要的效果，而且有可能你真正做出來，會有一些些的落差時，設計師又有可能不喜歡，要請你改其他方式來呈現

而前端工程師又必須花時間測試，並做到 UI 設計師預期要的效果，這一來一往的測試確認，說實話非常折磨

第二點則是在前端技術上的投入也不一樣，這類型的動畫一般都得導入像是 three.js、pixi.js、GSAP 等專注網頁特效的套件上，才有辦法做得很擬真，瀏覽器就彷彿畫布般去繪製預期要的動態腳本呈現

通常這案件不適合就職一年的前端工程師去挑戰的，因為這類型案件在溝通成本、技術呈現來回確認，預期會比純 RWD 切版的溝通量還要多上 5 倍多，如果完全沒經驗，那就會拖得更久

再舉個例吧，每次我們報價這類網站，這幾次挑戰都是報價失敗，每次都會因為快延遲到對方專案時間，找人進來救火，亦有可能是甲方窗口說客戶不滿意，想改另外個動態特效，一來一往超級耗時

所以遇到這類型專案類型，不要認為他只有「一頁」就輕鬆看待，每頁裡面的各個區塊，一個區塊就可以搞你個 2~3 天哈哈

希望同學你看了會有所收穫，我們下個週報見 :D

## 案件種類三：前後端分離 RESTful API 介接，30~100 萬

我們有遇到以下的接案情況過：
1. 對方廠商切版完，希望我們完成 API 介接就好
2. 也遇過希望我們從切版一路做到 Vue、React 前後端分離，對方會提供測試主機的後端 API，讓我們介接
3. 也碰過對方要我們裝對方的後端環境，自己在本地開後端 API 來進行測試開發

這種類型的案件就稍微多了點，人數我們最多也曾經到 4 位前端協同開發過，這種案件相對就複雜些，有時還需要一位 PM 去跟對方廠商確認開發案的商業邏輯，再同時和工程師們對齊需求

通常我們都習慣在報價前，先好好熟悉後端 API 的規則，如果有符合以下條件，通常我們都覺得還 ok，畢竟在業界遇到靠譜的工程師，心情會好上一半哈哈哈

1. 有提供 postman、swagger 文件，曾遇過廠商只給你後端 Code，要你自己通靈有哪些 API ，這樣不行啦哈哈
2. 對網路概論是理解的，並知道 CORS 跨域問題：這個如果不熟悉，前後端溝通會很痛苦，所以在承接案件前都會試打 API，遇到問題前先試探問後端幾個問題，確保他們理解前後端分離的開發細節
3. 有提供狀態錯誤：不能都只回傳 200 ok，當錯誤狀態時，也得提供像是 400、404、201、503 等的預期回傳 JSON 格式

通常這類型案件花費的時間就會以季度為計算，例如一季三個月時間，我們最多有承接到兩季，有時案件時間對方無法推估時，對方廠商也會類似派遣人月的方式，將六角有年資的學長姐到他們那裡駐點開發，這種情況也有

## 案件種類四：Server Side RESTful API 介接，30~100 萬

最近這類型的案件有越來越多的趨勢，主要都是希望滿足 SEO 的關係，以 Vue 來說會用 Nuxt、以 React 來說會用 Next.js

也就是後端會架起 API Server，前端也會架起 Nuxt、Next Server 來去串後端的 API，近年也開始看到 TypeScript 的需求開發有多起來的趨勢

這類型案件，比較適合 2~3 年的前端工程師，並了解後端開發的素養，才有辦法接觸 Nuxt、Next.js 的開發邏輯

像是 The F2E 2023 官網，也是用 Nuxt 3 來開發，但不得不說每次這種框架版本升級，都會惹來一陣吐槽，因為變動版本都很大，潛在 Bug 也超多雷點，有很多學生敲碗要我們出這類課程，我們還真的不敢，因為一錄製好可能就改版了哈哈

所以近年來學生想挑戰，我們都是帶專題的方式，讓它透過專題來推動自己研究能力，順勢掌握後端與 Nuxt、Next 的開發，這樣也符合中高階前端工程師的提升

另外從 Next.js 最近的趨勢來看，我認為之後未來的趨勢走向，將會是前端與後端的界線會變得越來越模糊曖昧，這其實也符合技術領域的趨勢，也就是分久必合、合久必分哈哈，舉 SCSS 來說，最近瀏覽器 在 CSS 4 上也更新到支援原生變數與嵌套寫法