題圖

1. 價(jià)值

我是一個(gè)對(duì)后端有一定經(jīng)驗(yàn)的程序員，一直從事相關(guān)的工作，不過(guò)我對(duì)前端也挺感興趣的，總想學(xué)點(diǎn)前端的技術(shù)，做點(diǎn)東西來(lái)玩玩，比如做個(gè)寫周報(bào)的頁(yè)面，這樣就不需要花時(shí)間去整理周報(bào)內(nèi)容；再比如利用這些知識(shí)定制開源的監(jiān)控頁(yè)面，讓它更貼近我們的需求，或者利用前端做一些運(yùn)維自動(dòng)化工作。當(dāng)然目前想到的這些對(duì)自身的改變都不大，無(wú)非是多學(xué)習(xí)一種程序語(yǔ)言，但我心里一直篤信，如果能夠同時(shí)掌握前端技術(shù)，對(duì)我整個(gè)人的價(jià)值提升是無(wú)法想象的。

前后端原本是不分家的，一個(gè)公司剛開始的時(shí)候，不管前端還是后端代碼，應(yīng)該是一個(gè)人，或少數(shù)幾個(gè)人一起做出來(lái)的，只是隨著公司發(fā)展過(guò)程中管理的需要和分工協(xié)作的原因，前后端分離這件事才越來(lái)越明顯，導(dǎo)致現(xiàn)在許多人一進(jìn)入公司，就只會(huì)做前端，或另一部分只會(huì)做后端，而且保持十幾年不變，在我看來(lái)，作為一個(gè)后端程序員，如果不了解前端，屬于技能上的缺失，不僅無(wú)法獨(dú)立完成一個(gè)完整的產(chǎn)品，而且在思維上不會(huì)站在前端程序員的位置上思考，即將來(lái)如果成為一個(gè)系統(tǒng)設(shè)計(jì)師，設(shè)計(jì)出來(lái)的軟件也很有可能存在缺陷，反之亦然。這也是為什么整個(gè)行業(yè)越來(lái)越鼓吹全棧工程師，這個(gè)概念并不是虛幻不實(shí)際的，而是企業(yè)對(duì)人才的一種實(shí)實(shí)在在的需求，即人們常說(shuō)的復(fù)合人才的一種，全棧工程師對(duì)于一個(gè)企業(yè)來(lái)說(shuō)價(jià)值巨大。

2. 失敗經(jīng)歷

我學(xué)習(xí)前端開發(fā)斷斷續(xù)續(xù)也有幾年時(shí)間，總是想著自己有不錯(cuò)的基礎(chǔ)，應(yīng)該不費(fèi)吹灰之力就可以學(xué)會(huì)，有一兩次還做了些計(jì)劃，例如每天跟著w3school學(xué)半個(gè)小時(shí)，相信自己十幾天之內(nèi)就可以掌握，但一方面因?yàn)樽约汗ぷ鞅容^忙，另一方面因?yàn)橛?jì)劃不太實(shí)際，沒(méi)有收到相應(yīng)的成效，最終都以從入門到放棄告終。最近花了些時(shí)間學(xué)習(xí)學(xué)習(xí)的方法，再次總結(jié)之前的失敗原因，發(fā)現(xiàn)以前失敗主要是因?yàn)樽约旱闹匾暢潭炔桓撸由锨岸思夹g(shù)棧確實(shí)龐大，如果隨隨便便就可以學(xué)到的技能，那其實(shí)本身它的含金量就不高；學(xué)習(xí)任何一個(gè)新技能都應(yīng)該注重它的學(xué)習(xí)過(guò)程，首先要分析這個(gè)技能的主要框架，然后針對(duì)框架的每一個(gè)知識(shí)點(diǎn)，做大量的實(shí)踐及練習(xí)，這樣你才能夠’快速’學(xué)會(huì)一門新技能。

