什么是前端開發(fā)脚牍？
前端開發(fā)（Web前端開發(fā)工程師）是由之前的網(wǎng)頁設(shè)計(jì)（美工）衍生而來溜嗜，是互聯(lián)網(wǎng)產(chǎn)品生產(chǎn)過程中必不可少的角色。近些年得到飛速發(fā)展架谎，入坑的越來越多炸宵。
Web 1.0時(shí)代的信息對(duì)人的單向展示（好比你看新聞聯(lián)播，你想吐槽谷扣，沒地去土全，你有想法捎琐，卻很孤獨(dú)，只能被動(dòng)接受信息）裹匙，發(fā)展到2.0時(shí)代的以人為中心的關(guān)系聯(lián)網(wǎng)（你居然可以對(duì)其文章發(fā)表看法瑞凑，甚至自己可以在平臺(tái)發(fā)表新聞?dòng)^點(diǎn)了，居然你還可以和你觀點(diǎn)相同的人成為基友概页，還可以組織活動(dòng)籽御，各種可能，讓你覺得網(wǎng)絡(luò)更加有趣惰匙，你不孤單了技掏，但有時(shí)還是覺得不被理解），然后3.0物聯(lián)網(wǎng)來了（你居然可以通過手表上網(wǎng)了项鬼，通過手環(huán)支付了哑梳，通過指紋解鎖了，你發(fā)現(xiàn)新聞都變得更懂你了绘盟，盡挑你喜歡的給你推送鸠真，你和其他小伙伴互動(dòng)方式更多了，你不但不孤獨(dú)了龄毡，也被理解了吠卷。）而這些變化大部分基于環(huán)境和技術(shù)及硬件的更新，1.0你只需要拖拖表格稚虎，發(fā)發(fā)文章了事撤嫩。盡量讓他好看點(diǎn)，那個(gè)時(shí)代可能沒有網(wǎng)頁設(shè)計(jì)一說蠢终，都是個(gè)人站長的天下序攘。2.0初期，不僅要求展示信息那么簡單了寻拂，需要讓他更美程奠，就需要網(wǎng)頁設(shè)計(jì)，需要靈活的css+div祭钉，這個(gè)職業(yè)開始興起瞄沙，后來需要滿足人們不斷的需求，評(píng)論要有慌核，過渡動(dòng)畫要有逼格距境，要人性化，人機(jī)如何交互垮卓，打開速度能否更快垫桂，網(wǎng)頁能否更簡單，單純網(wǎng)頁設(shè)計(jì)切割圖不能滿足了粟按，前端登場(chǎng)诬滩。并一發(fā)不可收拾霹粥，原來網(wǎng)頁可以這么酷炫，可以如此流暢疼鸟，如此懂用戶后控，互動(dòng)讓人覺得不是在和機(jī)器打交道了。而3.0更是推進(jìn)了這一步空镜，以前的網(wǎng)頁設(shè)計(jì)慢慢轉(zhuǎn)為UI浩淘，有的進(jìn)階為前端，并開始有了UE姑裂、PM等等名詞馋袜。但前端似乎好像存在了很久。因?yàn)榫W(wǎng)絡(luò)上看到的任何頁面舶斧、交互欣鳖、特效等都是出自前端工程師之手。
簡單講：
- 2005年以前茴厉，美工泽台，flash, 三劍客
- 2005-2010, ie67, ajax, jquery, mvc, 前端
- 2010-現(xiàn)在, html5, 移動(dòng)端, 工程化, nodejs, es6, mvvm
從發(fā)展了歷程也可以看到，前端的學(xué)習(xí)路徑是一個(gè)先易后難的過程矾缓，主要包括三個(gè)要素：HTML（人體骨架）怀酷、CSS（皮膚衣服）和JavaScript（動(dòng)作交互）。而現(xiàn)在嗜闻，如果你不懂js蜕依，你是不能稱之為前端的，會(huì)被嘲笑為切圖仔琉雳。而js之強(qiáng)大样眠，遠(yuǎn)非hello world那么簡單，所以翠肘，作為前端你可能不僅僅是需要掌握基本的Web前端開發(fā)技術(shù)那么簡單了檐束，網(wǎng)站性能優(yōu)化、SEO優(yōu)化和服務(wù)器端的基礎(chǔ)知識(shí)束倍，各種工具被丧，各種框架，各種理論都要了解绪妹。代碼的可維護(hù)性甥桂、組件的易用性、分層語義模板和瀏覽器分級(jí)支持等等也會(huì)成為思考日常邮旷。
前端有前/錢景嗎格嘁？
現(xiàn)在有不需前端的互聯(lián)網(wǎng)產(chǎn)品嗎？
現(xiàn)在有互聯(lián)網(wǎng)公司不缺前端的嗎廊移？
現(xiàn)在還有人能不受互聯(lián)網(wǎng)影響嗎糕簿？
互聯(lián)網(wǎng)會(huì)死嗎？
都不會(huì)狡孔！
前景是肯定的懂诗！
那么，前景就等于錢景嗎苗膝？
不見得殃恒！
不只是前端，任何公司任何崗位都缺人辱揭，缺真正有能力的人离唐，有能力才等于有錢景，前端同樣如此问窃！
互聯(lián)網(wǎng)跑的太快了亥鬓，根本沒時(shí)間停下來等你，大公司動(dòng)輒上萬人的招聘域庇，每年動(dòng)輒幾百互聯(lián)網(wǎng)的創(chuàng)業(yè)公司誕生嵌戈，都需要人，需要產(chǎn)品就肯定需要前端听皿。前端不是大學(xué)里學(xué)的熟呛，大學(xué)沒這課，前端大都野生尉姨，沒有固定輸出所以缺人庵朝，行業(yè)薪資高，又吸引了大批人進(jìn)來又厉，各行各業(yè)九府，科班非科班的，導(dǎo)致水平參差不齊馋没，水分極大昔逗，有的只是略懂簡單頁面制作，便也開始工作篷朵，而技術(shù)發(fā)展的要求已經(jīng)讓很多水平一般的從業(yè)者滿足不了企業(yè)產(chǎn)品需求了勾怒。
所以，不但缺人声旺，而且緊缺笔链！
只要你是個(gè)有能力的前端，你就有錢景腮猖！
前端好學(xué)嗎鉴扫？
什么是好學(xué)的？
沒有澈缺！
前端的學(xué)習(xí)曲線（js）是這樣的：
但如果你之前接觸過其他語言可能會(huì)更好理解一些坪创。
或者你對(duì)代碼很有興趣是真愛炕婶，坐下來寫碼會(huì)讓你享受或忘我，屁股離不開凳子莱预。這樣的熱愛加上自己的毅力同樣不難柠掂。
如果你有個(gè)帶你學(xué)習(xí)的人，恭喜你依沮，你很幸福涯贞。沒有人帶請(qǐng)考慮培訓(xùn)機(jī)構(gòu)，找個(gè)靠譜的老師帶也是一樣（推薦饑人谷）危喉，這樣成長是最快的宋渔，我一直贊成自學(xué)，但前端的知識(shí)點(diǎn)實(shí)在是太多了辜限，若學(xué)習(xí)中后期沒有人帶是難痛苦和難以持續(xù)的皇拣。
前端好就業(yè)嗎？
請(qǐng)自行移步拉鉤網(wǎng)列粪，智聯(lián)去看看审磁，缺前端的有多少，薪資待遇多少岂座？看看高待遇都是什么高要求态蒂。不能剛?cè)腴T就想高回報(bào)，怎么可能费什！很多人不是從入門到精通钾恢，而是從入門到放棄，從入門到轉(zhuǎn)行鸳址！
我適合前端嗎瘩蚪？
幾種情況吧：
- 之前有編程經(jīng)驗(yàn)，轉(zhuǎn)崗的稿黍。
- 無編程經(jīng)驗(yàn)卻喜愛code的疹瘦。
- 學(xué)生黨，有大把時(shí)間（羨慕臉）巡球，愿意入坑的言沐。
- 其他行業(yè)無指望逆襲，渴望通過前端迎娶白富美酣栈，走上人生巔峰的险胰。
-
雖然笨點(diǎn)，但我勤奮啊矿筝。（很多人的努力程度都輪不到平天賦）
前端的工作內(nèi)容起便？
主要工作就是造產(chǎn)品，（輪子算么？）產(chǎn)品包括多種形態(tài)榆综，網(wǎng)站妙痹、app、單頁面奖年、chrome细诸、gmail、你所能在網(wǎng)絡(luò)上看到的大部分都能稱之為產(chǎn)品陋守。它已經(jīng)脫離的之前依托于瀏覽器的狹窄概念。
那么問題來了利赋，一個(gè)互聯(lián)網(wǎng)產(chǎn)品是如何產(chǎn)生的呢水评？光前端能造出產(chǎn)品嗎？
肯定不行了媚送，不是誰都是全棧中燥。它需要產(chǎn)品經(jīng)理去想產(chǎn)品形態(tài)，去提需求塘偎，去協(xié)調(diào)開發(fā)疗涉、設(shè)計(jì)、老板吟秩。就好比是一部電影的導(dǎo)演咱扣，電影不用自己演，但需要想清楚怎么去演涵防，要有哪些劇情和功能闹伪，比如我需要一些床戲（不是瞎想，是需要用戶調(diào)研壮池，調(diào)研結(jié)果顯示床戲確實(shí)吸引眼球偏瓤，要有），尺度怎樣椰憋！然后交給交互和視覺確定交互稿和設(shè)計(jì)稿（穿什么衣服更性感厅克，怎么互動(dòng)更撩人），然后交由前后端工程師做前端后端聯(lián)調(diào)（就是由想法和劇本變?yōu)檎鎸?shí)的能上線的電影橙依，我能理解成男主女主和后期么证舟？），然后交給測(cè)試去測(cè)試下票编，看下哪些鏡頭有穿幫褪储，哪些臺(tái)詞有錯(cuò)誤，哪些劇情有bug等等慧域，最后上線鲤竹，交由運(yùn)營推廣，拍電影不難，難的事要有票房辛藻，這就需要推廣碘橘，去推廣電影（找水軍刷豆瓣、策劃活動(dòng)搞搞緋聞增加曝光吱肌，花錢請(qǐng)思聰吃個(gè)飯，多排片胺那）猛铅。最后的最后還需要把用戶真實(shí)的觀影感受反饋給運(yùn)營（導(dǎo)演），讓產(chǎn)品不斷完善。（你看你的床戲就是個(gè)偽需求嘛，大家要看的是特效Ｍ芾摇）
前端的工作內(nèi)容就是實(shí)現(xiàn)產(chǎn)品馍驯，你就是演員混弥，你就是后期蒿涎，你就是要把想法變成現(xiàn)實(shí)胖齐。所以，更多的是技術(shù)活驰弄，你需要演技！（搬磚算么浪耘？）
逼格名詞：
PM（產(chǎn)品經(jīng)理澜躺，項(xiàng)目經(jīng)理；老大級(jí)，主要寫PPT和畫原型圖，提需求廓八，產(chǎn)品要做成什么風(fēng)格剧蹂，要有哪些功能声功，哪種更好，是否可以商業(yè)化等等問題宠叼。一般很多老板決定先巴，用戶調(diào)研，自己抽風(fēng)去想冒冬。主要和UE定大致的交互稿伸蚯。）
PD（需求分析，產(chǎn)品規(guī)劃简烤；和PM類似剂邮，有的公司叫法不同，百度叫pm阿里叫pd横侦，因?yàn)橛械闹粫?huì)畫原型圖的pm導(dǎo)致很多PD以PM的身份做著PM的事挥萌？主要寫WORD，分析需求是否合理枉侧，規(guī)劃產(chǎn)品路線引瀑，競(jìng)品分析等等。）
UE（用戶體驗(yàn)棵逊、交互設(shè)計(jì)伤疙；也叫UX，和PD溝通較多辆影，和前端表現(xiàn)層配合較多徒像。懂人性，主要和產(chǎn)品經(jīng)理討論需求和交互蛙讥，修改交互稿锯蛀。）
UI （界面設(shè)計(jì)、視覺設(shè)計(jì)次慢；有的小作坊叫美工旁涤，顏色翔曲、字體，按鈕等劈愚，主用photoshop）
RD（研發(fā)工程師瞳遍；細(xì)分前端FE、后端BE菌羽、無線掠械、數(shù)據(jù)DBA，F(xiàn)E負(fù)責(zé)呈現(xiàn)注祖，BE負(fù)責(zé)數(shù)據(jù)和接口猾蒂，前后端都是同步進(jìn)行，前端可以先模擬數(shù)據(jù)是晨，再細(xì)分比如有移動(dòng)端肚菠，再細(xì)分比如安卓的ios的）
QA（產(chǎn)品測(cè)試、質(zhì)量保證罩缴；對(duì)開發(fā)交付的產(chǎn)品全面測(cè)試蚊逢，分為很多種，有深入運(yùn)行機(jī)制內(nèi)的已知性的白盒測(cè)試和置身事外只要輸出結(jié)果正確的未知性黑盒測(cè)試和在黑盒中產(chǎn)生白盒的穿線測(cè)試之分箫章，還有單元測(cè)試时捌，系統(tǒng)測(cè)試，功能炉抒、壓力和泌、性能測(cè)試俐芯，集成測(cè)試款筑、回歸測(cè)試等等铭若∑酝ィ可以手工拦键，可以用工具混聊，可以自動(dòng)化）
OP（產(chǎn)品運(yùn)維震蒋；復(fù)合型人才季率，需要對(duì)服務(wù)端野瘦，硬件、網(wǎng)絡(luò)飒泻、安全鞭光、系統(tǒng)、開發(fā)都需要有了解泞遗，解決故障惰许、服務(wù)器正常運(yùn)轉(zhuǎn)、機(jī)房維護(hù)史辙、優(yōu)化性能汹买、減少壓力佩伤、分析監(jiān)控，保障安全晦毙。）
其他（運(yùn)營生巡、推廣、銷售见妒、技術(shù)支持TS等）
以上工作崗孤荣，實(shí)際工作中都是有相互交叉的，并非完全獨(dú)立徐鹤。
產(chǎn)品如何上線的垃环？
由產(chǎn)品經(jīng)理出需求返敬，然后拉所有人員設(shè)計(jì)遂庄，開發(fā)，數(shù)據(jù)庫等所有人一起討論需求是否合理劲赠，也就是撕逼大戰(zhàn)涛目，產(chǎn)品經(jīng)理抽風(fēng)想出來的某些功能，開發(fā)組實(shí)現(xiàn)不了或?qū)崿F(xiàn)成本太大凛澎，資源不足霹肝。就要考慮改需求，或一下完成不了塑煎，需要迭代開發(fā)沫换。不要開發(fā)到一半了，你說你想加個(gè)功能最铁，那時(shí)候可能就不好加了讯赏。定了后，就開始定排期冷尉，什么時(shí)候開始漱挎，哪個(gè)階段完成哪些任務(wù)，什么時(shí)候開會(huì)雀哨，文檔提交到哪里磕谅，什么時(shí)候做功能預(yù)演和提測(cè)，什么時(shí)候開會(huì)碰雾棺，可能期間還沒開發(fā)完全就需要提前進(jìn)行冒煙測(cè)試（功能預(yù)演）膊夹，最后開個(gè)啟動(dòng)會(huì)。就開干了捌浩！
前端割疾、網(wǎng)頁設(shè)計(jì)、交互設(shè)計(jì)的區(qū)別嘉栓？
網(wǎng)頁設(shè)計(jì)是初期發(fā)展起來的現(xiàn)在都叫切圖仔宏榕。會(huì)一點(diǎn)html拓诸，會(huì)點(diǎn)css，用dreamviewer就能做簡單的網(wǎng)頁麻昼。因此在很多被鄙視的原因是沒有太多技術(shù)含量奠支。但那個(gè)時(shí)代本來就是如此，現(xiàn)在很多前端也都是從那個(gè)時(shí)代成長過來的抚芦。只是互聯(lián)網(wǎng)發(fā)展迅速倍谜，技術(shù)欲來越多，交互越來越復(fù)雜叉抡，越來越酷炫尔崔，以往的技術(shù)不足以滿足需求了，而H5的出現(xiàn)褥民，更好滿足了此需求季春，網(wǎng)頁設(shè)計(jì)發(fā)展為了新行業(yè)（前端）。而交互設(shè)計(jì)則是和前端不同的職位消返。
直觀講载弄，網(wǎng)頁設(shè)計(jì)就是出頁面或產(chǎn)品的整站視覺方案，提供PSD或PNG格式的預(yù)覽圖撵颊，（高級(jí)些的會(huì)出標(biāo)準(zhǔn)配色表和風(fēng)格設(shè)計(jì)指南、理念倡勇、場(chǎng)景等附件）逞刷，有交互設(shè)計(jì)主要就是關(guān)注人機(jī)界面的易用性和用戶友好性。前端則負(fù)責(zé)將UI和UE的方案轉(zhuǎn)為可上線的（Html + Css + Js）產(chǎn)品妻熊。
更簡單講：
網(wǎng)頁設(shè)計(jì)想的是展現(xiàn)什么what亲桥？
交互設(shè)計(jì)想的是如何更好的展現(xiàn)？
前端開發(fā)想的是如何實(shí)現(xiàn)how固耘？
如何學(xué)前端？
有以下路徑词身，優(yōu)先級(jí)排序：
- 自學(xué)厅目。以如今的技術(shù)分享和網(wǎng)絡(luò)資源，只要你愿意法严，自學(xué)是能實(shí)現(xiàn)系統(tǒng)的學(xué)習(xí)的损敷，你要做的只是多搜索多聯(lián)系而已。那么多項(xiàng)目開源在那任你閱覽深啤，主流技術(shù)都有文檔和無數(shù)的線上問答拗馒。唯一能約束你的就是時(shí)間和精力∷萁郑啃書诱桂。
書中自有顏如玉洋丐，書中自有黃金屋。 - 實(shí)習(xí)挥等。找個(gè)大點(diǎn)的正規(guī)互聯(lián)網(wǎng)公司友绝，進(jìn)入后跟著大牛好好學(xué)，別論人家愿不愿帶你肝劲，你好學(xué)迁客，人都喜歡；你懶辞槐，那都瞎扯掷漱；你笨，那是天意榄檬。
- 培訓(xùn)卜范。培訓(xùn)機(jī)構(gòu)那么多，我只推薦饑人谷丙号，無他先朦，老師必須要有項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，否則紙上談兵帶你入的可就不是坑而是溝了犬缨。
簡而言之要有許三多：有許多讀書和思考喳魏，有許多問題和困惑，有許多動(dòng)手和寫作怀薛。
- 定個(gè)目標(biāo)刺彩，抬頭看路、低頭走路枝恋；
- 別瞎想创倔，別聽人瞎說，只需要堅(jiān)定的執(zhí)行焚碌；
- 實(shí)踐是最好的老師畦攘，最好能加入團(tuán)隊(duì)、項(xiàng)目或者公司實(shí)習(xí)十电；
- 聽到新名詞要隨手查查知押，好看網(wǎng)頁隨手審查元素；
- 多收集鹃骂，多總結(jié)台盯，最好能有技術(shù)博客，把自己花時(shí)間搞定的問題和結(jié)果記下來畏线；
- 不懂就要問静盅，先問谷哥再問必應(yīng)再問度娘，最后問其他人寝殴；
- 多去知乎蒿叠、一些技術(shù)博客看看明垢，看到聽到的新技術(shù)新框架自己去官網(wǎng)下demo；
- 多認(rèn)識(shí)一下相關(guān)領(lǐng)域的人栈虚，聽聽建議袖外；
- 戒驕戒躁，師傅領(lǐng)進(jìn)門魂务、修行在個(gè)人曼验；
- 半年抵得上3年？ 180(天)6(小時(shí))1.5(倍效率) > 360(天)3(年)1(每天1個(gè)小時(shí))粘姜；
- 如何做到1.5被效率? 要適度深挖鬓照，常見的知識(shí)點(diǎn)一定要深究，知其所以然才算是自己的孤紧；
- 課程以外知識(shí)定個(gè)小目標(biāo)豺裆；
- 早起的鳥兒有蟲吃，會(huì)叫的孩子有奶吃号显；
- 自信能提升30%的戰(zhàn)力臭猜。
關(guān)于讀書方法論
看目錄、略讀個(gè)別正在學(xué)習(xí)的章節(jié)押蚤，作為知識(shí)點(diǎn)補(bǔ)充鞏固蔑歌。可以做讀書筆記揽碘，盡信書不如無書次屠。（犀牛書可以作為工具書使用，不懂得拿出來查查雳刺，實(shí)在不知道的自己知乎去搜吧劫灶，很多前端書單）
- JavaScript 高級(jí)程序設(shè)計(jì)（第三版）
- JavaScript 權(quán)威指南
- 高性能網(wǎng)站建設(shè)指南
- JavaScript 設(shè)計(jì)模式
- JavaScript 標(biāo)準(zhǔn)參考教程（阮一峰）
- ECMAScript 6 入門（阮一峰）
- 圖解 HTTP
- HTTP 權(quán)威指南
- Unix編程藝術(shù)
- 軟件隨想錄
- 最后期限
- 只是為了好玩
- 寫給大家看的設(shè)計(jì)書
- Helvetica
- 大話設(shè)計(jì)模式
- 七周七語言
HTML CSS 不推薦看書了，變化快掖桦、太簡單本昏、不直觀。借助 jsbin 上仿制各種布局枪汪、特效涌穆，多練習(xí)即可。遇到問題就搜 CSSTricks料饥、MDN、Stackoverflow 等足以朱监。
前端應(yīng)具備技能岸啡？
感受一下：
簡單工作內(nèi)容總結(jié)是：搭建產(chǎn)品 → 優(yōu)化產(chǎn)品 → 維護(hù)產(chǎn)品
前端也會(huì)有重點(diǎn)分工：業(yè)務(wù)實(shí)現(xiàn)、框架組件赫编、平臺(tái)工具
饑人谷學(xué)習(xí)知識(shí)點(diǎn)大綱
資源網(wǎng)站推薦
- W3School中文版: 前端入門必備網(wǎng)站
- W3Schol英文原版版: 更專業(yè)全面巡蘸，有對(duì)Html5奋隶、CSS3詳細(xì)介紹
- HTML5功能簡介在線ppt: html5功能簡介，一小時(shí)讓你熟悉html5
- CSS Sprite圖片合并: 圖片合并
- 圖片壓縮 tinyPng: 用于png圖片在線壓縮
- 代碼樣式悦荒，代碼編輯器 ace:當(dāng)頁面中要展示格式化的源碼唯欣，或者做個(gè)在線代碼編輯器時(shí)這個(gè)超級(jí)好用
- jsBin:代碼在線運(yùn)行，分享代碼
- markdown語法: .md文件的編寫搬味，效果參考本頁面
- markdown可視化在線編輯: md文件可視化編輯境氢，可導(dǎo)出到html
- mac實(shí)用的md編輯器mou: 可視化編輯，自定義樣式碰纬，導(dǎo)出html和pdf
- icon下載: icon資源下載
- icon 字體圖標(biāo):字體圖標(biāo)
- seaJs：seaJS介紹
- 一分鐘搭建博客
本文章著作權(quán)歸作者本人和饑人谷所有萍聊，轉(zhuǎn)載須說明來源
