????從一個(gè)后端開發(fā)的角度怜奖，剛開始學(xué)習(xí)前端的知識(shí)的時(shí)候妖胀，最大的麻煩是各種知識(shí)點(diǎn)非常的零散，框架一個(gè)跟著一個(gè)档礁，各種工具會(huì)讓人搞得暈頭轉(zhuǎn)向角钩。雖然現(xiàn)在的Web應(yīng)用想服務(wù)端的編程的工程方式做了很多的學(xué)習(xí)效仿，在各種方式上你都能看到服務(wù)端的各種編程思想和工程思想，不過畢竟還是有區(qū)別递礼，甚至有時(shí)候這種前端開發(fā)的進(jìn)化反而不斷稱為后端同學(xué)學(xué)習(xí)前端的一種障礙惨险。這就好比一個(gè)人化個(gè)妝的小丑，不知道背后的人長(zhǎng)什么樣脊髓，只知道各種招式很厲害啊辫愉，很有意思啊将硝！所以任何事物都要認(rèn)清事物的本質(zhì)恭朗，了解緣由。

????前端的開發(fā)依疼，最重要的三樣語言那就是大家都知道的 html痰腮、css、js這三門語言了律罢，我自認(rèn)為不僅僅要知道這三種語言的各自的語法膀值，甚至我覺得語法是重要的中間不是那么重要的一個(gè)環(huán)節(jié)，雖然語法會(huì)對(duì)我們產(chǎn)生障礙误辑，但是往往我們不知道他們來來源沧踏，不知道到底是干什么的，不知道為什么一個(gè)個(gè)框架出現(xiàn)的原因巾钉，解決什么問題悦冀。不了解這些，反而給我?guī)砹烁蟮恼J(rèn)知障礙睛琳。

????剛開始學(xué)習(xí)Web前端技術(shù)的時(shí)候盒蟆，是通過某一個(gè)框架，比如angular框架师骗，然后跟著教程去通過框架的實(shí)現(xiàn)方式來一步步的去做历等，然后發(fā)現(xiàn)各種效果如此的神奇，當(dāng)我們懂了一個(gè)框架之后辟癌，往往忽略了框架之下的一些東西寒屯，而這些東西會(huì)讓后端的開發(fā)十分的費(fèi)解。

關(guān)系

首先要了解html黍少、css寡夹、js之間的關(guān)系。我們從瀏覽器中看到的所有的頁(yè)面厂置，最后都是工程師通過編寫者三種語言來實(shí)現(xiàn)的菩掏。這三種語言各司其職，相輔相成昵济。

可以把三者比作一個(gè)人智绸，html好比一個(gè)人的肉體野揪，通過肉體我們可以知道哪里是頭、哪里是手等等瞧栗；css好比是人穿的衣服斯稳、化的妝，有了css可以讓我們變得更漂亮迹恐、更吸引人挣惰；而JS就像是我們打大腦、靈魂殴边，有了JS我們可以控制我們的身體的各個(gè)部位憎茂，我們可以控制自己去化什么妝，穿什么衣服了找都。

所以就帶來了三者的定位：

HTML：展示

在HTML語言中唇辨，我們定義了許許多多的Tag廊酣，這些Tag就是代表某一種展示元素能耻，比如一個(gè)按鈕、一個(gè)圖片亡驰、一個(gè)鏈接等晓猛，通過各種組合來構(gòu)建整個(gè)頁(yè)面，每一個(gè)元素都有各自的屬性凡辱，屬性用來定義元素的展示行為戒职。

CSS：裝飾

光有HTML不行，太枯燥了透乾，沒有什么色彩洪燥，這樣的頁(yè)面是會(huì)讓人抓狂的。于是有人就發(fā)明了CSS這么一個(gè)東西乳乌，把CSS放在HTML的元素上捧韵，來給予元素各種各樣的樣式 -- 展現(xiàn)形式。 CSS本質(zhì)上是一套預(yù)先定義的規(guī)則汉操，通過組合一條條的不同規(guī)則再来，從而實(shí)現(xiàn)強(qiáng)大的視覺效果。能否把CSS看做是一種編程語言呢磷瘤？嚴(yán)格意義上可能并不算芒篷，不過隨著CSS的強(qiáng)大，純粹使用CSS也能實(shí)現(xiàn)令人匪夷所思的應(yīng)用采缚。下面鏈接就是展示了純粹用CSS實(shí)現(xiàn)的游戲针炉，讓人感嘆群眾的智慧是無限的啊：https://codepen.io/collection/AKkZro/

JS：控制

