前端從入門(mén)到加班

前言


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è)

前端的定義


狹義的前端
  1. 大家所說(shuō)的前端
  2. web前端
  3. html & css & js

狹義的前端就是大家所說(shuō)的前端梁棠,其實(shí)大家所說(shuō)的前端具體應(yīng)該是指web前端置森,就是寫(xiě)html & css & js的人, 而web前端只是前端中的一種符糊,

廣義的前端
  1. 相對(duì)于后端
  2. 與用戶交互
  3. 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)比:

  1. HTML
    HTML可以類(lèi)比于房子的框架啰脚,這個(gè)房子有桌子、窗翁授、燈拣播、柜子等物品(HTML元素)晾咪,寫(xiě)HTML代碼就是把這些東西都買(mǎi)回家收擦,現(xiàn)在家里這些東西都有了,只是雜亂無(wú)序的堆在了一起谍倦。
  2. CSS
    接下來(lái)就是把這些東西擺放整齊了塞赂,而CSS就是干這個(gè)用的。通過(guò)寫(xiě)CSS代碼昼蛀,我們把各個(gè)物品(HTML元素)放到相應(yīng)的位置宴猾,給桌子披上有顏色的桌布,調(diào)整燈管的亮度等等叼旋。
  3. 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)的路要走拂蝎。

資源


且行且珍惜

That's all. Thanks.

Poorbug@SpeedX

2016.03.26 望京.首開(kāi)知語(yǔ)城

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市惶室,隨后出現(xiàn)的幾起案子温自,更是在濱河造成了極大的恐慌玄货,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悼泌,死亡現(xiàn)場(chǎng)離奇詭異松捉,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)馆里,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)惩坑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人也拜,你說(shuō)我怎么就攤上這事以舒。” “怎么了慢哈?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵蔓钟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我卵贱,道長(zhǎng)滥沫,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任键俱,我火速辦了婚禮兰绣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘编振。我一直安慰自己缀辩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布踪央。 她就那樣靜靜地躺著臀玄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪畅蹂。 梳的紋絲不亂的頭發(fā)上健无,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音液斜,去河邊找鬼累贤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛少漆,可吹牛的內(nèi)容都是我干的臼膏。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼检疫,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼讶请!你這毒婦竟也來(lái)了祷嘶?” 一聲冷哼從身側(cè)響起屎媳,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤夺溢,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后烛谊,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體风响,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年丹禀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了状勤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡双泪,死狀恐怖持搜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情焙矛,我是刑警寧澤葫盼,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站村斟,受9級(jí)特大地震影響贫导,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蟆盹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一孩灯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逾滥,春花似錦峰档、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至毅待,卻和暖如春尚卫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背尸红。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工吱涉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人外里。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓怎爵,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親盅蝗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鳖链,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,348評(píng)論 25 707
  • 前些日子從@張?chǎng)涡裎⒉┨幍靡环萃扑](Front-end-tutorial),號(hào)稱(chēng)最全的資源教程-前端涉及的所有知識(shí)...
    谷子多閱讀 4,208評(píng)論 0 44
  • 大部分的后端會(huì)很很鄙視前端。我也不知道為什么芙委,可能大部分人都會(huì)覺(jué)得腳本語(yǔ)言根本不算語(yǔ)言逞敷。 大多人 會(huì)叫我們切圖仔,...
    小黑的眼閱讀 3,346評(píng)論 0 15
  • 所以啊灌侣,別為自己是哪一種性格的人而糾結(jié)了推捐,你要做的,只是努力讓自己成為一個(gè)有用的人侧啼,那時(shí)你看到的世界牛柒,必然是不一樣...
    雨瀟閱讀 198評(píng)論 0 1
  • 生活中有很多口頭約定的事,我們真的履行諾言了嗎痊乾,有多少人會(huì)信守約定皮壁,什么樣的人會(huì)這么做,食言的人會(huì)真的受到懲罰嗎哪审?...
    生命的微笑閱讀 273評(píng)論 0 0