玩了那么多的東西后，我便就對(duì)這些東西駕輕就熟了。而在今天看來(lái)，仍然走了相當(dāng)多的彎路。當(dāng)有人再問(wèn)我『怎樣練習(xí)才能成為一個(gè)優(yōu)秀的前端工程師』時(shí)，我便想著：我應(yīng)該好好的回答一下這個(gè)問(wèn)題。

Output is Input

我一直很喜歡那句，Output is Input 的話，即：

Output is input

即，我們輸出知識(shí)的時(shí)候，便是在輸入更完整的知識(shí)。因此當(dāng)我練習(xí)的時(shí)候，我便會(huì)刻意地去結(jié)合使用他們，往往能達(dá)到事半功倍的效果。想嘗試玩一個(gè)新的框架時(shí)，我便會(huì)用這樣的邏輯去玩它：使用新框架編寫一個(gè)應(yīng)用，再閱讀、整理相應(yīng)的資料。

你若問(wèn)我，為什么我會(huì)這么練習(xí)？我想那大概是，我可以更早的得到反饋。我可以更早的知道，A 框架對(duì)于使用過(guò) B 框架的人來(lái)說(shuō)有些難度，我也能輕松地指出他們的差異。甚至，如果這是一個(gè)新的項(xiàng)目，那么我還能用一種『不很完美的姿勢(shì)』完成之。而如果只是完成這個(gè)項(xiàng)目，那對(duì)于我而言也沒(méi)有多少
實(shí)質(zhì)性的提高。

遺憾的是對(duì)于多數(shù)人來(lái)說(shuō)，可能就只是完成項(xiàng)目這一程度，后面仍然還有好長(zhǎng)的路要走。做一個(gè)好的前端工程師，即要做很多的項(xiàng)目，又要讀一些書。即要會(huì)使用這個(gè)框架，又要知道他的一些基本的思想。

習(xí)慣了先輸出、后輸入的過(guò)程后，練習(xí)起來(lái)就很輕松了。

練習(xí)框架、技術(shù)的時(shí)機(jī)

練習(xí)，那可是相當(dāng)燒時(shí)間的大事；時(shí)間，又是一種相寶貴的資源。暫不說(shuō)，相當(dāng)于好幾年的十萬(wàn)小時(shí)理論。對(duì)于我們這些每天要早出晚歸的工作族來(lái)說(shuō)，八小時(shí)以外的時(shí)間就更小了。對(duì)于一個(gè)在校的計(jì)算機(jī)專業(yè)學(xué)生來(lái)說(shuō)，也不一定能在四年里搞定。

而這時(shí)候如果又選擇了一個(gè)錯(cuò)誤的技術(shù)棧，哪怕是相當(dāng)?shù)睦速M(fèi)時(shí)間了。好在我們已經(jīng)在那篇《學(xué)習(xí)前端只需要三個(gè)月【框架篇】》中討論了如何選擇一個(gè)合適的技術(shù)棧。此時(shí)還有一個(gè)問(wèn)題是，如何在一個(gè)合適的時(shí)機(jī)練習(xí)它。

過(guò)去，習(xí)慣了將一些 Idea 放在 GitHub 上變成一個(gè)清單。也因此習(xí)慣了，將一些想要玩的框架放到了 TODO Lists 中，再慢慢地享受將他們完結(jié)的愉悅感。

當(dāng)有一個(gè)新的框架出現(xiàn)時(shí)，看看知乎、微博、微信群里的討論還不錯(cuò)，我就會(huì)將這個(gè)框架加到 Todo Lists。在一個(gè)周末，或者中午，搭建一下項(xiàng)目，玩一下 DEMO。

隨后，這個(gè)框架就會(huì)進(jìn)入評(píng)估期。評(píng)估一個(gè)框架可不是一件容易的事，要從不同的角度去了解它：社區(qū)歡迎程度、API 變化程度、Roadmap 計(jì)劃、Release 情況等等。再確認(rèn)一下框架是否可以適合當(dāng)前的項(xiàng)目，可以的話，就會(huì)創(chuàng)建一個(gè)新的分支來(lái)玩玩，又或者直接引入項(xiàng)目。

如果這是一個(gè)有前景的框架，那么我就會(huì)選擇一個(gè)合適的時(shí)機(jī)（有時(shí)間），創(chuàng)建一個(gè)開源來(lái)應(yīng)用它。每個(gè)人都會(huì)有一些偏愛(ài)，這也決定了他們可能不會(huì)去玩某些框架，這倒是有些可惜了。

當(dāng)我們決定去練習(xí)的時(shí)候，我們更需要一些練習(xí)的技巧。

練習(xí)的過(guò)程

練習(xí)框架、技術(shù)的技巧

練習(xí)嘛，我想就這么幾步：

• 找到一個(gè)模板
• 邊修改模板，邊查閱資料，以此來(lái)完成一個(gè)應(yīng)用
• 閱讀官方文檔或者代碼來(lái)補(bǔ)漏
• 編寫博客、文章、書籍來(lái)加強(qiáng)印象

