本文先整体介绍一下我所理解的前端状况。

本系列的目的主要是分享一些个人经验和理解，希望能帮到需要的小伙伴们。同时从头开始的整理和思考，或许对于本骚年自己也有一定的帮助。共勉共勉~

什么是前端

连接用户的最后一层

说起来，对前端这样的认知方式，大概是当初加入的原因。

为什么我喜欢称之为连接用户的最后一层呢？因为页面的展示和操作交互，是我们的产品与用户直接对话的一步。 当然，用户交互的界面很多，除了前端，还有终端、操作系统、等等。

如果说，想要区分哪些是前端呢？这个要跟我们的浏览器紧紧相关了。

浏览器带你看遍世界

浏览器是个伟大的发明（不知道算发明不），把我们的世界从身边的小圈直接扩大到全世界的各个地方。

以前常说，读书能让我们看到外面的世界。而浏览器的出现，让我们可以接受来自不同国家、不同领域的信息。 浏览器作为跨电脑、手机的应用，只需要打开浏览器，我们就能找到想要的内容，从文字到图片、视频，甚至是游戏，都可以在其中体验。如今手机的普及，更是常常会有 H5 页面，包括一些简单的活动、抽奖、分享信息等。

前端是什么呢？最初的前端，就是写浏览器里面的页面的。像我们常说的网站、网页，或者是百度等，都是前端实现的页面。 最初的时候，前端主要控制页面的展示，和一些样式的调整。随着网络速度和机器能力的提升，页面的交互逻辑逐渐复杂。

随着前端工程化的一些工具、插件、框架的出现，前端的开发效率逐步提升，同时浏览器的兼容和能力开放增加，前端能做到的事情更多。这里补充一下，前端是通过HTML/CSS/Javascript来写页面的。而浏览器除了对HTML/CSS的渲染，还有Javascript引擎，作为页面的逻辑控制。

目前为止，或许大部分的前端的工作内容还是基于浏览器，但随着浏览器的内核或者是Javascript的解析引擎被移植到各个环境，前端的爪子也伸到很多地方。

前端的位置

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

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

浏览器网页的开发组成：前端 <=> (数据交互) <=> 后台。

而如果是多终端的数据展示，则后台的数据则需要同时提供给其他地方。

常见的手机 APP：用户 <=> 终端/webview嵌H5 <=> (数据交互) <=> 终端后台 <=> 数据库 <=> 管理后台 <=> 管理前端 <=> 运营人员。

前端页面既可以作为展示，也可以作为管理，可用于分享，也可用于娱乐。产品的难点，多在于创造和创新，前端也只是一种实现方式而已。 而本骚年更爱的对前端的理解是，身肩负着与用户最亲密的接触，需要把最好的一面呈现给用户。

如果说我们想要让用户喜欢我们的产品，首先要做的就是要以最完美的形态出现，而前端的工作，就是要完美地控制展示层。

前端能做什么

纯前端的进击

现在，前端可以做的事情很多。

服务端

在node.js的强助力之下，前端小伙伴也能管理文件和资源，维护服务进程和数据库了。当然，异步的方式，或许更适合高并发的服务。

App 开发

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

PC 应用

用electron这样的框架，将浏览器加一层对接系统 API 的封装，便实现了跨系统的 PC 应用开发。
网易云音乐的 PC 版便是electron的产品，而小伙伴们写代码的VS Code又何尝不是呢。

无处不在的 H5 页面

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

小程序开发

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

Serverless

如今各种云开发的能力在健全和推广，例如微信小程序的云开发能力，也补齐了前端开发对服务端开发和运维中缺失的一环，能真正意义上实现一人完成整个小程序，从设计到开发到上线到运维。

前端的快速发展

前端也有很多的插件或者库的支持，有了Canvas可以写网页游戏、各种图表插件Echarts/d3绘制图表、还有WebGL的支持、three.js的封装库来写 3D 动画或是游戏。

我们也常常看到前端的技术栈不停地更新，样式库bootstrap，曾经打天下的jQuery，如今各种框架之争Vue、Angular、React，数据流的处理Rxjs、用于 API 的查询语言GraphQL。

作为一个前端，也会常常担心跟不上时代变更的角度。如今的年轻人也越来越聪明了，带的小弟关注的东西比你逼格高很多。
但其实也享受这种不断更新的过程，勇于接受挑战，更新和迭代自己，跟随着世界的脚步走。每一步都走稳了，才是最踏实的方式。

结束语

一直都有想法写这样的系列文章，但不知道怎么下笔。三年前端，学到接触到的东西很多，或许一时半会写不完。
不过拿起键盘开始敲，也算是一种前进的方式吧。