這是一個演講稿,mark一下

1、前端的發(fā)展史

1、前端

這是從維基百科上找到的關(guān)于前端的定義，一般來說，計算機程序的界面樣式，視覺呈現(xiàn)屬于前端。
也就是網(wǎng)站mvc結(jié)構(gòu)中的view部分，但是現(xiàn)在說的view層和原來的view層含義已經(jīng)不一樣了，這個待會我們在介紹angular的時候說。

2、前端/互聯(lián)網(wǎng)的上古時代

前段時間找到了世界上的第一張網(wǎng)頁，現(xiàn)在還可以訪問，他 http://info.cern.ch/ ，可以看到，所謂網(wǎng)站就和現(xiàn)在的world類似，只有標(biāo)記語言和超鏈接，完全沒有動效和樣式可言。更不用說代碼的復(fù)用性，以及局部加載。
這是一個偉大的時刻，標(biāo)志著萬維網(wǎng)的誕生，不過站在歷史中往前看，就會覺得那個時代簡直是洪荒時期，只是把簡單的信息傳達出去，連刀耕火種的能力都沒有達到，。

3、前端的統(tǒng)一與分割

html/css/js

刀和火什么時候才到的呢？一直到96年，css的出現(xiàn)，同年，網(wǎng)景公司推出了javascript 之后微軟也推出了vbscript 前端屆的刀和火出現(xiàn)了，同時意味著正式開始出現(xiàn)前段，這個時候前端的html負責(zé)頁面結(jié)構(gòu)，決定著網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，是整個網(wǎng)頁的軀殼，css負責(zé)樣式部分，他決定了網(wǎng)站看起來是什么樣子，屬于前段的皮膚吧，js控制網(wǎng)頁的行為，決定做什么一般來說，js負責(zé)調(diào)用一些前端計算與動態(tài)加載，應(yīng)該屬于整個網(wǎng)頁的靈魂。只有這三個同時具備的，才能算是一個真正的網(wǎng)站前端。
但是這個時后的網(wǎng)頁還有些許的缺陷，不能局部加載，復(fù)用性比較差。就拿我們的網(wǎng)銀舉例子：可看到，基本上所有的界面的頭部，底部還有菜單部分，都基本上是一樣的，我沒道理同樣的代碼在每個頁面上都要寫一遍，所以不久，微軟就推出了ifram標(biāo)簽，實現(xiàn)了異步的局部加載，就是相當(dāng)于在網(wǎng)頁中嵌套一個網(wǎng)頁，切換目錄只是切換ifram中的網(wǎng)頁，像我們的驗印系統(tǒng)和CRM中的局部加載就是這樣實現(xiàn)的。

ajax

再之后99年W3C發(fā)布了第四代HTML標(biāo)準(zhǔn)，同年微軟推出用于異步數(shù)據(jù)傳輸?shù)腁ctiveX，意味著ajax的誕生，這在前端史上同樣是個里程碑的事件，之前的iframe中部分加載，其實還是直接加載某個完整的html界面。但是如果這個界面中，如果之前的交易想實現(xiàn)這個功能，需要兩個頁面，第一個頁面輸入我們需要添加的查詢字段，然后點擊查詢，進行form表單提交，然后我們就跳轉(zhuǎn)到 form表單返回結(jié)果頁面，從頭開始渲染這個頁面。如果網(wǎng)速很慢的話，這中間會出現(xiàn)點擊搜索，然后一個白屏，之后才出現(xiàn)結(jié)果頁面。而ajax則可以讓我們?nèi)缇W(wǎng)銀這般實現(xiàn)真正意義上的局部加載，點擊查詢的時候，只對下半部分進行刷新，而不用對整個界面重新進行渲染，極大的優(yōu)化了用戶體驗。再一點 之前的方法從數(shù)據(jù)庫查回列表數(shù)據(jù)，需要在服務(wù)端重新將數(shù)據(jù)拼裝到頁面上，使用ajax技術(shù)，這部分的操作被挪到了客戶端瀏覽器上，所以ajax的出現(xiàn)，并不僅僅優(yōu)化了用戶體驗，他將很大一部分計算從服務(wù)器挪到了前端，使前端能夠完成了更多的工作。為日后的前后端分離提供了技術(shù)支持。