我喜歡的就是這種輸入和輸出相結(jié)合的形式。一開始的時(shí)候，就應(yīng)該先做一個(gè)應(yīng)用。這種用意特別明顯，借此可以快速地了解一個(gè)框架，就會(huì)覺(jué)得相當(dāng)有成就感。隨后就是去補(bǔ)缺補(bǔ)漏，以便于我們可以更好地完成應(yīng)用。最后，當(dāng)我們寫文章去總結(jié)的時(shí)候，便會(huì)對(duì)這個(gè)框架有更基礎(chǔ)的認(rèn)識(shí)——像擁有一張清晰的思維導(dǎo)圖，熟悉他的方方面面。

使用模板

對(duì)于多數(shù)的人而言，也包括我，決定去使用一個(gè)框架的時(shí)候，表明它已經(jīng)是一個(gè)幾近成熟的框架——我們可以很容易找到一些資料。依據(jù)現(xiàn)在框架的發(fā)展趨勢(shì)，大部分的框架都會(huì)提供一個(gè)腳手架，即應(yīng)用程序模擬。只需要運(yùn)行這個(gè)模板，我們就可以有一個(gè) hello,world。

如 Angular 官方提供了一個(gè) angular-seed 的項(xiàng)目，它提供了一套基本的模板，可以用來(lái)快速的創(chuàng)建應(yīng)用。而 React 也提供了一個(gè)名為 create-react-app 的工具來(lái)快速搭建環(huán)境。

遺憾的是，大部分的官方 hello,world 都不是很詳細(xì)，這時(shí)候我們可以在 GitHub 上搜索 xxx starter kit 來(lái)做同樣的事，如 React Starter Kit，就可以輕松地在 GitHub 上找到相就的項(xiàng)目，如react-slingshot

react-starter-kit.jpg

它提供了一些豐富的組合，如 React、Reactd Router、Redux、Babel、Jest、WebPack 等等的工具?，F(xiàn)在，我們?cè)谶@一步要做的事情就是運(yùn)行起 hello,world。然后，我們?cè)倏紤]下一步要做一些什么？

做點(diǎn)什么應(yīng)用

拿到框架的下一個(gè)問(wèn)題時(shí)，我們要去做什么，這個(gè)就相當(dāng)有趣了。挑一個(gè)有難度的吧，做不了；挑一個(gè)簡(jiǎn)單的吧，覺(jué)得不能練手；還是挑一個(gè)實(shí)用的吧，比如博客。

我寫過(guò)最多的應(yīng)用就是與博客相關(guān)的應(yīng)用了。當(dāng)出現(xiàn)一個(gè)新的練手框架時(shí)，我總會(huì)用這個(gè)框架來(lái)把博客寫一遍。于是，我的博客的后臺(tái) API 用 Node.js、Flask、Django 實(shí)現(xiàn)過(guò)一遍，而前臺(tái)則用 Backbone、Angular 1、React 實(shí)現(xiàn)過(guò)一遍，而 APP 方面也使用 Ionic 1 和 React Native 實(shí)現(xiàn)過(guò)一遍。

對(duì)于博客而言，我們都很輕松它的功能：列表頁(yè)、詳情頁(yè)、登錄、創(chuàng)建博客等等。我通常只會(huì)實(shí)現(xiàn)上面的四個(gè)基本元素，這和大部分應(yīng)用的主要模式差不多。對(duì)于前端來(lái)說(shuō)，我們會(huì)練習(xí)到基本的內(nèi)容：

• GET 和 POST 數(shù)據(jù)
• 列表頁(yè)到詳情頁(yè)的跳轉(zhuǎn)和返回
• 對(duì)于用戶登錄憑據(jù)的獲取和保存

基本上涉及到了一個(gè)框架的大部分內(nèi)容，路由、模板、API 請(qǐng)求、數(shù)據(jù)存儲(chǔ)、用戶授權(quán)等等。這樣一來(lái)，我們就要清楚地業(yè)務(wù)邏輯了，那么剩下的是都是技術(shù)的事。

編寫一個(gè)博客應(yīng)用

接下來(lái)，唯一的問(wèn)題是：因?yàn)閷?duì)這一系列的技術(shù)棧，我們會(huì)遇到一系列的困難。當(dāng)一個(gè)新手選擇 React 的時(shí)候，就會(huì)遇到 JSX ES6 Babel Webpack Redux React-Router 等一系列的 React 全家桶。這時(shí)，難以下手的主要原因是，不知道這些東西都是干嘛的，也對(duì)前端單應(yīng)用應(yīng)用沒(méi)有一個(gè)清楚的認(rèn)識(shí)。

在沒(méi)有基礎(chǔ)的情況下，直接下手這些會(huì)有一定的困難：在學(xué)習(xí)新的技術(shù)棧的同時(shí)，也在學(xué)習(xí)前端應(yīng)用的組成。因此：

