前言

最近在闰土大叔的前端圈里有很多小伙伴南下杭州应聘求职拿OFFER，货比三家之后，最终入职了适合自己的公司，并且还拿到了不错的薪水。在这些小伙伴当中，不乏刚刚大学毕业或者师出培训班的职场萌新，在顺利找到工作之后，该如何在公司里体现前端的价值？你又该如何在前端圈里提高自己的议价能力呢？

别急，接下来且听大叔娓娓道来。

先来聊聊国内的前端现状

今天我主要想讲讲前端工程，这是目前国内的前端主流模式，这其中就包括了webpack 和 Vue.js。

我怎么看如今的webpack

webpack已经是一个我们开发WEBAPP这种类型的项目的时候，离不开的工具。webpack能帮我们解决非常多的问题。作为一个前端开发人员，在可见的几年内，我们都需要去加强自己webpack的能力。或者说将来可能会出现一个类似于webpack，或者比它更强大的工具，那么这么一个工具是可预见的，肯定会存在的一个东西，而这个东西会在很长的时间内成为我们前端去衡量一个开发人员的能力是否强大的一个标准。

来聊聊Vue.js在国内的现状

Vue.js作为现在前端圈的框架里数一数二的存在，尤其是在国内，用的非常多，应该来说已经超过了React的使用量。而且现在Vue.js依然处于一个非常好的社区氛围当中，它的开发速度，新的功能的增加速度都非常的快。然后它的BUG解决的效率也非常的高。

Vue.js的作者在他的发布过程当中，为我们解决了非常多的在开发过程中遇到的工程问题，比如他给我们提供了.vue的开发模式，让我们可以非常方便地去写一个组件。然后官方发布了Vuex、Vue Router这些工具包，这在React中有相似的参照物像 React Router、redux。这些工具包都是Vue.js官方去开发的，所以它的维护性会比React 中的第三方维护的要好很多。在这种情况下之下，国内的很多工程师，在做前端项目之后，越来越多地选择使用Vue.js作为开发框架。所以我们作为前端开发人员去学习Vue.js，是我们需要掌握的必不可少的技术栈。

谈如何体现前端的价值

在现在的前端开发当中，重点和难点并不是我们的业务开发。因为大部分公司的业务并不会特别的复杂，而且每个公司当中他们的业务是不一样的。所以你在学习一门技术的时候，你如果花很多的时间去做业务开发，其实你的效率是非常低的，因为你没有学到真正的内容。

在公司中我们的前端应用，也就是客户端应用，它是放在每一个人的电脑或者手机里面去跑的，每个人跑的都是单独一份。所以它们的性能不会特别的高。因为很多的公司的业务不会很复杂，不会像那种要在线编辑，PS图片这种工具要求性能会非常高。所以在性能不是特别大的问题的时候，我们更多要考虑的是工程化的问题。

所以我们如何在前端圈体现出自己的一个价值呢？接下来我们将围绕以下四个Keywords来具体阐述：

（1）搭建前端工程

首先，我们要学会如何在一个项目中去搭建工程。因为现在前端变得越来越复杂，不像是以前我们前端开发一个页面，开发一个模板，一个简单的DOM交互的动画，一些CSS样式，这些东西我们写好之后交给后端，他们去填数据就可以了。

那现在不一样，现在的前端业务逻辑都在我们的工作范畴之内，我们要去做很多的东西，比如说数据缓存，这时候我们必须要考虑一个工程化的概念。不然的话我们代码太多，不好维护。

我们写起来效率会非常低。而且我们现在的前端开发并不是所见即所得了，我们要使用ES6，使用LESS，这些东西我们都不能在浏览器里面直接跑，但是这些东西又可以加快我们的开发效率，所以我们希望去使用它。那么如何去平衡这两者之间的关系，这就是我们在前端工程中需要考虑的问题。

（2）网络优化