jquery

然后一直到09年的時候，前端一直穩(wěn)定發(fā)展，沒有進行什么大的改變，這段時間市面上主要有兩款瀏覽器，我們稱之為IE瀏覽器和非ie瀏覽器，所謂神仙打架凡人遭殃，ie瀏覽器為了搶奪網(wǎng)景公司的市場，開發(fā)出了javascript的變種，jscript。雖然兩個基本上完全一樣，但是語法糖上可能還是有些許的差別，所以，那個時代的前端工程師他們的主要工作就是畫頁面和踩各種坑，那個時代一個閱歷豐富的程序員的一個標(biāo)志就是熟練掌握兩種瀏覽器之間的差別，且能找到兼容的方法，
jquery的出現(xiàn)在一定程度上緩解了這個問題，正如jquery的logo顯示的一樣，他封裝了write less do more 他致力于用更少的代碼實現(xiàn)更多的功能。
jquery其實是一個腳本庫，jQuery抽象了復(fù)雜的代碼和瀏覽器怪異模式，兼容不同的瀏覽器，用簡短的代碼實現(xiàn)動效，用鏈?zhǔn)秸Z法風(fēng)格減少了程序員的代碼量。使我們有時間做重要的事情.雖然現(xiàn)在市面上的各種框架都能實現(xiàn)jquery的各種功能，但是他憑借較低的學(xué)習(xí)成本以及多少年來積攢的用戶量，依然在現(xiàn)如今的前端圈中占有一席之地

2、大前端與Anaular

1、前端的大爆炸時代

從99年到09年附近基本上沒有什么大的變化，一直到谷歌發(fā)布了v8瀏覽器引擎，這個引擎極大的提升了瀏覽器的計算效率，然后同年ECMA組織標(biāo)準(zhǔn)又發(fā)布了第五版javascript標(biāo)準(zhǔn)，馬上得益于v8引擎高速的計算效率，有人將vx引擎從客戶端搬上了服務(wù)端，用于做服務(wù)器的軟件。
Node.js是一個讓JavaScript運行在服務(wù)器端的開發(fā)平臺，它讓JavaScript的觸角伸到了服務(wù)器端，他的特點是單線程，非阻塞，事件驅(qū)動機制，由于單線程非阻塞的，所以在進行高并發(fā)處理的時候還是蠻有利的，node屬于極客追求性能極致的產(chǎn)物，所以缺少服務(wù)器健壯性的考慮，就比如由于單線程，沒有給每個客戶分配線程所以一處崩潰全線崩潰，也就不適合銀行這種安全要求比較高的企業(yè)。
也許他在服務(wù)端的作用并不是十分的完美，但是他的出現(xiàn)對前端的影響類似于蒸汽機對于人類的的影響。09年開始，前端進入工業(yè)時代。在這之前可能沒有真正的前段工程師這個職位，只是個寫頁面的，切頁面的。node的出現(xiàn)，標(biāo)志這前端工程師職位的正式確立，為什么這么說呢？只有node之后，前端原來做不到的事情，我們可以做到了，就比如代碼混淆合并壓縮甚至包括css代碼的預(yù)處理。也因為nodejs的出現(xiàn)，前段自動化測試工具才得以存在。這些我們在以前是做不到的，node出現(xiàn)以后，也出現(xiàn)了大量的基于node的工具，
如這張圖所示，我們可依次了解一下
npm是一個模塊管理器，在前端環(huán)境工程化開發(fā)的時候，用來添加一些依賴的組件。下頭的這些工具，如果我們需要用的話，可將使用的文件配置好，然后當(dāng)前目錄下直接運行npm命令就可以安裝上。
express是在進行nodejs開發(fā)時候的一個框架，應(yīng)該是類似于jquery之于js吧，現(xiàn)階段，我們的服務(wù)器開發(fā)都是java所以也用不到這個框架，有機會的話可以了解了解
grunt 是一個比較早的也比較成熟的對代碼進行合并壓縮混淆這樣一個工具。js用grunt腳本做整個項目的編譯，你把源代碼的目錄以及要壓縮哪些文件，不壓縮哪些文件，然后將生成的文件放在哪里在配置文件中配置好。然后編譯就可以得到最終的代碼，讀取代碼壓縮解析編譯輸出的過程實際上就是在node上完成的，網(wǎng)銀系統(tǒng) 的壓縮就是用這個工具構(gòu)建的，他可以將網(wǎng)銀初次加載的一百多個文件能減少一半左右。而瀏覽器每次請求文件的并發(fā)量一般允許量是6個文件過多的時候必然會增大請求時間，至于為啥首次加載會有這么多的文件，待會講后我會詳細描述