有了展示扳抽，有了好看的展示糊识，還是覺得不行绩社，雖然有很多的網(wǎng)站只是展示一個(gè)好看的頁(yè)面，確實(shí)即使只使用HTML赂苗、CSS了愉耙，也能達(dá)到非常驚人的效果。但是拌滋，如果想要實(shí)現(xiàn)復(fù)雜的交互效果朴沿，比如做一個(gè)即使戰(zhàn)略游戲、做一個(gè)電商網(wǎng)站败砂、做一個(gè)社交網(wǎng)站赌渣，對(duì)于這種具有極其復(fù)雜的交互功能，那么就需要使用JS這種真正的編程語言了昌犹。早期的JS只是被設(shè)計(jì)來做做簡(jiǎn)單的提交提交表單之類坚芜，但是現(xiàn)在JS早已發(fā)展成為極其復(fù)雜的生態(tài)了。

我覺得這是Web前端的最最本質(zhì)的東西斜姥，現(xiàn)在我們很多時(shí)候由于項(xiàng)目緊張等等原因鸿竖，上來就是學(xué)React，直接學(xué)習(xí)框架铸敏，然后知道套路之后缚忧，確實(shí)可以開始開發(fā)了，但是會(huì)有一大堆的疑惑杈笔，任何時(shí)候這三個(gè)基礎(chǔ)的知識(shí)都要反復(fù)的看闪水，這就好像，學(xué)習(xí)Java蒙具，然后直接開始用Spring框架來寫項(xiàng)目球榆，時(shí)間久了，很多時(shí)候?qū)τ贘ava本身的一些特性卻忘了禁筏〕侄ぃ框架方便了我們的開發(fā)管理，但是有時(shí)候會(huì)被各類框架所累融师。

我覺得還是直接通過MDN官網(wǎng)學(xué)習(xí)最直接有效右钾，對(duì)我們后端開發(fā)來說本身已經(jīng)對(duì)計(jì)算機(jī)各種數(shù)據(jù)結(jié)構(gòu)算法有了了解，那么這種方式會(huì)是最有效的旱爆，不從框架開始舀射，而是從基礎(chǔ)開始：https://developer.mozilla.org/en-US/

開發(fā)歷史

????前端的開發(fā)歷史發(fā)展真的是應(yīng)驗(yàn)了“分久必合合久必分”這句老話了。

????早期的開發(fā)怀伦，CSS樣式直接寫在Html元素的style屬性里面脆烟，然后js直接寫在同一個(gè)頁(yè)面中，由于頁(yè)面簡(jiǎn)單加之功能有限房待，這種方式最簡(jiǎn)單有效邢羔。漸漸地發(fā)現(xiàn)代碼膨脹之后驼抹，這種方式就不好管理代碼了，于是進(jìn)入了下一個(gè)時(shí)期拜鹤。這個(gè)時(shí)期框冀，把CSS、JS從頁(yè)面中獨(dú)立了出來敏簿，建成單獨(dú)的文件明也。有隨著代碼膨脹、要開發(fā)的功能越來越復(fù)雜惯裕，于是出現(xiàn)了各種各樣的框架温数，首先是JQuery的出現(xiàn)，可以說是開辟了一個(gè)時(shí)代蜻势，突然發(fā)現(xiàn)操作網(wǎng)頁(yè)元素是如此之簡(jiǎn)單快捷撑刺。

????NodeJS時(shí)代的來臨，我覺得前端第二個(gè)大發(fā)展時(shí)期就是由于NodeJS的出現(xiàn)握玛，它的出現(xiàn)引申出各種新事物：模塊化够傍、前端工程化，也使得這種方式得以實(shí)現(xiàn)败许。模塊化的出現(xiàn)是隨著發(fā)展代碼量加劇王带、功能越來越復(fù)雜淑蔚，自然而然能夠想到的一種方式市殷，模塊化帶來了對(duì)于依賴的管理，就像是Java管理Jar包一樣刹衫。緊接著前端工程化開始盛行醋寝，工程化的出現(xiàn)主要由于幾個(gè)原因：

????1.JS規(guī)劃發(fā)展過快，許多瀏覽器不支持最新的語法带迟，但是我們想要用最新的語法來開發(fā)音羞，于是我們就需要去做編譯。

????2.依賴管理的出現(xiàn)仓犬，模塊化的產(chǎn)物嗅绰，前端可引入不同的依賴，那么如何打包不同的依賴搀继，如何管理窘面，這也是工程化的要點(diǎn)。? ? ? ?

????3.自動(dòng)化的需求叽躯，隨著代碼的復(fù)雜度提升财边、重復(fù)勞動(dòng)的浪費(fèi)、效率提升要求等等点骑，前端也需要一些自動(dòng)化的工具來幫助開發(fā)人員提效酣难，比如自動(dòng)代碼生成等等