网络优化涉及到的更多的是基础概念，比如说我们HTTP的理解，因为我们所有的静态资源都是通过HTTP去加载的，如何才能去加快我们HTTP使用的速度，如何去缓存我们的HTTP请求，这些东西只有我们理解了之后，才能更好的去优化我们的前端工程。这些东西如何去做到，这也能体现出你的价值。

我们希望去减少HTTP请求，我们希望去压缩静态资源的文件，我们希望使用浏览器的长缓存，让应用的流量能够变得更小，加载速度变得更快等等。

（3）API定制

在我们做前端应用之后，大部分项目的开发模式是前后端分离的，不是以前在浏览器里输入一个URL，后端填数据操作HTML模板，然后返回给用户的。这是我们以前看到的HTML页面。

跟现在不一样的是，我们跟后端的交互都是API请求，比如说JSON数据，这个时候我们要跟后端达成一个合作协议，因为API是涉及到前端和后端的，我们是使用方，后端是提供方。如果后端提供的不好，那么我们前端使用起来就会非常的难用，所以这个我们要如何去跟后端进行交流，需要我们去理解后端去开发一个API接口是如何去做的等一些简单的概念。

如果你不懂这些，你无法去跟他们交流，那么你只能听他们后端说，“ 这个东西你刚才说的我们做不到啊~ ”，然后你没有办法去反驳他。那这样的话，就跟产品经理走过来跟你说，这个需求一定要做，但你跟他说 “ 这个用前端技术实现不了的~ ” 这个概念其实是一样的。

所以，如果你不希望做一个被忽悠的一方，那么你就要去了解他们这边如何去做这个事情。

（4）NodeJS层

NodeJS现在在前端开发中用的非常的多，举个最简单的例子，比如前端工程的搭建，都是围绕于NodeJS。比如我们的webpack，Gulp，Grunt等这些工具他们都是在NodeJS环境里面去运行的，不是在我们前端环境里面去运行的。所以你要有基本的NodeJS使用的概念。你要去学这些东西，至少要知道如何用NodeJS去写一个脚本，让它在我们的Terminal命令行里面去跑起来。只有这样才能把我们的前端工程去运行起来。

同时有很多公司已经把NodeJS运用起来，他们会在前端和后端的API层之间，去加一个NodeJS层，用NodeJS去做一些分发，数据处理，所以说，如果你希望你的前端议价能力越来越高，那么你必须要去学NodeJS的一些东西。而你在学NodeJS的过程当中，又会去加强你的API定制的一些理解。当你学到后端的开发之后，你对网络的一个概念，对HTTP请求的概念，也会变得越来越深。所以，你现在去学NodeJS，性价比是非常高的。

后记

说了这么多，我想告诉大家，你现在去学一门前端框架，固然非常重要，但是你不要把更多的时间去花在你使用这个框架去做业务开发上面，业务开发不会特别的复杂，或者说它需要你的知识能力并不会特别的高。

很多童鞋知道，如果公司要使用Vue.js框架，会使用vue-cli这个脚手架工具，给我们去生成一个项目。生成项目之后，你只需要去写一个项目就OK了，你的项目就会跑起来。

但是你要知道，使用vue-cli生成的项目，在很多公司里面，是没有办法直接投入到生产环境当中的，因为他是一个广泛适用的模板，但是每个公司在业务上是不同的，他们肯定多多少少会在这个工程有一些定制的需求。

那这个时候如果你没有办法去理解vue-cli这个项目是怎么跑起来的，那么你就没有办法去定制它，去修改它。那么这个时候，你就没有办法去撑起一个公司的前端部门的项目搭建这个工作，那么你的前端议价能力会变得比较的低。而vue-cli生成的项目其实就是基于一个webpack的前端工程，那么它里面涉及到的东西你就要去理解去学习它。这样才能把你的价值往上去提升。

所以，当你在公司中体现出你作为前端的价值来之后，你的议价能力也会随之水涨船高，得到提升，这是一个相辅相成的过程。

谨以此文，与君共勉。

最后，想看闰土杂谈系列文章，欢迎关注我的公众号：闰土大叔。