前言
最近在閏土大叔的前端圈裡有很多小夥伴南下杭州應聘求職拿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的前端工程，它裡面涉及到的東西你就要去理解去學習它。這樣才能把你的價值往上去提升。
所以，當你在公司中體現出你作為前端的價值來之後，你的議價能力也會隨之水漲船高，得到提升，這是一個相輔相成的過程。
謹以此文，與君共勉。
最後，想看閏土雜談系列文章，歡迎關注我的公眾號：閏土大叔。