我的職業是前端工程師【二】: 入門不是應該很簡單嗎？

入門前端，是一件很難的事嗎？在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。這個問題並不取決於前端，而是取決於不同人的需求。到底是想要快得一步登天呢，還是一點點的慢慢來，去享受前端帶來的樂趣。

對於不同領域的學者來說，都會有一個相似的問題：如何從入門到精通？入門並不是一件很複雜的事，只是多數人想要的是更快的入門，這才是真正複雜的地方。雖說條條道路都是通過羅馬的，但並不是每條道路都是能滿足人們要求的。對於 A 說的路線並不一定適合於 A ，有可能會適合於 B；適合於 B 的路線，也有可能只適合於 B。

前端之路

談起路線規則這事，就會聯想起演算法里的路徑問題。想了想，發覺「如何教人入門前端」與「選擇合適的路徑」頗為相似的，要實現這樣的規劃蠻難的。先上張圖，加深一下印象：

接著，我們來思考這樣的一個問題：

每個初學者都處於「1」，最後的目標都是到「9」，那麼你會怎麼幫助他們規劃路線？

假設，每一個數字都對應了技術棧，並標註了每個技術棧學習所需要的時間。那麼，這時要計算出最快的學習路線也就容易了。而這種開掛的感覺，就像是我們擁有了遊戲中的技能樹的一樣。技能樹上，包含了所有已知的技能，以及：學習某個技能所需要的時間，學習某個技能後可以觸發某個技能等等。

不幸的是，這個路線不可能會怎麼簡單。倘若你是一個在校的學生，或者是相似的研究人員，那麼這種路線也頗為適合。理想的情況下，我們可以自由地分配自己的時間，在對應的技術棧上花費相應的時間。這就好像是遊戲世界的技能樹一樣，我們所擁有的點數是固定的，那麼所能學習的技能也是固定的。

假使真實世界的前端技能樹已經很清晰，那麼這裡的點數對應的就是時間。在時間固定的情況下，我們所能學習的技能也是固定的。而技能樹中的時間花費是一個大的問題：當我們學習完某個技能後，我們可能就擁有其他技能的加成。

在已經學會了 ES6 的情況下，學習 TypeScript 就變得更輕鬆，這時學習 TypeScript 的時間就會更短。也因此，相似的技術棧可以歸類到一起。遺憾的是，學習相似的技術棧仍然是需要時間的。

回到前端技術的話題上，在編寫複雜前端應用時，我們都會採用前端框架來加快開發。前端框架的技術基礎都是一樣的，有區別的是，它們衍生出來的技術思想。有的框架創造出了一些有意思的 DSL（領域特定語言），可以藉此編寫出獨立於語言的代碼，這些代碼也可以用在不同的領域裡。

一個很有意思的例子就是 Mustache 模板，即可以讓我們用後台語言，如 Java，來渲染 Mustache 模板為 HTML，又可以在前端里使用 Mustache.js 來將模板渲染為 HTML。相似的，對於 React 中的 JSX 也是如此，我們即可以用 Node.js 與 React 在後台來渲染出頁面，又可以在前端來渲染 JSX 為 HTML。

我的前端入門

在我剛學前端工程師的時候，由於只需要編寫 CSS、JavaScript 和 HTML，因此要做前端的活相當的簡單。有時，甚至會覺得有些乏味。

我的第一個網站

大一時，年輕氣盛就去辦了個社團，當了個社長。那會兒還能使用各種 Google 的服務，Google 剛剛開始推廣它的雲服務 Google App Engine。用戶只需要點擊一個按鈕，就可以上傳代碼，應用就會自動地部署到相應的網站上了。下圖就是我的第一個網站：

當時，寫給客戶的代碼大多乏味，沒有挑戰性。為了嘗試各種新特性，我就將各種奇怪的 CSS3 加到其中。

這一點在今天的日常工作里，也沒有太多的變化。工作寫代碼是為了活下去，業餘寫代碼則是為了興趣。有意識地將兩者分開，才能使技術更好的成長。我們不會因為，在項目里引入新技術而沮喪。同時，在業餘時自由的使用新的技術，來提升自己的技術與視野。

