前言
2916年5月26日星期四薪贫，我給公司同事做了一個(gè)前端入門(mén)分享報(bào)告，以下為會(huì)后整理總結(jié)內(nèi)容刻恭。
PPT地址
本文不涉及技術(shù)相關(guān)的知識(shí)瞧省，單純介紹前端的一些相關(guān)知識(shí)扯夭。
Reveal.js ——程序猿的PPT
首先向大家推薦 Reveal.js 這個(gè)前端庫(kù)，寫(xiě)代碼做PPT鞍匾，簡(jiǎn)單易用交洗，不會(huì)寫(xiě)代碼的人可以做PPT，會(huì)寫(xiě)代碼的人可以自己擴(kuò)展使用橡淑。目前在 Git 上也是比較熱門(mén)的一個(gè)前端項(xiàng)目之一构拳。上面的PPT就是使用Reveal做的。好處有以下幾點(diǎn)：
- 兼容性強(qiáng) （各種平臺(tái)包括移動(dòng)端也適用
- 簡(jiǎn)單易用 （非技術(shù)人員也能用
- 可配置 （主題 & 動(dòng)畫(huà) & 動(dòng)作...
- 直接上傳到服務(wù)器
- ...
目錄
- 前端的定義
- html & css & javascript
- 傳統(tǒng)前端
- 現(xiàn)代前端
- 未來(lái)前端
- 外傳1: 市場(chǎng)
- 外傳2: 行業(yè)
前端的定義
狹義的前端
- 大家所說(shuō)的前端
- web前端
- html & css & js
狹義的前端就是大家所說(shuō)的前端梁棠，其實(shí)大家所說(shuō)的前端具體應(yīng)該是指web前端置森，就是寫(xiě)html & css & js的人， 而web前端只是前端中的一種符糊，
廣義的前端
- 相對(duì)于后端
- 與用戶交互
- iOS & Android & 桌面端 & Web前端 & ...
廣義的前端是相對(duì)于后端而言的凫海，與用戶有交互的部分應(yīng)該都被稱(chēng)為前端，包括iOS與安卓都算前端開(kāi)發(fā)男娄。
前端三劍客
前端三劍客就是HTML行贪、CSS、JS模闲， 嚴(yán)格來(lái)說(shuō)HTML與CSS并不算編程語(yǔ)言建瘫，因?yàn)樗鼈儾痪邆溥\(yùn)算與邏輯。如果把網(wǎng)站類(lèi)比與一個(gè)房子的話尸折，前端三劍客（也有叫前端三駕馬車(chē)）可以有以下類(lèi)比：
- HTML
HTML可以類(lèi)比于房子的框架啰脚，這個(gè)房子有桌子、窗翁授、燈拣播、柜子等物品（HTML元素）晾咪，寫(xiě)HTML代碼就是把這些東西都買(mǎi)回家收擦，現(xiàn)在家里這些東西都有了，只是雜亂無(wú)序的堆在了一起谍倦。 - CSS
接下來(lái)就是把這些東西擺放整齊了塞赂，而CSS就是干這個(gè)用的。通過(guò)寫(xiě)CSS代碼昼蛀，我們把各個(gè)物品（HTML元素）放到相應(yīng)的位置宴猾，給桌子披上有顏色的桌布，調(diào)整燈管的亮度等等叼旋。 - JS
房子整好了仇哆，就該人入住了，JS就相當(dāng)于人的角色夫植。在人入住房子后讹剔，這個(gè)房子才有起到該有的作用——讓人住油讯，然后房子里面發(fā)生了各種故事。網(wǎng)頁(yè)有了JS只有延欠，網(wǎng)頁(yè)就活了陌兑，JS為網(wǎng)頁(yè)提供運(yùn)算與邏輯，為頁(yè)面提供各種可能發(fā)生的故事由捎。
傳統(tǒng)前端
我認(rèn)為傳統(tǒng)前端開(kāi)發(fā)指的是前端早期階段兔综，其實(shí)這個(gè)早期指的是并不是很久的以前，可能也就是三五年前狞玛。這個(gè)階段的前端開(kāi)發(fā)有以下幾個(gè)特點(diǎn)：
- 設(shè)計(jì)師的工具
- 前端很low
- 非常依賴jQuery
- 沒(méi)有工程思想
前端開(kāi)發(fā)因?yàn)槿腴T(mén)容易软驰，因此甚至很多非開(kāi)發(fā)人員也從前端切入互聯(lián)網(wǎng)圈（各種培訓(xùn)班），這些人中的大部分人直到今天也仍然停留在傳統(tǒng)開(kāi)發(fā)模式为居，導(dǎo)致現(xiàn)在前端界人力過(guò)剩（同時(shí)人才緊張）的局面碌宴。
AJAX
Asynchronous Javascript And XML
我認(rèn)為AJAX算是現(xiàn)代前端的萌芽，是前端開(kāi)發(fā)的一個(gè)里程碑蒙畴，有承上啟下的作用贰镣。
現(xiàn)代前端
現(xiàn)代前端開(kāi)發(fā)也就是這兩年的事，大概是從14年開(kāi)始吧膳凝，前端圈開(kāi)始呈現(xiàn)井噴的發(fā)展局勢(shì)碑隆。原因之一是因?yàn)榛ヂ?lián)網(wǎng)的大量覆蓋與帶寬提升。
- html5 & css3
雖然早在html5和css3標(biāo)準(zhǔn)制定（2015年）之前蹬音，前端已經(jīng)開(kāi)始飛起來(lái)了上煤，但是這個(gè)事件讓前端在名義上真正上天了。html5和css3的出現(xiàn)著淆，讓網(wǎng)頁(yè)有了更強(qiáng)大的展示與交互能力劫狠，最大的沖擊莫過(guò)于Flash直接崩盤(pán)。 - Angular & React & Vue & Bootstrap & ...
各個(gè)層面永部，各種體量独泞，各有長(zhǎng)處的框架接踵而來(lái)，你還沒(méi)唱完我就把你趕下臺(tái)苔埋，去年我還在學(xué)習(xí)Angular懦砂，今年大家都在玩React了；最近幾天Vue又盤(pán)踞在Git前列了组橄。 - Grunt & Gulp & Webpack & ...
圍繞著前端開(kāi)發(fā)的各種工具也在快速的迭代著荞膘，Gulp凳子還沒(méi)坐熱，Webpack就來(lái)?yè)屖袌?chǎng)了玉工。 - Sass & Less & ...
前端三劍客齊頭并進(jìn)羽资，可編程的CSS——Sass與Less也應(yīng)運(yùn)而生。
在各個(gè)端遵班，各個(gè)領(lǐng)域屠升，前端也在慢慢地滲入與腐蝕其他開(kāi)發(fā)語(yǔ)言的領(lǐng)地瞄勾，并且在程序猿社區(qū)引起了熱烈的討論。
- 桌面端： Electron
- 移動(dòng)端： Ionic & React Native & ...
- 服務(wù)端： Node
- 模塊化：CommonJS & SeaJS & Webpack & ...
- 增強(qiáng)版：Dart & Typescript & ...
- 編輯器：Webstorm & sublime & atom & ...
- 排版領(lǐng)域： Markdown
優(yōu)勢(shì)
- 不用build, 不用編譯
- 無(wú)需環(huán)境弥激，不用配置
- write once, run anywhere
- 異步就是快
- 想上就上（不用發(fā)版
劣勢(shì)
- 需兼容webview（從IE坑跳到微信坑
- 松散型
所有變量都是var & 先使用后聲明... - 更新迭代太快（對(duì)前端而言是好事进陡，對(duì)開(kāi)發(fā)人員而言就不是了
+客觀局限性
包括硬件性能與帶寬。復(fù)雜的交互下網(wǎng)頁(yè)會(huì)出現(xiàn)卡頓現(xiàn)象微服；而頁(yè)面如果體積太大（高清圖片等元素）趾疚，打開(kāi)則需要很長(zhǎng)時(shí)間并且需要耗費(fèi)很多流量。
兩個(gè)有意思的js項(xiàng)目
GBA.js
OS.js
Git上還有數(shù)不清的各種有意思的前端項(xiàng)目以蕴。
未來(lái)前端
一切皆在云端
- 云計(jì)算
網(wǎng)絡(luò)存儲(chǔ)的價(jià)格下載糙麦，網(wǎng)絡(luò)接入成本下降，網(wǎng)絡(luò)費(fèi)用價(jià)格降低丛肮，于是服務(wù)器廠商也愿意推動(dòng)云計(jì)算赡磅，網(wǎng)絡(luò)提供商也愿意提供云計(jì)算服務(wù)，用戶也愿意把數(shù)據(jù)存在云端宝与，于是皆大歡喜焚廊，甚至思科也整出了霧計(jì)算。此時(shí)前端作為入口习劫，在短期內(nèi)還是會(huì)繼續(xù)翻滾咆瘟。 - Chromebook
Chromebook可謂是前端圈的好伙伴，雖然在國(guó)內(nèi)根本見(jiàn)不到影子诽里，但是憑借著低價(jià)與好用兩大武器袒餐，在教育市場(chǎng)上也是占據(jù)一把交椅，今天早上(2016.5.26)的新聞顯示Chromebook的銷(xiāo)量已經(jīng)超過(guò)了Mac(Unbelievable?)谤狡。 - 阿里
阿里的前端團(tuán)隊(duì)在國(guó)內(nèi)是首屈一指的灸眼，甚至國(guó)際上。國(guó)內(nèi)大量前端人才往那邊流去的同時(shí)阿里也在大力推動(dòng)著前端界的發(fā)展墓懂。
市場(chǎng)情況
- 學(xué)校不教
- 學(xué)生嫌棄
- 前端很多
- 人才很少
- 還有一群被需求給嚇跑的
- but ...
- 需求巨大 & 待遇優(yōu)厚
很多并沒(méi)有開(kāi)設(shè)前端相關(guān)的課程（反正各種培訓(xùn)機(jī)構(gòu)教網(wǎng)頁(yè)制作）焰宣，學(xué)生對(duì)前端的認(rèn)識(shí)也不夠多，大部分圈外人士對(duì)前端的看法還停留在傳統(tǒng)前端的階段拒贱，因此導(dǎo)致前端圈出現(xiàn)斷層的現(xiàn)象宛徊，大部分人都是從那個(gè)其它開(kāi)發(fā)崗位佛嬉，甚至是非開(kāi)發(fā)崗位轉(zhuǎn)過(guò)來(lái)的逻澳，目前市場(chǎng)的人才數(shù)量并不能滿足需求。
行業(yè)
- 浪潮之巔
我們很幸運(yùn)地進(jìn)入這個(gè)行業(yè)暖呕，成為時(shí)代的寵兒斜做，雖然加班很多很累，但是至少衣食無(wú)憂湾揽，過(guò)得比其它行業(yè)好瓤逼。但是按照發(fā)展規(guī)律笼吟，到頂峰就該開(kāi)始下滑了，這從去年（2015）下半年至今資本遇冷霸旗，泡沫搜索頁(yè)可以看出來(lái)贷帮，行業(yè)逐漸趨于穩(wěn)定（雖然現(xiàn)在還是很浮夸）。 - 生物自行車(chē)
如果互聯(lián)網(wǎng)走下神壇（可能會(huì)是很久以后的事吧）诱告，那么總有人來(lái)接盤(pán)撵枢，不然資本往哪去。AphalGo出現(xiàn)后機(jī)器人有了大腦了精居，因此接下來(lái)它們?cè)撚猩眢w了锄禽，生物工程該登場(chǎng)了⊙プ耍或許在二三十年后沃但，我們的兒子女兒們?cè)谠斓耐嬉鈨壕褪且惠v會(huì)呼吸，會(huì)思考的生物自行車(chē)佛吓。
免費(fèi)總送
- jQuery 10+
jQuery 應(yīng)該是大多數(shù)人的前端啟蒙宵晚，剛過(guò)完十周年生日，緊接這就發(fā)布了3.0版本∥停現(xiàn)在jQuery并不是Geek們討論的對(duì)象坝疼，但是它仍然占據(jù)著互聯(lián)網(wǎng)的半壁江山，畢竟連Angular這種顛覆性的東西都內(nèi)置了jQuery Lite谆沃。 目測(cè)jQuery再戰(zhàn)10年毫無(wú)壓力钝凶。 - 程序猿從娃娃抓起
如果誰(shuí)家孩子想學(xué)編程，我第一個(gè)推薦的就是從前端入手唁影。上手容易耕陷，無(wú)需環(huán)境，不用配置据沈。 - Anywhere OS
Anywhere OS是一個(gè)云端操作系統(tǒng)哟沫，我從大二就開(kāi)始幻想這個(gè)東西。Anywhere表示可以完美兼容各種硬件設(shè)備锌介，手機(jī)嗜诀、電腦、手表甚至電視等設(shè)備孔祸，用戶在不同場(chǎng)景隆敢，不同設(shè)備使用同一個(gè)系統(tǒng)，所有數(shù)據(jù)與運(yùn)算全部都在云端崔慧，從此告別把文件從電腦通過(guò)微信傳到手機(jī)的生活...當(dāng)然這個(gè)東西很有很長(zhǎng)的路要走拂蝎。
資源
- Markdown入門(mén)
- w3c: 前端基礎(chǔ)大全
- 開(kāi)發(fā)語(yǔ)言教程（多種語(yǔ)言）
- 玩游戲?qū)W編程
- 游戲: light-bot
- 編輯器: sublime
- 阮一峰博客: 簡(jiǎn)單易懂的前端資料
- 熱門(mén)前端項(xiàng)目top100
- ...
