网站设计的前端及前端工程师介绍

前端是指一个应用系统和用户接触的部份。当你一听到前端工程师，甚至会直接联想到就是Web应用程序的前端工程师最近在软件开发的社交媒体里，愈来愈常听到前端工程（FrontEndEngineering，F2E）或前端工程师这类的名词，相较于过去，这完全是新的名词。在这一回中，就让我们来介绍和这个名词相关的种种概念和想法吧。

前端程序设计独立出来的发展历程

在最初的Web应用程序开发模式里，甚至早在Web应用程序之前，不论是有用户接口（UI），或是没有用户接口的（Console/Terminal）的应用程序，通常都是由程序设计工程师，来负责程序的开发。在开发团队里，通常会有专门的视觉设计人员（或者最起码会有外包的视觉设计人员）来负责产生视觉设计的产物，像是图片、动画，以及在画面上的配置关系。但对程序设计而言，其实是没有什么专门的分工。身为一个程序设计者，你或许一方面要写出程序处理数据的计算及存取，另一方面，也必须同时撰写和图形式用户接口相关的各种处理逻辑，因为在分工的模式里，这都是属于程序设计师的工作范畴之内。

而所谓前端工程中的前端，即指一个应用系统和用户接触的部份。使用者和使用者接触的组成是什么呢？基本上就是使用者眼睛所看到，以及通过输入设备（像是键盘、鼠标、触控屏幕）所能操控的部份。相较于前端，另一边的组成自然就是后端（Back-end），所要处理的，也就都是毋需直接碰触到使用者的部份，像是数据的计算、数据库的操作及存取等等。在软件的组成上，明确分出了前端及后端，跟着也就伴随着将程序设计的工作，也明确分出了前端工程师，以及后端工程师两种角色。由于工作内容变得泾渭分明，所需要的技能取向，也就被明确区分开来。

例如，我们在人力银行的网站上，已经时常可以看到公司征才的职务名称上，明确写出前端工程师之类的职称。这说明了，将程序设计师的工作，依据前端和后端的分工方式来区分，已经成了一个很普遍、很流行的作法了。

网站应用程序开发的兴盛，前端应用的模式崛起

在现在，大家听到前端工程师，甚至会直接联想到就是Web应用程序的前端工程师，这当然是因为人们会开始这么区分，基本上就是基于Web应用程序的开发模式的。在最早的Web应用程序开发模式里，基本上和使用者接触的环节，就是单纯的HTML，所以视觉的呈现单纯，而接受输入的方式也单纯（鼠标点击及HTML窗体输入）。所以，只要美术的视觉人员可以提供HTML及相关的设计图，接着，若程序设计师要加以套用时，并没有太多的困难。也因此，并没有什么前端的工程可言。

但是，随着Web应用程序逐渐成为主流，对应的相关技术也不断产生和发展，诸如CSS及JavaScript的相关技术，让Web应用程序和用户接触的组成，不仅丰富，同时也复杂了起来。从技术上来说，熟悉HTML、CSS及JavaScript是Web前端工程师的重要条件，而这些技能取向，又和传统程序设计师的训练大相径庭。即使JavaScript也是个程序语言，通过JavaScript也是在编写程序，但是编写程序时所围绕的议题，又和传统程序设计训练所关心的不大相同。就像是性能优化的方式和技巧，在前端及在后端都是截然不同的课程，所运用的工具、方法，以及所涉及的技术和领域，也都大不相同。因此，当前端工程的重要性被重视之后，伴随着衍生出来的部分，即为前端工程所需的专业技能，而这些技能是十分独特的，这正是前端工程师的角色应运而生的重要原因。

前端程序设计的沟通面向大不同

另一方面，和视觉设计人员或是用户体验工程人员沟通时，所重视的面向，并不同于探讨运算及数据处理的商业逻辑，或是探讨系统架构。因此，当人们在讨论前端时，关心的议题及取向，是不同于讨论后端的。有了专门的前端工程师，不但可以有熟练相关前端技术的工程设计人员，而且他们可以更擅长、更乐于与视觉设计人员，或是用户体验工程的人员沟通，以便提供更好的前端使用者体验。有了前端工程师这样的同事来帮忙，我想，会有很多喜欢后端工程的程序设计者，都会因此松了一口气吧。因为他们不需要再去处理一些他们并不是那么擅长，或是那么喜欢处理、面对的前端相关事宜。他们可以更专注在他们喜欢的工作类型之上。相反的，也会存在那么一群人，就是享受开发前端的乐趣，也乐于发展自己在前端工程上的技能，因而不断地精进。将前端和后端区分开来，意谓着软件开发的分工，在程序设计的环节上，变得更为精细。而这个分工的意义，不仅是在技能上，同时也是在个人的兴趣上。

不同的工作角色分工模式早已出现

早从著名的MVC（ModelViewController）设计模式被发明出来时，就明示着这种角色分工的方式。在这个设计模式里，将应用程序的组成分为三块，其中View的部份，负责处理视觉的呈现，而Model的部份，则处理诸如算法、数据库操作等。一旦将应用程序画分为这三个组成之后，也代表着程序设计人员可以依此来分工。事实上，将应用程序分为这三种组成之后，不同的分工角色就可以平行开发，之后再来整合。这也正是MVC设计模式可以带来的优点之一。以Web的应用开发来说，前端和后端的介接接口，可以是一组RESTful的API，而这组API象征的后端可以提供的服务，所以后端工程师只需要专注的完成这组API的实作即可。而另一方面，前端工程师的责任，便是在于运用前端技术呈现出视觉及用户体验设计的样貌，同时通过这组API获得后端所提供的服务。

通过这组API，可以让前端和后端的工程师各自发展自己所应专注的事务，甚至在后端的API实作尚未完成之时，就可以利用一组dummy的API，让前端的工程得以很快展开。所谓dummy，即在于API的实作并不是真正最后的实作，而是一些简易、甚至只是回传固定回传值的实作，并不会耗去太多的时间和代价，就可以有一份长相上符合API接口的实作。它的作用，就是在于让前端的工程可以尽早开始，不必受限在后端的开发进度。待后端的API实作完成或陆续完成时，再进行整合。这样的工作模式，一方面可以因此得到了MVC模式的好处，另一方面也符合现今专业细致分工的趋向，让前端或后端的工程师，都能专注在自己所喜爱、所擅长的领域，发挥最大的合作效应。

从前端工程师的兴起，说明了现今程序设计的分工是趋于愈来愈精细，而一位优秀的前端工程师所能发挥的作用及价值，也是同样十分巨大的。