前端进阶方向

一、服务端技术

对于服务端技术的话，有很多的前端工程师都不是特别的清楚。因为在很多前端工程师眼中 服务端的内容应该是属于后台的东西 ，如果你也有这种想法的话，那么 趁早丢弃 。

试想一个场景，身为一个软件开发工程师，假如有一天，你有了一个点子，想要通过技术来实现的时候。突然发现，你只会写前端的内容，对后台服务一无所知。你不得不求助于服务端工程师。这是不是一种悲剧。

所以说 服务端技术 可能在你的初期对你帮助不大，但是当你在技术领域越来越深入的时候，它是必不可少的内容。

目前针对于前端工程师的服务端技术有非常的多，如果你想要学习服务端技术的话，那么可以从以下四个方面来着手：

1.Node.js，大体可以分成两个框架方向：

1. Express
2. KOA

2.数据库知识，目前的数据库同样分成了两块大的方向：

1. SQL 型数据库，推荐：MySql
2. NO SQL 型数据库，推荐：MongoDB，Redis

3.服务器：

1. Apache
2. Nginx (重点推荐)，针对于 Nginx 来说，你至少需要掌握两点：

1.单页应用的部署

2.反向代理 / 跨域处理

4.云概念（个人认为：云概念是未来的主要方式），云概念至少需要掌握以下 5 点：

1.云服务器

1.标准 ECS 云服务器

2.应用云服务器

2.云数据库

1.SQL 型

2.NO SQL 型

3.云存储服务

1.OSS：对象存储

2.NAS：文件存储

4.ServerLess：无服务结构（小程序云开发是一个很好的切入点）

5.CDN 服务

二、优化技术

如果你想要在工作中获取到更好的评级，那么优化技术是必不可少的。

这里所说的优化技术主要 针对网页访问速度的优化 和 用户误操作规避的优化，这两点的内容应该比好理解。

优化技术这一块如果展开说就非常的大了， 因为它所涉及到的知识点会非常的多，并且根据不同的场景也会有很多定向优化的内容，所以这里我就简单的列举出来几个方向，仅供大家参考：

1. 静态资源优化
2. 接口访问优化
3. 页面渲染速度优化
4. 防抖 / 节流方案

具体的内容，大家可以自行百度，这里就不详细说了。

三、监控技术

这一块的内容，可能很多两三年左右开发经验的同学很少了解过。先简单的做一个定义。

什么叫做监控技术呢？

当我们的项目上线之后：
到底有多少人来访问？
项目出现过多少次catch？
用户在哪个页面停留的时间比较长？
等等…

获取这些数据的方式我们就称为：数据监控技术，这里简称 监控技术。

看到这里，可能有很多同学会说：“我要这些东西有什么用啊？”。

你如果只作为一个码农角色的话，那么确实没有用。但是如果你站在开发者的角度、或者 项目所有人 的角度来看的话，那么这些数据是非常重要的依据。基于这些数据来完成的 数据可视化平台 ，也是现在非常重要的一个方向。

说了这么多，那么如何实现数据监控呢？ 实现数据监控的方式主要可以分成两种：

1. 自定义数据监控
2. 使用现成的第三方监控平台（前期推荐使用）

如果你对监控技术刚刚接触，或者处于项目前期的话，那么我个人推荐你使用 现成的第三方监控平台，这一类的平台有很多，简单列出三个：

1. 百度统计
2. 诸葛IO
3. GrowingIO

为什么会这么推荐呢？很简单，两个字 简单 。因为简单，你可以快速上手。因为简单，你可以不用花大量的时间去进行测试、逻辑编写。因为对于监控技术，是一套非常复杂的技术体系。仅对于 埋点 这一块来说，就可以分为：

1. 无埋点
2. 全埋点
3. 自定义埋点

三个大的方面。

所以对于前期，我更推荐大家直接使用现有的第三方平台。当这些平台无法满足你的需求的时候，可以考虑自己实现。

四、工程化技术

如果你不是 leader 的话，那么工程化技术你接触的可能也会比较少。

什么是工程化呢？

比如说：
你的代码提交到 Git ，那么这个 Git 平台是怎么搭建的？
你的代码提交，如果不合规（死链或者代码格式不合规），如何避免被提交？
代码部署这种重复的工作如何自动化？
新版本上线如何最大程度的减轻 BUG 出现导致大面积崩溃的风险？
如果真的出现了大面的崩溃，如何快速的返回上一个稳定版本？
等等…

这些场景，我们都可以称之为是属于 前端工程化 的一部分

工程化代表的应该是一整套前端从开发到上线的全流程。目前的工程化以自动工程化为主。也就是说你的开发、测试、部署等等，全部都自动化。

