什麽是前端工程师？

Photo by Ferenc Almasi on Unsplash

文章同步发布於：https://kaochenlong.com/2021/09/20/frontend-developer/

前端工程师，英文全名是 Front-End Developer 或 Front-End Engineer，有时也会缩写成 F2E。

现在大家听到这个职称，想到的大概就是可以在网站上做很炫的特效的工程师，但在当年我一开始学习写程序的年代，并不存在这个名词。一来那个时候就是一个人从 HTML、CSS 的切版到资料库的架设、存取甚至连主机的架设跟设定都得一条龙自己包办（硬要用现代的名词讲就是所谓的「全端工程师（Full Stack Developer）」，但我其实没有很喜欢这个名词）。

二来也是因为网路技术的发展十分迅速，印象中，当年 Google Map 刚推出的时候，超炫的地图拖拉、放大缩小功能，整个把 AJAX 这个名词给炒红了，自那之後就越来越多 JavaScript 的应用。

当年只是用来做简单的表单验证的 JavaScript 已经复杂到不是一个人可以轻松搞定的程度了，於是逐渐特化出「前端工程师」这样的角色出来。即然有「前端」，那自然也有相对的「後端」工程师，但请继续容我在後续的文章再介绍。

其实手机 App 的开发者很常常也需要存取网站的 API 然後呈现在 App 里，所以在我认定里手机 App 工程师也算是前端。以下我就以网站的前端工程师来举例说明，到底当一个网站前端工程师的工作内容有哪些，以及需要具备哪些的技术。

网站前端工程师所需技术

我认为一个合格的前端工程师要学的技术很多也很杂！但最少最少最少一定需要具备的有三个技能：

• HTML
• CSS
• JavaScript

HTML

学习难度：★★☆☆☆

HTML 是一种标记语言（Markup Language），用来描述网站页面的结构，例如 <h1> 用来代表最大的标题，<p> 代表的是段落，而 <ul> 跟 <li> 等标记则是用来表示列表等等。

就以学习上来说，这应该算是在这三项技术里最容易的。

CSS

学习难度：★★★★☆

HTML 负责网页的结构，CSS 则是负责样式。有些人可能觉得 CSS 不就调调颜色、设定按钮的圆角而已吗？那你就太小看 CSS 了。光是要把设计师的设计稿精准的重现成网页格式，有时候还得面对不同厂牌的浏览器，例如 Chrome、IE、Firefox 跟 Safari（Safari 还有分电脑版的跟桌机版的不同）。

现在大家都习惯用手机上网，所以要做出适应各种大小尺寸的 RWD（Responsive Web Design）也是 CSS 的守备范围。

近年来 CSS 的发展越来越厉害，甚至不需要 JavaScript 的程序码就能做出很炫的效果，有兴趣可到 CodePen 看看那些厉害的人拿 CSS 做了什麽变态的事。

JavaScript

学习难度：★★★★★★★★★★...xN（咦？）

JavaScript 又简称 JS，这应该算是当一个前端工程师最难的上手的大魔王等级技能，要学的深度跟广度都很惊人，如果你不觉得 JS 很难学，如果不是天生神力，就可能表示你还学的不够透彻。

JS 有多难学以及该怎麽学，请容我之後用另外的文章再专门介绍。

另外，在这个「自学程序现场」的系列文章里，我会实际拍几部短片让大家感受一下 JavaScript 写起来是什麽样子，也欢迎大家到时候可以跟着影片动手写看看。

网站前端工程师的工作内容是什麽？

假设，客户想要做一个工作职缺媒合网站，专案开始的时候，通常负责这个专案的 PM 会先把功能条列出来跟客户确认，同时也会跟前、後端开发者们确认工时以及可行性。

开始动工後，最源头也许是网页设计师先做出设计稿，客户确认设计稿合乎需求後，就会进到下个步骤，开始把设计稿想办法透过 HTML 跟 CSS 技术转换成网页，这个步骤通常业界都会叫它做「切版」。

「切版」的工作切分比较不一定，每家公司不一样，而且也跟人员的配置有关。切版有时是由网页设计师自己处理，也可能是由前端工程师来进行。切完版後，如果没有太复杂需要跟後端资料库做互动的话，也许再做一些选单或做一些页面上的特效就差不多可以收工了。

但通常都没有这麽好命，我就以「收藏职缺」的功能为例，网站使用者在登入网站之後，看到喜欢的职缺，按下收藏按钮。这时通常在前端会需要使用 JavaScript 发动一个请求（HTTP Request），并且把相对应的参数，例如职缺的编号，一并跟着这个请求传给後端程序。

後端程序收到请求并且处理完之後，会回应讯息给前端的程序，由於刚刚前端来的请求通常是「非同步（asynchronous）」，也就是前端程序收到後端给的资讯後，会依据成功或失败以及得到的讯息做出回应。如果成功，就要把那颗按钮做一些样式上的变换，也许是让按钮变深色，好让使用者知道刚刚的「收藏职缺」功能生效了；如果失败，要再看失败的原因是什麽，然後适当的在页面上告知使用者出了什麽问题。

所以，前端工程师要做的事其实很多，不是只有切切版就叫前端工程师，有时候得与网页设计师一起协作，把设计变成真的会动的东西；也得跟後端工程师协作，讨论资料要怎麽传、API 要怎麽串接等事情，如果後端工程师没办法生 API 给你用，你可能得自己先想办法弄个模拟的 API 来测试。

除了各种厂牌的浏览器最好都能正常运作外，还得支援各种行动装置，让网站在手机上也能顺利操作，同时效能还不能太差...。

所以如果只会切版的，我通常会称它叫「切版员」。

容易找工作吗？薪水如何？

还算容易，在人力银行上搜寻「前端工程师」或「Frontend」等关键字就可以搜寻到不少的职缺，也常常在社群网路上可以看到公司或猎头主动来张贴职缺，薪资也都满漂亮的。

薪资要看工作地点也得要看产业，台北、高雄会高一些，另外博奕产业也会高一些。就以我自己的体感，在台北的Junior 前端工程师，差不多月薪在 40,000 元上下，比较菜的可能会被砍个二、三千块，比较有谈判筹码的也许可以谈到月薪 45,000 或更高。另外博奕业加成差不多是 5,000 ~ 10,000。

至於前端的面试该怎麽准备、要不要刷题、要不要学框架、框架要学哪一款，又或是要怎麽变强或怎麽谈薪水，还请期待这个系列後续的文章介绍 :)

...to be continued ✌️

文章同步发布於：https://kaochenlong.com/2021/09/20/frontend-developer/