前言
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
- ...