????我們使用Webpack來編譯打包工程谍夭，我們使用NPM、YARN來管理我們的依賴憨募，我們使用各種NodeJS腳本來實(shí)現(xiàn)各種自動(dòng)化代碼紧索。

????離線化和組件化思維的來臨，由分到合菜谣。我覺得離線化和組件化思維的深入前端人心齐板，是第三個(gè)大發(fā)展時(shí)期。在這個(gè)時(shí)期幾個(gè)殺手級(jí)的框架出現(xiàn)葛菇，改變了我們開發(fā)前端的方式甘磨，React帶來了真正的組件化思維，Html眯停、JS济舆、CSS也已一種組件的方式獨(dú)立的柔和在一起，Vue做為后起之秀莺债，其學(xué)習(xí)成本低滋觉，快速開發(fā)，也是得到了大量的使用齐邦。早起的各種框架也在這些框架之下邊的黯然失色椎侠。在這個(gè)時(shí)期，還是有一個(gè)就是離線化的思維措拇，Google提出了PWA（漸進(jìn)式Web應(yīng)用）我纪，利用Service Worker，Web Cache丐吓，Manifest等技術(shù)使得我們的網(wǎng)站可以像一個(gè)桌面浅悉，手機(jī)app一樣被安裝，在本地保留券犁，得到如同native應(yīng)用的體驗(yàn)效果术健。

????未來正在來臨，對(duì)于下一步的前端發(fā)展粘衬，我覺得應(yīng)該是來到智能化前端的階段荞估。怎么說呢？對(duì)于前端我們大多數(shù)時(shí)候稚新，主要直觀的展示勘伺，并沒有這種智能化的感知。但是不管你承不承認(rèn)枷莉，這個(gè)趨勢(shì)不可擋娇昙，而且已經(jīng)來臨了。就我現(xiàn)有的知識(shí)結(jié)構(gòu)以及了解的笤妙，主要是兩個(gè)方面的智能化：

工程智能化 - 數(shù)據(jù)驅(qū)動(dòng)用戶體驗(yàn)

????我們現(xiàn)有的前端工程的打包冒掌、編譯噪裕，最后采用異步加載還是同步加載，或者各種加載資源的方式股毫，說白了是按照一定的規(guī)則來獲取膳音。要么我們認(rèn)為的提前預(yù)判來提前把資源加載完，要么用到什么資源的時(shí)候再去加載铃诬。不管是哪一種方式其實(shí)都不是最優(yōu)的方式祭陷，不同的人不同的網(wǎng)絡(luò)環(huán)境等等都會(huì)對(duì)不同的策略帶來不同影響。對(duì)于用戶來說趣席，希望每次加載所需的部分兵志，最大化體驗(yàn)，又希望當(dāng)操作某個(gè)資源時(shí)宣肚，這個(gè)資源又已經(jīng)提前加載好了想罕。

要達(dá)到這種效果普通的方式其實(shí)已經(jīng)沒辦法了，這就需要我們更具用戶行為來智能化的打包編譯霉涨，智能化的預(yù)測(cè)用戶的點(diǎn)擊操作行為按价，并且pre-fetch相對(duì)應(yīng)的資源，從而是用戶體驗(yàn)最大化笙瑟。這就需要我們?cè)诠こ袒A段加入人工智能楼镐、機(jī)器學(xué)習(xí)的方式來實(shí)現(xiàn)。

這一切正在發(fā)生：https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/

Web應(yīng)用智能化

隨著機(jī)器學(xué)習(xí)的大踏步應(yīng)用往枷，越來越多的需求框产，需要能夠在端上高效的執(zhí)行模型。https://js.tensorflow.org/

未來的未來师溅，只有變化是不變的茅信，新的框架一定還會(huì)出現(xiàn)盾舌，新的技術(shù)也會(huì)不斷的出現(xiàn)墓臭，不斷學(xué)習(xí)吧~

? ? ? 重新思索Web前端，對(duì)歷史妖谴、發(fā)展趨勢(shì)窿锉、小技巧等等的總結(jié)和回顧，讓我明白好的Web產(chǎn)品膝舅，從前端實(shí)現(xiàn)而言是一個(gè)個(gè)細(xì)節(jié)堆疊而出嗡载。對(duì)于未來的初始，智能化在短期內(nèi)應(yīng)該會(huì)繼續(xù)發(fā)酵（從工程化和代碼實(shí)現(xiàn)）仍稀，而我們即使做不到超越洼滚，也要緊跟時(shí)代的步伐，永遠(yuǎn)保持虛懷若谷的學(xué)習(xí)狀態(tài)技潘。