最近几年前端领域的变化可谓翻天覆地，我们从最简单的写页面，到如今的工程化、服务端、客户端等领域也都渐渐出现了前端开发的踪影。那么，我们要怎么理解前端这个职位呢？

1.1.1 前端是什么

对我来说，当初喜欢上前端的原因，大概是因为将前端理解为连接用户的最后一层。前端负责页面的展示和操作交互，是我们的产品与用户直接对话的一步。用户交互的界面很多，还有终端、操作系统等等，但对于用户来说，涉及前端的 Web、H5 页面、小程序等出现的频率更高一些。

前端领域的发展

最初的前端，就是写浏览器里面的页面。像我们常说的网站、网页，或者是论坛、贴吧等，都是前端实现的页面。那时候，前端主要控制页面的展示，和一些样式的兼容。随着网络速度和机器性能的提升，页面的交互逻辑逐渐复杂。

接下来是前端工程化的一些工具、插件、框架的出现，前端的开发效率逐步提升，同时浏览器的兼容性提升和所具备的能力更加丰富，前端能做到的事情也更多。大家都知道，前端是通过 HTML/CSS/Javascript 来写页面的，因此浏览器除了对 HTML/CSS 的渲染，还有作为页面的逻辑控制的 Javascript 引擎。目前为止，或许大部分的前端的工作内容还是基于浏览器，但随着浏览器的内核或者是 Javascript 的解析引擎被移植到各个环境，前端的涉猎范围也拓展到很多地方。

现在前端也有很多的插件或者库的支持，例如有了 Canvas 可以写网页游戏、各种图表插件 Echarts/d3 绘制图表，还有 WebGL 的支持、three.js 的封装库来写 3D 动画或是游戏。我们也常常看到前端的技术栈不停地更新，除了样式库 bootstrap、曾经打天下的 jQuery，还有如今各种框架之争 Vue、Angular、React，数据流的处理 Rxjs、用于 API 的查询语言 GraphQL。

前端领域在不断更新换代，作为前端开发，我们同样也需要不停地更新和迭代自己，跟随着世界的脚步走。每一步都走稳了，才是最踏实的成长方式。

前端在一个产品中的位置

一个完整的产品需要很多道工序，一个应用程序也对应很多层的开发。

一般来说，一个网页可能是静态页面，即：内容和样式都是前端写好的，部署到机器上，添加路由就可访问。如今页面大部分是动态生成的，即：页面打开后，需要拉取接口获取数据，然后重新更新到页面中。像一些直播弹幕、状态的查询等，常常是前端将后台的数据拉取回来后，再通过一些浏览器的 API 渲染到页面中。

浏览器网页的开发组成：前端 <=> (数据交互) <=> 后台。而如果是多终端的数据展示，则后台的数据需要同时提供给其他地方，例如常见的手机 APP：用户 <=> 终端/webview嵌H5 <=> (数据交互) <=> 终端后台 <=> 数据库 <=> 管理后台 <=> 管理前端 <=> 运营人员。

前端页面既可以作为展示，也可以作为管理，可用于分享。把一个产品做好的关键点，多在于产品设计本身的创造性和创新性，前端只是一种实现方式而已。即使这样，我很喜欢将前端的位置这样理解：肩负着与用户最近距离的接触，把最好的一面呈现给用户。

如果说我们想要让用户喜欢我们的产品，首先要做的就是要将它们以最完美的形态出现。前端的工作，正是要完美地控制展示效果、给到用户最友好的体验。

1.1.2 前端在程序员中的位置

如今前端可以借助 Node.js 去实现对更底层功能的开发，前端这个职位能做的事情也越来越多，也出现了大前端一说。我们开始需要写脚本、需要跑自动化任务，也可以与数据库直接进行交互，前端开发的能力范围也越来越大了。当然，其中也不乏一些开始负责部分后台服务的前端，仅仅因为使用了 Node.js 来写点接入层，便将自己称之为全栈。

我见过一些团队中，一些前端开发认为自己在业务中不够核心、地位比较低，便开始计划搞些 Node.js 配套服务，强行接管一些后台的功能服务。我也见过一些团队中，前端觉得自己只能写写页面、在前端领域已经到达天花板了，突然感觉职业危机出现了，于是乎大刀阔斧低要把 Node.js 带入团队中，用来做点除了写页面以外的事情。

但其实，前端与后台的区别又岂止仅仅是语言呢？前端对于单线程的 web、浏览器机制、动态语言的缺陷和优势、HTTP 协议、网络请求等掌握得很熟练，深入发展方向可以包括大型页面的性能优化、页面功能模块的抽象与组织、数据与渲染的拆离、前端工程化的规范化与效率提升等等。而后台本身更关注计算机资源、多进程、数据库等，需要熟练掌握多并发、队列、进程通信、事务、数据库索引等。这其中的区别，又岂是 Node.js 还是 C++/JAVA/GO 这么简单呢？