gulp 然后這個可樂一樣的logo叫做gulp他是在grunt問世不久之后出現(xiàn)的，grunt的基礎(chǔ)上進行了一定的改進，在grunt如日中天的時候開出了一片天地，他和grunt最直觀的差別就是grunt的配置化，在gunt中主要是修改配置文件就好，而gulp則是以代碼的形式配置，據(jù)說相比較grunt的學(xué)習(xí)成本更低，還有一點是gulp的是以文件流的形式操作，相比較grunt是先讀取文件，然后進行合并，合并之后再寫成臨時文件，然后讀取臨時文件，進行混淆再寫，然后再把臨時文件讀取出來，寫到你要輸出的文件的地方，而gulp則是讀取文件然后直接壓縮合并再輸出到目標(biāo)文件上。

webpack 編譯處理的，前邊說過，我們的瀏覽器目前只支持html css和js這些東西，但是有時候為了便于開發(fā)，我們會用新的語言就比如js的超類typescript進行處理，但是typescript的語法特性瀏覽器并不支持，所以在部署到瀏覽器之前需要先把ts也就是前邊說的typescript解析成js語言，這樣瀏覽器才能識別出來。他和上邊兩個工具聽起來好像比較類似，其實是不一樣的，上邊主要是用來壓縮混淆的，webpack則是用來將瀏覽器不能識別的抽象類語言編譯成瀏覽器能識別的語言。

karam作為一個平臺出現(xiàn)的，類似于tomecat和jsp的關(guān)系一樣，他可以運行各種各樣的測試案例，jasmine則是一種語法，方便測試，用來寫斷言式的測試。

看一下右邊的這三個是css的預(yù)處理器 大家知道css是一種圖靈不完備的語言，相當(dāng)與只是把樣式放到了對應(yīng)的選擇器下邊，而預(yù)處理器定義了一種新的語言，他在css的基礎(chǔ)上添加了變量 函數(shù)以及基本的邏輯判斷，這樣來處理樣式，然后再編譯成正常的css文件，供瀏覽器識別，還有一個好處是，不用太考慮瀏覽器之間的差別，就比如css這個樣式火狐是這種寫法，然后ie是另一種寫法，這個他會自動生成，但是你用的是ie11的特性，在ie8上依然是沒有效果的。目前市面上的css預(yù)處理器有很多，但是討論最多的還是這三個，sass less stylus
sass是最早最成熟的css預(yù)處理器語言，可用變量常量混入函數(shù)等語功能，能夠更有效的寫出這些語言來。
less的出現(xiàn)受sass的影響比較大，但是在語法上比較類似于css，所以對于設(shè)計人員和開發(fā)人員來說，開發(fā)相對比較容易?，F(xiàn)階段很多流行的框架中已經(jīng)能看到他的影子了。
stylus出現(xiàn)的最晚，普及率不如前邊兩個高，但也是挺好用的，他的特點是能夠高效動態(tài)使用表達式的方式生成css共瀏覽器使用

這就是node出現(xiàn)之后衍生出來的一系列產(chǎn)品，還有很多，他們不一定是前段開發(fā)所必須用到的，但卻能使前段開發(fā)更加的系統(tǒng)便捷

h5