曾經(jīng)有過(guò)這樣的經(jīng)驗(yàn)，公司要開發(fā)一個(gè)云存儲(chǔ)系統(tǒng)，為了完成這個(gè)需求，我引進(jìn)了一個(gè)開源的云存儲(chǔ)項(xiàng)目，并將其進(jìn)行修改，讓它符合公司的需求，這個(gè)開源的項(xiàng)目自帶一些運(yùn)維可視化的工具，是用AngularJs和BootStrap做成的，當(dāng)時(shí)我也花了些時(shí)間看懂了這些代碼，以為自己以后就會(huì)使用這些技術(shù)來(lái)做可視化了；但真正要開發(fā)新的項(xiàng)目時(shí)，我并不能很快利用AngularJs和BootStrap為我所用，即便花很多時(shí)間做得和以前一模一樣，我也很難在上面添磚加瓦，或做得比以前更好。根本原因在于我沒(méi)有了解前端開發(fā)的全貌，不知道某些技術(shù)的主要用途是怎樣的，只看代碼而不實(shí)踐也是無(wú)法讓技術(shù)成為自身技能的。

3. 領(lǐng)悟

直到最近，我在github上發(fā)現(xiàn)了free code camp社區(qū)，全世界最大的學(xué)習(xí)前端開發(fā)的社區(qū)，我同時(shí)也鼓勵(lì)零基礎(chǔ)的老婆在上面學(xué)習(xí)，希望有一天她可以通過(guò)學(xué)習(xí)一門編程語(yǔ)言體會(huì)到成長(zhǎng)的樂(lè)趣。在fcc中國(guó)社區(qū)，作為自愿者，給他們翻譯了幾篇前端學(xué)習(xí)的入門文章：

1. Things you probably didn’t know you could do with Chrome’s Developer Console
2. I finally made sense of front end build tools. You can, too.
3. From Zero to Front-end Hero (Part 1)
4. From Zero to Front-end Hero (Part 2)

在翻譯的過(guò)程中，其實(shí)對(duì)我?guī)椭容^大的是英語(yǔ)能力的提升，讓我專門騰出時(shí)間來(lái)利用英語(yǔ)進(jìn)行翻譯工作。其中最后兩個(gè)翻譯的文章，是點(diǎn)擊量最多的，反映了翻譯水平比以前有了提升，同時(shí)這兩篇本身質(zhì)量也非常高。其原因在于文章給初學(xué)者規(guī)劃出了一個(gè)版圖，讀者拿著這個(gè)版圖，對(duì)每個(gè)版圖分別進(jìn)行實(shí)踐，就可以把其中的知識(shí)據(jù)為己有，注意，如果你只看文章而不實(shí)踐，是沒(méi)有用的，知識(shí)不會(huì)因?yàn)槟憧戳宋恼露詣?dòng)鉆到你的腦袋里。

所以，說(shuō)到這里，最佳的學(xué)習(xí)前端的方式是實(shí)踐，而最佳的實(shí)踐其實(shí)文章中已經(jīng)說(shuō)了：依葫蘆畫瓢，即把例子原封不動(dòng)的克隆一遍。當(dāng)然盡量不要ctrlC + ctrlV。

From Zero to Front-end Hero系列真的不錯(cuò)，我現(xiàn)在已經(jīng)按照文中的路線在練習(xí)，從布局開始，已經(jīng)學(xué)會(huì)了基本的布局方式，以及知道了平時(shí)看到的一些交互式頁(yè)面，其實(shí)是通過(guò)CSS的技術(shù)做出來(lái)的，例如Media Query技術(shù)可以自動(dòng)適應(yīng)pc瀏覽器和移動(dòng)端瀏覽器。關(guān)于布局的練習(xí)，我把它保留在了我自己的CodePen中，里面都有源碼，還等什么，趕緊動(dòng)手把，相信你也可以做到，原布局練習(xí)教程在這里。

本文沒(méi)有提到科學(xué)上網(wǎng)、英語(yǔ)能力等，這些不是必要的，但它們確實(shí)會(huì)帶來(lái)很大的幫助。

希望本文可以給你帶來(lái)幫助，如果你喜歡這篇文章，可以將其分享到社交網(wǎng)絡(luò)中，如果你有任何問(wèn)題，可以在文章后留言，或者通過(guò)社交網(wǎng)站找到我。