????從一個(gè)后端開發(fā)的角度，剛開始學(xué)習(xí)前端的知識的時(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è)妝的小丑，不知道背后的人長什么樣，只知道各種招式很厲害啊，很有意思??！所以任何事物都要認(rèn)清事物的本質(zhì)，了解緣由。

????前端的開發(fā)，最重要的三樣語言那就是大家都知道的 html、css、js這三門語言了，我自認(rèn)為不僅僅要知道這三種語言的各自的語法，甚至我覺得語法是重要的中間不是那么重要的一個(gè)環(huán)節(jié)，雖然語法會(huì)對我們產(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)系。我們從瀏覽器中看到的所有的頁面，最后都是工程師通過編寫者三種語言來實(shí)現(xiàn)的。這三種語言各司其職，相輔相成。

可以把三者比作一個(gè)人，html好比一個(gè)人的肉體，通過肉體我們可以知道哪里是頭、哪里是手等等；css好比是人穿的衣服、化的妝，有了css可以讓我們變得更漂亮、更吸引人；而JS就像是我們打大腦、靈魂，有了JS我們可以控制我們的身體的各個(gè)部位，我們可以控制自己去化什么妝，穿什么衣服了。

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

HTML：展示

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

CSS：裝飾

光有HTML不行，太枯燥了，沒有什么色彩，這樣的頁面是會(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)的游戲，讓人感嘆群眾的智慧是無限的?。?a target="_blank" rel="nofollow">https://codepen.io/collection/AKkZro/

JS：控制

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

我覺得這是Web前端的最最本質(zhì)的東西，現(xiàn)在我們很多時(shí)候由于項(xiàng)目緊張等等原因，上來就是學(xué)React，直接學(xué)習(xí)框架，然后知道套路之后，確實(shí)可以開始開發(fā)了，但是會(huì)有一大堆的疑惑，任何時(shí)候這三個(gè)基礎(chǔ)的知識都要反復(fù)的看，這就好像，學(xué)習(xí)Java，然后直接開始用Spring框架來寫項(xiàng)目，時(shí)間久了，很多時(shí)候?qū)τ贘ava本身的一些特性卻忘了?？蚣芊奖懔宋覀兊拈_發(fā)管理，但是有時(shí)候會(huì)被各類框架所累。

我覺得還是直接通過MDN官網(wǎng)學(xué)習(xí)最直接有效，對我們后端開發(fā)來說本身已經(jīng)對計(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è)頁面中，由于頁面簡單加之功能有限，這種方式最簡單有效。漸漸地發(fā)現(xiàn)代碼膨脹之后，這種方式就不好管理代碼了，于是進(jìn)入了下一個(gè)時(shí)期。這個(gè)時(shí)期，把CSS、JS從頁面中獨(dú)立了出來，建成單獨(dú)的文件。有隨著代碼膨脹、要開發(fā)的功能越來越復(fù)雜，于是出現(xiàn)了各種各樣的框架，首先是JQuery的出現(xiàn)，可以說是開辟了一個(gè)時(shí)代，突然發(fā)現(xiàn)操作網(wǎng)頁元素是如此之簡單快捷。

????NodeJS時(shí)代的來臨，我覺得前端第二個(gè)大發(fā)展時(shí)期就是由于NodeJS的出現(xiàn)，它的出現(xiàn)引申出各種新事物：模塊化、前端工程化，也使得這種方式得以實(shí)現(xiàn)。模塊化的出現(xiàn)是隨著發(fā)展代碼量加劇、功能越來越復(fù)雜，自然而然能夠想到的一種方式，模塊化帶來了對于依賴的管理，就像是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è)殺手級的框架出現(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)效果。

????未來正在來臨，對于下一步的前端發(fā)展，我覺得應(yīng)該是來到智能化前端的階段。怎么說呢？對于前端我們大多數(shù)時(shí)候，主要直觀的展示，并沒有這種智能化的感知。但是不管你承不承認(rèn)，這個(gè)趨勢不可擋，而且已經(jīng)來臨了。就我現(xiàn)有的知識結(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ì)對不同的策略帶來不同影響。對于用戶來說，希望每次加載所需的部分，最大化體驗(yàn)，又希望當(dāng)操作某個(gè)資源時(shí)，這個(gè)資源又已經(jīng)提前加載好了。

要達(dá)到這種效果普通的方式其實(shí)已經(jīng)沒辦法了，這就需要我們更具用戶行為來智能化的打包編譯，智能化的預(yù)測用戶的點(diǎn)擊操作行為，并且pre-fetch相對應(yīng)的資源，從而是用戶體驗(yàn)最大化。這就需要我們在工程化階段加入人工智能、機(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前端，對歷史、發(fā)展趨勢、小技巧等等的總結(jié)和回顧，讓我明白好的Web產(chǎn)品，從前端實(shí)現(xiàn)而言是一個(gè)個(gè)細(xì)節(jié)堆疊而出。對于未來的初始，智能化在短期內(nèi)應(yīng)該會(huì)繼續(xù)發(fā)酵（從工程化和代碼實(shí)現(xiàn)），而我們即使做不到超越，也要緊跟時(shí)代的步伐，永遠(yuǎn)保持虛懷若谷的學(xué)習(xí)狀態(tài)。