北漂周的專欄（微信：stchou_zst）
前言——前端轉型之殤
比人本是一名Android開發人員，奈何受到創業大潮之洗腦，義無反顧加入了創業大軍。輾轉反側，摸爬滾動，偶然機會需要進行前端整站架構開發。瀏覽器相容、PC\APP\微信三端相容、SEO、服務端渲染加速等，從未想過的問題接踵而至。特將自己邁過的坑的再次記錄，希望大家無痛學習前端技術，無痛學習Vue。
本文初衷
如果用一句話來形容入門學習前端技術就是——多麼痛的領悟！！！
為什麼我會這麼說呢？作為一個一直書寫Java的開發來說，對網頁前端的理解比較片面，覺得簡單的謝謝Css和JavaScript就能夠完成一個頁面了，且對網頁前端開發的工作嗤之以鼻。web2.0發展這麼多年以來，給網頁前端開發帶來了很多助推作用。但是，對於網頁前端來說缺少一個真正意義上框架。
之前只會簡單的使用自帶的DOM方法來操作如：dcoument.getElementById，然而市面上很多框架外掛都使用JQuery來書寫，之後我們也嘗試使用JQuery來做網頁前端開發。
JQuery
如一個顯示一個列表，使用JQuery就只能這麼去寫
<html>
<body>
<table id="productList">
</table>
</body>
</html>
......
$.each(data.productList,function(index,item){
$("#productList" 看不懂？沒關係。但是，你至少看得懂，這裡所書寫的列表頁，將Model與View完全粘合在了一起。這對於一個寫慣了Android DataBinding，寫慣了Java的開發來說，這種寫法簡直像是行業倒退了。沒有ListView，沒有Adapter，沒有ItemView的重新繪製機制，M層和V層完全粘合在一起。然而，這樣的寫法在前端開發界已經持續了很多年了。(我說話就這直，大家別怪我)
那麼，對於一個有了一點Coding經驗的開發來說，如何轉型做前端開發。還沒有Coding經驗的小白來說，如何選擇自己的學習路徑呢？本文就重點說一下這個問題。（請大神請自動過濾本文）
什麼是前端開發
前端開發的定義
度娘給出的答案是：
前端對於網站來說，通常是指，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高階版本HTML5、CSS3，以及SVG等。
沒錯，基本上來說，我們所平時所有泛指的前端技術人員都是與網頁、Html、JS打交道的工程師。主要的工作就是進行網頁相關的，PC網頁、移動端網頁、WebAPP甚至是跨平臺應用的研發。
前端現狀
- 市場需求
由於開發人員僅作為頁面的展示工作，入門學習也很簡單，從業人員的資歷，學歷往往比較低（行業現狀）。所以整個前端在開發領域的地位並不怎麼高。加之，近年來移動網際網路的熱火朝天，學校、培訓機構。然而，很多開發人員都是將自己定位在前端編寫靜態頁面上（完全沒有JavaScript的邏輯）。
下面我們先看一個簡歷：
沒錯，也許你和我一樣，覺得這些簡歷上這麼同學所會的東西並沒有很多，要價卻不低。資料結構？演算法？記憶體管理？程式碼管理？三方框架？這些東西其實針對於前端工程師來說並沒有向客戶端工程師要求這麼高（又黑前端了）。其實並不是，這樣，前端的技術研究方向還是挺多的，那麼為什麼現在前端開發的薪酬會如此高呢？
- 招聘難度（缺人！！！）
任何東西都有它的物價，開發人員也一樣。如果有朋友在BAT裡面任職的話，應該會清楚，大企業裡面的也非常缺前端開發。移動網際網路熱，讓很多大學畢業生都去學習Android、iOS方向去了，反而前端開發的人員變得了稀缺。
未來趨勢
前端時代來臨，原生APP的落幕
- 微信小程式發展
相信大家最近看到最多的技術文章，都是在描述微信小程式的如何開發。沒辦法，微信在中國的影響力太大了，任何一個舉動都讓無數的網際網路人員去研究張小龍的是如何佈局未來。當然，所有人都同樣的認為小程式會成為未來開發的一個主流模式。
看過官方的Demo之後，我們毫無意外的發現，小程式開發的本質還是在微信的內部，使用微信提供的API書寫前端邏輯。
混合型開發變成主流
前後端分離，地位掌握主動權
剛接前端語言的時候，會發現所有的前端開發人員並不能操控整個前端專案的書寫與上線。寫完靜態頁面之後必須把自己的專案交給後端開發，放置到模板引擎中，如PHP中的smarty、Java中的JSP/FreeMarker等模板語言框架。
為什麼會這樣呢？我們看一下服務端模板引擎的系統架構。
你會發現，所有的前端邏輯程式碼需要發到伺服器端的邏輯之中，服務端開發的同事需要幫前端開發同事做一部分工作。也許你會說，這有為什麼問題呢？我們的很多網站基本也都是這麼寫的哈？確實，對於移動網際網路到來之前確實沒有什麼問題，如果只有一個端的話問題也不大。
但是，對於很多公司來說，自己的專案並不僅是一個網站而已，往往會伴隨著網站、APP、微信同時發力。這樣的話，整體專案的架構就會變成如下所示：
原生開發的APP，畢竟是客戶端，只需要服務端提供介面就能夠完成自己的邏輯。這樣的話，公司內部對於服務端開發的同事要求就比較高了，需要提供兩種不同的邏輯查詢處理方式以供三端的使用。這就是為什麼很多公司都會招聘很多後端開發的工程師，也就是為什麼很多後端開發工程師都瞭解前端邏輯書寫，對於純前端開發人員來說要求並不高的原因。
估計你和鄙人都會有同樣的疑惑，反正後臺都需要提供RESTfull API，為什麼前端開發工程師不直接呼叫API來完成自己的邏輯呢？
當然，存在必定合理，從web2.0的角度來說這麼做可能會有幾點考慮。如
- 優化載入速度
- SEO
- 資料安全
- 沒有好的前端開發框架
- 招不到牛逼的前端開發
如今來說，上述的所有顧慮都得到了解決，最大的問題變成了人才的培養和招聘上了。
從何入手
沒有基礎
本文不針對完全沒有任何開發經驗的人群，如果你對Coding有一定的瞭解，甚至是像韜哥這樣，做過一段時間的Java，那麼推薦你去W3CSchool：http://www.w3school.com.cn/簡單的看一下CSS和JavaScript入門，相信我，花一天時間簡單瞭解一下即可，後期不會或者記不住可以現用現查。這就開始
配置環境
下載WebStorm:http://www.jetbrains.com/webstorm/
安裝NodeJS:http://nodejs.cn/
其實並不一定要選擇webStorm作為開發工具。但是，對於使用慣了Android Studio或者Intellij的開發者來說，使用WebStorm你會倍感親切。選擇框架
目前市面上的MVVM框架挺多，Angular、Vue、React這三個框架已經三分天下（韜哥之前還用過Avalon）。當然，Vue學習起來相對較為簡單，本文的初衷也是以Vue來作為學習分析。
做好上述的思想準備和工具準備之後，我們就可以開始書寫前端專案了，本文之後會持續更新，向大家分享前端學習的心得。有問題，或者想吐槽的，請加韜哥微信：
/*
* @author zhoushengtao(周聖韜)
* @since 2016年12月11日 凌晨1:39:20
* @weixin stchou_zst
* @blog http://blog.csdn.net/yzzst
/