後來，世道變了，免費的東西還能使用，但是網站已經訪問不了。我們嘗試很 SAE 上遷移，雖然 SAE 很不錯，但是你是要去備案的。再後來，我們就去租用自己的伺服器了。

Copy/Paste from Cookbook

與現在稍有不同的是，現在寫代碼是 Copy/Paste from StackOverflow，那時寫代碼是 Copy/Paste from Cookbook。所以，我們只需要三本書就足夠了：

• CSS Cookbook
• JavaScript Cookbook
• jQuery Cookbook

它們包含了我所需要的一切，對應於不同的功能，都有對應的代碼。我們所需要做的就是在合適的地方放上合適的代碼。

在閱讀了大量的書後，我才得到了上面的結論。不過，大學不像現在這麼「寬裕」，不能輕鬆地去買自己想看的書。一本書抵得上好幾天的飯錢，不會毫不猶豫地「一鍵下單」。現在，仍然會稍微猶豫一下，這主要是房價太貴，租的房子太小。儘管我們的學校是一所二本院校，但是圖書館還算是不小的——雖然沒有啥各種外語書，但是大部分領域的書總算是有一兩本的，每個月還會進一些新書——反正屈指可數。四年下來，我算是能知道每一本計算機書的大概位置。

因此，如果你只是想為了完成任務，而去完成任務。你就會發現，編程是相當無聊的，和一般的工作無異。

開發工具

最初，我頗為喜歡 Adobe DreamWeaver，還有 Chrome 瀏覽器，它們結合起來能完成大部分的 UI 工作。

儘管在今天看來，DreamWeaver 是個一個奇怪的工具，它可以讓我們拖拽來生成代碼，但是這些生成的代碼都是臭不可聞的。但是我愛及了他的及時預覽地功能了，特別是當我在編寫 CSS 的時候，不再需要在瀏覽器、開發工具不斷切換。

慢慢地，當我開始越來越多的使用 JavaScript 時，DreamWeaver 提供的功能就變得越來越有限了，我開始覺得它越來越難用了。曾經有一段時間裡，我使用 Aptana——它可以將 minify 後的代碼格式化。

現在，我使用 Intellij IDEA 和 WebStorm作為主要開發工具，它們的重構功能讓我難以自拔。當我需要修改一些簡單的文本時，我就會使用 Vim 或者 Sublime text。在命令行里發現了一個問題，直接可用命令行來打開並修改。

Chrome 瀏覽器在當時雖然很不錯，但是當時市場佔有率太低。只能拿它來作平時的瀏覽器，看看各種 IE 上的 Bug，再玩 CSS3、HTML 5 等等各種特效。多數時候你還是要用 IE 的，寫下一行行的 CSS Hack，以確保大部分的用戶是可以正常使用的。

今天，也仍然在使用 Chrome 作為我的日常和開發用瀏覽器。雖然它還沒有解釋臭名昭著的內存問題，但是我們已經離不開它的 Console，Device Toolbar 等等的功能，同時還有運行在這上面的各種插件，如 Postman，PageSpeed 等等。

jQuery 是最好用的

在我發現了 jQuery 之後，我才知道它是一個神器。jQuery 有一個龐大的生態系統，有一系列豐富的插件。我們所需要做的就是，知道我們要實現的功能，找到相應的插件。緊接著，就去 Google 有相應的插件，然後按照他的 README 寫下來即可。即使沒有的插件，我們也可以很容易的編寫之。

到了後來，我覺得前端甚是無聊。這主要是限制於我們接的一些業務，都是企事業單位的單子，每天都是無盡的 IE 的兼容問題。這讓我覺得同時使用很多個 IE 版本的 IETester，是一個偉大的軟體。

過了那段時間後，看到了 Node.js、Backbone、React、Angular 打開了另外一個世界。這算是前端 3.0 的世界了，這期待下一章《如何在三個月里學會期待》。