这一整套的自动化工程，就可以称为是一套 工程化技术。

在很多的中小公司中，工程化的流程并不规范，存在非常多的问题。这点对大家来说，应该是一个好事情，如果你熟练地掌握了 工程化技术，那么你就会拥有更多的 技术资本 。

工程化技术方面，简单的给大家进行一下列举：

1.代码托管平台搭建

1.Gitlab

2.自动化工具

1.合规检测

1.ESLint 提交检测

2.兼容性检测

3.死链检测

2.自动化测试

3.自动化部署

1.CI：持续集成

2.CD：持续部署

3.产品迭代方面

1.灰度发布

2.A/B 测试

五、进阶知识 和 底层知识

如果你当前已经有了一份工作，接下来打算拥有更高的薪资的话，那么你就应该开始学习 进阶知识 和 底层知识了

进阶知识、底层知识 我放到了一起来说。因为我觉得他们两个对应的 下阶段目标 一致，并且是可以穿插着来进行学习的。

进阶知识 主要针对于 工作中的实战 多一些，也就是内容更加实在，在实际工作中会经常的用到。

底层知识 主要针对 面试 的内容多一些，里面涉及到的很多内容有类似于面试宝典的感觉。比如说 二叉树、链表 这些内容，在实际的工作中，其实帮助不大。

那么下面我们就分别针对这两块来说一下：

进阶知识

首先我们来看进阶知识。进阶知识主要针对工作中的实际应用场景。

以 ES6 为例，不会 ES6 会导致你无法完成工作吗？ 不会！ 但是你想要更好的完成工作，你不会 ES6 的语法，那么可以吗？ 不可以！

这就是进阶知识在实际工作中的作用，一般情况下它不会导致你的工作无法完成，但是它可以帮助你更高质量的完成工作。

所以如果你想要在职场上，更近一步的话，那么就需要学习 进阶知识 了。

下面我列出来一部分进阶知识的内容：

1.TypeScript

2.ES6

3.CSS 预处理器

1.Scss

2.Less

3.Stylus

4.思想层面

1.组件化思想

2.数据驱动思想

底层知识

底层知识 的内容更倾向于 面试 时的场景。因为他里面有很多的知识点在你平常的工作中是没有直接使用场景的。

比如 二叉树、红黑树 、链表 的概念，这些底层内容看起来好复杂，但是在实际工作中其实没啥用。

不过这些概念性的东西在 面试 中反而会经常的出现，特别是在一些 大厂 的面试中，也就是所谓的 面试造火箭，工作拧螺丝 的概念。

底层知识 的内容，不打算介绍太多，具体涉及到的常见内容 大家可以看上面的脑图，我这里就不进行列举了。

如果大家最近有考虑换工作，进行面试的场景的话，那么可以突击一下 底层知识。

六、新兴知识

然后我们来看 新兴知识。前端的技术发展是非常快的，这个在咱们前面的文章中，也体现过。那么快速的发展必然会带来很多新的概念、新的知识点。这一类的知识我统一称为新兴知识。

举个简单的列子，以小程序为例，在 2017 年的时候微信提出了小程序的概念，那么假设我们现在处于 2017 年，小程序就属于 新兴知识。而我们现在处于 2020 年，小程序就已经变成了 工作知识 了。

所以 新兴知识 它会随着时间来不断地发生变化。 同时大家也要知道对于新兴知识，并不是都会像小程序一样变成 工作知识。有些新兴的概念，并不会那么适应大众，逐渐的变为小众化的技术，比如 React Native 。

同样的道理对于其他的知识也一样，jQuery 当年是必备的工作知识，现在也不过是为了维护老系统而被迫使用的知识点而已。

所以对于前端的学习，大家必须要能够保证时刻的进步状态，千万不能 想着 一劳永逸。

目前比较流行的新概念主要有三个：

1. 大前端
2. 微前端
3. ServerLess：无服务架构

这三个知识点，大家可以进行一下了解，然后根据自己的实际情况进行 选择性 的重点学习。

未来展望

未来展望 主要建立在 新兴知识 的基础之上。因为只有 新兴知识才能改变未来 。以后的开发模式，谁也说不准，我这里结合我自己的理解，说一下我个人认为未来的前端路会怎么走。

1. 大前端概念盛行：现有的移动端（Android、IOS）原生开发工程师、小程序开发工程师都会逐渐的融入到前端的概念中，也就是共同组成 大前端
2. ServerLess （无服务架构）会在中小企业中盛行，因为 ServerLess 大大改变了前后端交互的方式，最直接的就是 省钱了！