導(dǎo)語：

對大前端工程師來說，這是最好的時(shí)代。文中多處引用牛人博客觀點(diǎn)，重在分享，見諒見諒~

一，認(rèn)識前端

WEB編程語言，分為WEB靜態(tài)語言和WEB動態(tài)語言，WEB靜態(tài)語言就是通常所見到的超文本標(biāo)記語言 ，WEB動態(tài)語言主要是ASP，PHP，JAVASCRIPT，JAVA，CGI等計(jì)算機(jī)腳本語言編寫出來的執(zhí)行靈活的互聯(lián)網(wǎng)網(wǎng)頁程序。
Web前端開發(fā)工程師是一個(gè)很新的職業(yè)，在國內(nèi)乃至國際上真正開始受到重視的時(shí)間不超過10年。Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web 1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。

最早的軟件都是運(yùn)行在大型機(jī)上的，軟件使用者通過“啞終端”登陸到大型機(jī)上去運(yùn)行軟件。后來隨著PC機(jī)的興起，軟件開始主要運(yùn)行在桌面上，而數(shù)據(jù)庫這樣的軟件運(yùn)行在服務(wù)器端，這種Client/Server模式簡稱CS架構(gòu)。

隨著互聯(lián)網(wǎng)的興起，人們發(fā)現(xiàn)，CS架構(gòu)不適合Web，最大的原因是Web應(yīng)用程序的修改和升級非常迅速，而CS架構(gòu)需要每個(gè)客戶端逐個(gè)升級桌面App，因此，Browser/Server模式開始流行，簡稱BS架構(gòu)。

在BS架構(gòu)下，客戶端只需要瀏覽器，應(yīng)用程序的邏輯和數(shù)據(jù)都存儲在服務(wù)器端。瀏覽器只需要請求服務(wù)器，獲取Web頁面，并把Web頁面展示給用戶即可。

當(dāng)然，Web頁面也具有極強(qiáng)的交互性。由于Web頁面是用HTML編寫的，而HTML具備超強(qiáng)的表現(xiàn)力，并且，服務(wù)器端升級后，客戶端無需任何部署就可以使用到新的版本，因此，BS架構(gòu)迅速流行起來。

Web應(yīng)用開發(fā)可以說是目前軟件開發(fā)中最重要的部分。Web開發(fā)也經(jīng)歷了好幾個(gè)階段：

靜態(tài)Web頁面：

由文本編輯器直接編輯并生成靜態(tài)的HTML頁面，如果要修改Web頁面的內(nèi)容，就需要再次編輯HTML源文件，早期的互聯(lián)網(wǎng)Web頁面就是靜態(tài)的；

CGI：

由于靜態(tài)Web頁面無法與用戶交互，比如用戶填寫了一個(gè)注冊表單，靜態(tài)Web頁面就無法處理。要處理用戶發(fā)送的動態(tài)數(shù)據(jù)，出現(xiàn)了Common Gateway Interface，簡稱CGI，用C/C++編寫。公共網(wǎng)關(guān)接口編輯
公共網(wǎng)關(guān)接口(Common Gateway Interface)為web服務(wù)器定義了一種與外部應(yīng)用程序交互、共享信息的標(biāo)準(zhǔn)。
CGI的工作原理
客戶端瀏覽器向WEB服務(wù)器提出服務(wù)請求并顯示服務(wù)器傳遞過來的結(jié)果。WEB服務(wù)器將客戶請求正確映射傳遞給CGI接口程序，在將CGI的執(zhí)行結(jié)果傳遞給客戶端的瀏覽器。CGI接口負(fù)責(zé)處理WEB服務(wù)器傳遞過來的客戶服務(wù)請求。

CGI的作用

• 擴(kuò)大了WEB服務(wù)器的功能;
• 它打破了服務(wù)器軟件的局限性，允許用戶根據(jù)需要采用各種語言去實(shí)現(xiàn)無法用HTTP、HTML實(shí)現(xiàn)的功能，給WWW提供了更為廣闊的應(yīng)用空間;
• 為在不同的平臺之間進(jìn)行溝通提供了范例。

連接服務(wù)器與外部應(yīng)用程序。服務(wù)器可以向CGI程序發(fā)送信息，CGI程序也可以向服務(wù)器程序回送信息。

ASP/JSP/PHP：

由于Web應(yīng)用特點(diǎn)是修改頻繁，用C/C++這樣的低級語言非常不適合Web開發(fā)，而腳本語言由于開發(fā)效率高，與HTML結(jié)合緊密，因此，迅速取代了CGI模式。ASP是微軟推出的用VBScript腳本編程的Web開發(fā)技術(shù)，而JSP用Java來編寫腳本，PHP本身則是開源的腳本語言。

MVC：

為了解決直接用腳本語言嵌入HTML導(dǎo)致的可維護(hù)性差的問題，Web應(yīng)用也引入了Model-View-Controller的模式，來簡化Web開發(fā)。ASP發(fā)展為ASP.Net，JSP和PHP也有一大堆MVC框架。

目前，Web開發(fā)技術(shù)仍在快速發(fā)展中，異步開發(fā)、新的MVVM前端技術(shù)層出不窮。