前段時間，有一個名詞特別的火，叫h5,作為一個前端，覺的h5的不就是是html的第五代標(biāo)準(zhǔn)，html5簡稱么，技術(shù)而已，怎么會這么火？然后我百度了一下h5搜索結(jié)果都是ppt上的這種單頁程序，不得不說騰訊確實成功，用自己的產(chǎn)品重新定義了h5的含義。所以說起h5的時候，最好要先判斷一下他的意圖，到底是業(yè)務(wù)所說的這種程序還是技術(shù)上的html5
html5和h5也不是毫無關(guān)系的，畢竟h5的出現(xiàn)要依賴于html5的技術(shù)當(dāng)然html5的出現(xiàn)也是為了適應(yīng)手機端而推出的新的標(biāo)準(zhǔn)。

html有自己的規(guī)范標(biāo)準(zhǔn)，那js有沒有呢？其實也是有的，96年的時候網(wǎng)景公司推出了javascript語言，然后當(dāng)年的就提交國際標(biāo)準(zhǔn)化組織，也就是ECMA，希望這種語言成為國際標(biāo)準(zhǔn)，但是由于java的商標(biāo)歸sun公司所有，然后js商標(biāo)歸網(wǎng)景公司所有，同時為了凸顯國際標(biāo)準(zhǔn)化組織，所以javascript的版本號，我們稱之位ES，ES6是04年提出來的，在ES5也就是我們?nèi)粘Ｓ玫膉s的基礎(chǔ)上增加了不少的新特性，方便了工程化開發(fā)。但是由于在ie低版本上兼容不是很好，所以同html5和css3一樣，主要面向的是手機市場。

而typescript是微軟開發(fā)的一款語言，他是js的超集合，在es6的基礎(chǔ)上添加了靜態(tài)類型和基于類的面向?qū)ο缶幊?。也可以說，他就是未來js的模型。目前三大框架之一的angular2就是在用這種語言，由于他能夠?qū)崿F(xiàn)依賴注入面向?qū)ο箝_發(fā)的屬性，可以使得java程序員幾乎能夠無縫上手，只是他是去年才出來的，主要是面對的是手機市場，而且比較激進，所以ie11之前的版本兼容性都不怎么好。但是在可兼容到安卓4.1

SPA的意義

spa也就是single page application 單頁程序
在我們大部分人的印象中，前段只是mvc的view部分，對不對，瀏覽器發(fā)送請求的時候，服務(wù)端進行mvc處理，利用jsp/php之類，動態(tài)生成html語言，然后在瀏覽器上渲染出來。這樣有個不好的地方就是基本上服務(wù)端把所有的東西都給做完了，1、服務(wù)器的壓力過大，2、前后端分工并不明確，3、每次加載渲染時間相對較長。尤其是手機端，在4g出現(xiàn)以前加載一個頁面是一件十分感人的事情，用戶體驗特別差。angularJs等框架出現(xiàn)后解決了這個問題，他會在首次加載的時候加載大部分依賴的js然后我們就可以在前段實現(xiàn)控制，類似于mca和核心溝通一樣，瀏覽器和服務(wù)端的的溝通也只是報文的處理，這樣服務(wù)端和前段的開發(fā)就不再形成阻塞，約定好接口形式，然后同時開發(fā)，都開發(fā)好都在進行接口調(diào)試，這樣也提升了效率，
這是一個余額查詢的調(diào)用形式，

操作交易其實也類似，我向特定的接口發(fā)送json串，然后后臺返回操作成功與否，我們根據(jù)返回報文的情況做不同的處理或彈出錯誤信息或跳轉(zhuǎn)到對應(yīng)界面，或者是跳轉(zhuǎn)到錯誤界面上。這樣前端就負責(zé)了網(wǎng)站的頁面域用戶的一切交互，而后臺負責(zé)對數(shù)據(jù)進行安全處理，把視圖與視圖的控制交由前端管理，同時當(dāng)我們跳轉(zhuǎn)頁面的時候也不是重新加載一個新的界面，而是加載一個頁面片段，然后將其嵌套進當(dāng)前界面中，這個過程中避免了頁面的重新加載與渲染，js的那些全局變量也不需要重新賦值