当然，有些时候前端接管一些接入层的工作，可以支援和解决后台开发人力不够的问题，我也不否认很多时候 Node.js 可以给团队带来更多的价值。但如果仅仅因为“只会 Javascript”就强行把 Node.js 带入团队中，这样的理由则过于牵强。前端开发什么时候开始，就完全等于 Javascript 开发呢？

的确，如今前端能做的事情很多，而随着前端工具框架能力越来越完善、开发效率越来越高，很多时候大家面临着简单地写写页面逻辑和交互、因为其余的工作都由工具库完成这样的情况。那么如果我们想要成为真正的全栈，不妨从最基础的计算机原理、编译原理、数据库设计等等开始学起，而不是仅仅从写 Javascript 变成了写 Node.js。语言其实只是其次，我们想要成为全栈的话，欠缺的还有很多。

Node.js 可以赋予我们更多的能力，但我们不要反过来被 Node.js 束缚住。相比于强行在团队中推行 Node.js，其实只要想，我们也一样可以学会后台，不管是哪种语言都好。毕竟对程序员来说学习能力是最重要的，而前端面对每年都更新的技术栈，本身也能快速学习一些新的知识和技能。

1.1.3 纯前端的进击

如果我们对自己的要求不只是一个纯前端，那么也可以往其他领域进行拓展。我们可以借助 Javascript 解析引擎移植带来的便利，来做更多的事情。

前端可以做哪些事情

的确，前端可以做的事情真的越来越多了。除了常见的 Web 页面，我们还可以做这些：

**(1) 无处不在的 H5 页面。 **

如今智能手机的普及，更是让 H5 出现在各种信息流中。H5 是什么呢，其实就是移动端的网页，主要用于信息分享、简单的功能、小游戏等等，加载和传播速度快的小页面。H5 页面主要依赖 App 里的浏览器内核，基本上每个 App 都会支持 H5 页面的。而 HTNL5 中 video、audio、canvas 等新媒体元素，以及 CSS3 中的动画效果，使得用户能在小小的屏幕页面里，获取到更加丰富类型的信息。

(2) App 开发。

智能手机的普及，开拓了一大片 App 的市场。对终端的尝试，也是近年来前端圈子一直在做的事情。有了 react-native、weex 等各种 Native App 开发框架支持，前端小伙伴们也能偶尔朝终端 APP 插上一脚。同时 Flutter 的出现，也给大家带来了更多的机会。

(3) PC 应用。

用 electron、NW.js 这样的框架，结合了 Node.js 和 Chromium 的能力，大大增加了前端开发实现跨系统的 PC 应用的便利性。网易云音乐的 PC 版便是 electron 的产品，我们用来写代码的 VS Code 同样也是基于 electron 进行开发，像小程序开发者工具则是基于 NW.js 框架实现。

(4) 服务端。

在 Node.js 的强助力之下，前端小伙伴也能管理文件和资源，维护服务进程和数据库了。更多的时候，Node.js 会被用作服务端的接入层服务。因为异步的方式，有时候也比较适合高并发的服务。

(5) 小程序开发。

从微信开始火起来的小程序，到后续的支付宝小程序、头条小程序、百度小程序、QQ 小程序等等，这种 Hybrid APP 的方式如今也找到了一个较友好的方向来进行：官方 APP 提供增强 WebView 的形式，给到开发者参与到 APP 生态中，共同补齐用户的产品生态建设能力。

(6) Serverless。

如今各种云开发的能力在健全和推广，例如微信小程序的云开发能力，也补齐了前端开发对服务端开发和运维中缺失的一环，能真正意义上实现一人完成整个小程序，从设计到开发到上线到运维。云开发在这几年越来越流行，具备完整能力的云服务可以做到零部署、零维护，同时可以保证服务稳定性。以小程序云开发作为例子，云开发的能力一般包括：

• 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码
• 数据库：一个既可在小程序前端操作，也能在云函数中读写的文档型数据库
• 文件存储：在小程序前端直接上传/下载云端文件，在小程序云控制台可视化管理

拓展自己的能力

如果只会前端，其实局限性会比较大（比如切图不会切、设计也不行、后台不会写、机器运维也不懂），不管是从与合作伙伴协作（与交互设计对接、与后台联调等）、讨论需求的时候，背景知识的欠缺也容易使得沟通不顺畅。

那么，我们可以根据自己的兴趣，选择性地将技术栈拓展一些（后台、运维、设计、交互等方向都可以），学习点其他领域的东西。其实程序设计最终是相通的，而程序设计与我们的生活工作其实也可以是相通的。学习一些其他的思维模式、结构设计，对深入前端领域也好，对视野和思维的拓展也好，都会有很大的帮助。

前端开发中很多都是非科班出身的，我也一样。我们相对于科班程序员天然有一些基础的劣势，这些缺失的知识或许在哪一天就会限制住自身的发展。那么我们也可以提前做好准备，自己在业余时间去恶补这些知识，可能涉及计算机操作系统、编译原理、算法与数据结构等等。