首先，要對(duì)前端單頁(yè)面應(yīng)用有一個(gè)大致的了解。如對(duì)于一個(gè)前端框架來(lái)說(shuō)， 它要有模板引擎、依賴管理、路由處理、控制器（模板）和狀態(tài)等等，除此它還需要有構(gòu)建工具、編譯工具、測(cè)試框架等等。

然后，就需要了解所使用的工具對(duì)應(yīng)的有什么功能。如上面說(shuō)到的例子里，JSX 相當(dāng)于是模板引擎、WebPack 是打包工具 / 構(gòu)建工具、Babel 是 ES6 語(yǔ)言的編譯器、Redux 用來(lái)做狀態(tài)管理、React-Router 用來(lái)處理路由。

最后，需要一個(gè)應(yīng)用的例子來(lái)將這些內(nèi)容串在一起。如當(dāng)我們打開一個(gè) Web 應(yīng)用的時(shí)候，應(yīng)該要有一個(gè)路由處理的工具，來(lái)將用戶導(dǎo)向相應(yīng)的頁(yè)面。而這個(gè)頁(yè)面會(huì)有對(duì)應(yīng)的控制器和模板，路由就是來(lái)分發(fā)用戶的請(qǐng)求。當(dāng)頁(yè)面數(shù)據(jù)數(shù)據(jù)或者用戶操作時(shí)，頁(yè)面上的數(shù)據(jù)狀態(tài)就會(huì)發(fā)生變化，這時(shí)就需要狀態(tài)管理工具來(lái)管理。

幸運(yùn)的是，我們已經(jīng)有了一個(gè) starter kit，在這個(gè) starter kit 中會(huì)為我們做好相應(yīng)的配置。因此，我們可以直接閱讀代碼來(lái)了解它們的關(guān)系，逐一的了解他們的功能。過(guò)程有點(diǎn)痛苦，結(jié)局便是大豐收。

這一個(gè)過(guò)程里，還有一個(gè)難點(diǎn)是，我們?nèi)鄙贁?shù)據(jù)。這時(shí)候，我們可以用 moco、MockServer 等工具來(lái)做一個(gè)假的服務(wù)器，以向我們的應(yīng)用提供數(shù)據(jù)。

輸入和總結(jié)

編寫應(yīng)用的時(shí)候，我們將一個(gè)又一個(gè)的內(nèi)容放到了腦子里，然后發(fā)現(xiàn)自己混亂了。需要重新理清他們的關(guān)系，這時(shí)候可以選擇寫博客、畫思維導(dǎo)圖、做分享的形式來(lái)整理。

當(dāng)我們向別人講述一個(gè)東西的時(shí)候，就不得不壓迫自己對(duì)此有更深入的了解，要不只能丟臉。這時(shí)候，我們又在重新學(xué)習(xí)這些內(nèi)容，并且比以往的任何時(shí)間更加深入。這也就是為什么我喜歡寫作的原因，它能讓我的思路更加清晰。原本只是散落在房間里的書籍，現(xiàn)在整整齊齊的排列在了書架上。在需要的時(shí)候，我就可以找到想要的內(nèi)容。而由于博客的存在，我可以在未來(lái)輕松地了解這個(gè)框架，別人需要的時(shí)候，也可以直接分享相應(yīng)的經(jīng)驗(yàn)。

等閑了，逛逛官方的文檔，還會(huì)發(fā)現(xiàn)：原來(lái)這個(gè)地方可以這么用；原來(lái)某個(gè)地方還可以做得更好。

其它

假如，我們將前端和后臺(tái)所要求的能力做一些對(duì)比，我們會(huì)發(fā)現(xiàn)前端在高級(jí)領(lǐng)域比后臺(tái)簡(jiǎn)單一些。我的意思是，前端要在編程方面遇到瓶頸更快，并且需要從其他方面來(lái)補(bǔ)充，如后臺(tái)，又或者是用戶體驗(yàn)設(shè)計(jì)。

關(guān)于練手項(xiàng)目

在那一篇《關(guān)于編程，你的練習(xí)是不是有效的》中，我提到，提升技能的項(xiàng)目會(huì)有四種：

• 純興趣驅(qū)動(dòng)的項(xiàng)目。即我的Idea列表上的一個(gè)個(gè)酷炫的項(xiàng)目，先滿足自己再說(shuō)。
• 理論驅(qū)動(dòng)的項(xiàng)目。這一類的項(xiàng)目會(huì)比較少，因?yàn)槲覀冃枰獱繌?qiáng)地驅(qū)動(dòng)出這樣的項(xiàng)目，然后以理論的方式驅(qū)動(dòng)它。
• 興趣結(jié)合理論型。有一個(gè)長(zhǎng)長(zhǎng)的Idea列表，難免有些時(shí)間會(huì)和將要學(xué)習(xí)的理論有很大的交集。這種的練習(xí)效果是最好的。
• 整合成文章、電子書。這一步主要是為了分享、鞏固知識(shí)點(diǎn)、討論。