Python：

Python的誕生歷史比Web還要早，由于Python是一種解釋型的腳本語言，開發(fā)效率高，所以非常適合用來做Web開發(fā)。
Python有上百種Web開發(fā)框架，有很多成熟的模板技術(shù)，選擇Python開發(fā)Web應(yīng)用，不但開發(fā)效率高，而且運(yùn)行速度快。

二，學(xué)習(xí)前段

基礎(chǔ)學(xué)習(xí)：

• HTML
• CSS
• JavaScript
• jQuery
• 學(xué)習(xí)如何編寫可閱讀的代碼
• 深入學(xué)習(xí)JavaScript：當(dāng)每周我們有一個(gè)比任何舊框架更好的新框架的時(shí)候，這時(shí)會非常容易花費(fèi)你的大部分時(shí)間去學(xué)習(xí)框架而不是語言本身。假如當(dāng)你正在使用一個(gè)框架，但是并不理解它的工作原理，那就停下來并開始學(xué)習(xí)語言直到理解如何使用工具去工作。
• 學(xué)習(xí)函數(shù)式編程：多年以來，我們想要在JavaScript中使用類，現(xiàn)在我們終于有了類但是再也不想使用它了：函數(shù)就是我們想要的一切！我們甚至用函數(shù)編寫HTML（JSX）
• 學(xué)習(xí)設(shè)計(jì)基礎(chǔ)
• 學(xué)習(xí)如何與人合作
• 學(xué)習(xí)如何為人寫作

進(jìn)階學(xué)習(xí)：

Web 框架上，從 Google 查詢關(guān)鍵字的大勢看，jQuery 時(shí)代已慢慢離我們而去。Web 前端框架已基本三足鼎立，分別是 React / AngularJS / Vue。不管是 Web，還是客戶端，都不同程度遇到業(yè)務(wù)越來越復(fù)雜，代碼量越來越大，編譯性能越來越慢的問題。Web 開發(fā)中，Node.js已在驅(qū)動前后端的再分工，這已是事實(shí)?？缍思夹g(shù)今年已不再去談?wù)?Hybrid 技術(shù)了。離線化、差量更新、Web 與端互調(diào)等能力已不是什么新鮮事，說明混合開發(fā)已基本成熟，在各大廠均有較為廣泛的使用，如果還沒做的，也在補(bǔ)齊當(dāng)中。新的技術(shù)是：React Native、Weex，還有 PWA、小程序，甚至還有 Electron。

三，前景

• iOS 動態(tài)插件化技術(shù)。特別是 iOS 上的插件化技術(shù)期待能夠得到更大的發(fā)展，來解決目前發(fā)版效率與包大小問題。
• Google 一邊是 Chrome 的 Web，另一邊是 Android 的 App，我很期待的是 Chrome 與 Android 融合之后對開發(fā)的影響。
• Web 框架層面明年難有創(chuàng)新，中期還仍是 React/AngularJS/Vue 三駕馬車的技術(shù)棧體系，但我仍期待是否有超越 React 的模板/框架思路。
• HTTP 到 HTTPS 的更替將會推動 HTTP 2 的使用。讓 Web 頁面性能十年以來以請求數(shù)為首要基準(zhǔn)成為過去式。為應(yīng)對 HTTPS，部分云計(jì)算廠商可以提供整套移動端商業(yè)解決方案，如：長鏈透傳收費(fèi)服務(wù)和 HTTPS 套裝。
• 跨端上 React Native 與 Weex 著重于解決跨端技術(shù)問題，并不能給開發(fā)者帶來實(shí)實(shí)在在的收益。PWA 還談之過早，所以我更看好小程序未來的發(fā)展，并不是技術(shù)上現(xiàn)在有多牛，而是在微信它是能給個(gè)人開發(fā)者和 Web 從業(yè)者帶來就業(yè)機(jī)會與收益的最佳方式。腦洞大一點(diǎn)的看，支付寶、Facebook、小米是否也會會推出自己的「小程序」場景呢？是件令人期待的事。

最后，H5

一、移動優(yōu)先；

二、游戲開發(fā)是重要領(lǐng)域；

三、響應(yīng)式設(shè)計(jì)：

在HTML 5真的改變移動開發(fā)平臺之前，必須要邁出重要一步，那就是“響應(yīng)式設(shè)計(jì)”，也就是屏幕可以根據(jù)內(nèi)容而自動調(diào)整大小。然而響應(yīng)式設(shè)計(jì)也是一件非常不容易的事情，因?yàn)楫?dāng)今各式各樣的設(shè)備實(shí)在是讓開發(fā)者眼花繚亂，手足無措。要想做好響應(yīng)式設(shè)計(jì)，就必須洞悉內(nèi)容與屏幕之間的反饋關(guān)系，響應(yīng)式設(shè)計(jì)要完全離開“流”，轉(zhuǎn)而注重內(nèi)容是如何在網(wǎng)頁和移動設(shè)備中被處理的，這一過程還在繼續(xù)，HTML 5會讓它最終成為可能。

四、設(shè)備訪問;

五、離線緩存。