AV一区二区三区有码,久久久久久久网之

林老師在群里給大家布置了一個學(xué)習(xí)任務(wù)，為過一段時間的實(shí)戰(zhàn)項(xiàng)目做準(zhǔn)備。

任務(wù)是這樣的：

前臺用 react + redux，后臺用 jersey + mybatis + mysql 寫一個 todolist，可以對 todo 進(jìn)行查看，刪除，新增的功能

作為一個剛剛參加完ThoughtWorks暑期訓(xùn)練營的同學(xué)，我應(yīng)該怎么來完成這個任務(wù)呢?

首先看一下兩天之后部分同學(xué)的進(jìn)展：

”我準(zhǔn)備今天才開始，準(zhǔn)備跟某茹同學(xué)一起合作學(xué)習(xí)。還是以前那種5w1h，然后分享，一天最多兩個技術(shù)吧，這樣想的。想著先搞懂基，然后結(jié)合寫demo?！?/p>

”我是昨天開始學(xué)習(xí)的林老師任務(wù)。昨天主要學(xué)了mySQL，基本知識點(diǎn)差不多了，還沒寫demo練習(xí)，打算從今天開始和某秀同學(xué)結(jié)對學(xué)習(xí)java的相關(guān)東西。jersey + mybatis 我們暫定時間是一個星期，然后開始寫todolist“

”老師，我前幾天了解了一下docker和selenium，昨天看了jersey 后期準(zhǔn)備和某紅同學(xué)結(jié)對學(xué)習(xí)mytalis和mysql以及復(fù)習(xí)java的知識。暫定用一周來了解這些技術(shù)棧?！?/p>

看到同學(xué)們已經(jīng)開始了，有了一個粗略的計劃，并且沒有忘記我們在訓(xùn)練營中學(xué)到的”合作學(xué)習(xí)“、”5w1h“、”分享“、”先寫Demo“等方法，我覺得非常開心，你們很棒！只是我有些擔(dān)心同學(xué)們的意愿是好的，但是在如何把它想得更細(xì)，并劃分成可以有效執(zhí)行的任務(wù)時，會遇到困難。

所以我在這里想聊一下，如果我接到了這個學(xué)習(xí)任務(wù)，我應(yīng)該做什么以及怎么做。同學(xué)們在閱讀的過程中，可以回想一下我們在訓(xùn)練營里所教授的東西，結(jié)合起來，希望在下一次遇到類似的任務(wù)時，也能按類似的方法給自己定出一個詳細(xì)的學(xué)習(xí)計劃。

先在前面說一下我的套路：

明確需求 -> 分解問題 -> 各個擊破 -> 總結(jié)分享 -> 小步快跑，不斷循環(huán)

明確這個學(xué)習(xí)任務(wù)的需求

當(dāng)林老師告訴我們這個學(xué)習(xí)任務(wù)時，我們需要問自己（以及林老師）這幾個問題：

老師為什么要給我們布置這個學(xué)習(xí)任務(wù)？
通過這個任務(wù)，我們要鍛煉哪些軟硬技能？
我們應(yīng)該在什么時間前完成？
我們應(yīng)該學(xué)到什么程度？
我們應(yīng)該使用什么樣的合作方式？自學(xué)，結(jié)對，還是建立一個學(xué)習(xí)小組？
這些學(xué)習(xí)任務(wù)中，哪些是最重要的，必須掌握的，哪些可以延遲？
這看起來是一個比較大的任務(wù)，我怎么對它進(jìn)行拆分？
我怎么知道我掌握了？比如每個小任務(wù)應(yīng)該有什么輸出？
我最近有什么其它的事情要忙，怎么安排我的時間與精力？

這些問題大家都清楚了嗎？至少有一些，我是不太清楚的（比如時間等），等林老師方便的時候問下他。

明確TodoList的需求

回顧一下林老師的任務(wù)：

前臺用 react + redux，后臺用 jersey + mybatis + mysql 寫一個 todolist，可以對 todo 進(jìn)行查看，刪除，新增的功能

可以看到這里分為兩個部分，一是”技術(shù)需求“，另一個是”功能需求“。

技術(shù)需求就是我們要學(xué)習(xí)的，可以稍后再看，我們先看一下功能需求：

寫一個 todolist，可以對 todo 進(jìn)行查看，刪除，新增的功能

這個描述還是不太清楚的，不過我們其實(shí)還有一些背景信息的：之前我們在課堂上應(yīng)該了解過這個著名的http://todomvc.com，所以我覺得這里說的就是上面的例子。如果不太確定，我們可以先看看，然后再問問林老師。

隨便找了個例子（比如http://todomvc.com/examples/angularjs/），看了一下它的demo，實(shí)際操作了一下，看看我們要做成什么樣子。

這里先放個圖：

todomvc

我們可以在上面試試新增、刪除、標(biāo)記為完成、修改等功能，另外要注意底部左邊的"n items left"的數(shù)字會變動，底部右邊幾個按鈕還可以點(diǎn)擊。

這時我可以把這個網(wǎng)址發(fā)給林老師，問問我們是不是要做成這個樣子，底部那些按鈕需不需要做。當(dāng)然，我覺得林老師的回答肯定是，你能做就做，做不完就算了。。。

明確技術(shù)需求

然后我們再看看技術(shù)需求：

前臺用 react + redux，后臺用 jersey + mybatis + mysql

這里列出了主要的技術(shù)點(diǎn)，看起來不多，但是想一想，發(fā)現(xiàn)后面其實(shí)還有很多的隱藏信息：

我們的暑期訓(xùn)練營上剛剛培訓(xùn)完，當(dāng)初教的各種實(shí)踐和方法都要用上吧：分解任務(wù)，提問，畫圖，限時，Demo預(yù)研，等等
語言沒有提（JavaScript和Java），這假設(shè)我們已經(jīng)掌握了足夠的基礎(chǔ)知識。真的嗎？
項(xiàng)目實(shí)踐：構(gòu)建工具，IDE使用，git+github，測試，結(jié)對，合作
這是一個學(xué)習(xí)任務(wù)，所以還有：自學(xué)能力的鍛煉，規(guī)劃與總結(jié)，分享

這樣一想，似乎東西還不少啊。怎么辦？我到底需要學(xué)哪些東西??？

明確技術(shù)點(diǎn)

我們可以先把前面的技術(shù)需求再明確一些，只有再精細(xì)一些，我們才知道到底需要學(xué)習(xí)哪些東西。

這里，我把它們分為了”前端，后端，數(shù)據(jù)庫，工具，其它“五個方面。

前端

語言：ES6 / HTML / CSS
包管理工具：npm
構(gòu)建工具：gulp
資源打包工具：webpack，及相應(yīng)的插件Babel
測試框架：Mocha(推薦)或者Jasmine, nock, supertest
前端框架：react, react-router, redux
AJAX庫：superagent
CSS框架：bootstrap，或者react-bootstrap
可能用到的庫：lodash, async

后端

語言：Java 8
構(gòu)建工具： Gradle(推薦)或者Maven
Rest庫：jersey
應(yīng)用框架：spring, spring boot
操作數(shù)據(jù)庫：mybatis
測試框架：JUnit, AssertJ, NestedRunner
JSON庫：fastjson
數(shù)據(jù)庫遷移工具：flyway

數(shù)據(jù)庫

mysql
圖形管理工具：自行尋找

工具

IDE：Webstorm, IntelliJ IDEA社區(qū)版
版本控制工具：git, github, hub
CI: travis-ci
博客：簡書, markdown
博客客戶端：inoreader(http://jianshu.milkythinking.com/)
效率：IDE快捷鍵，Linux命令行
http api客戶端：如postman，httppie, curl

其它

http協(xié)議，比如各種http code
Restful架構(gòu)

天啊，怎么會這么多，我是不是想多了？當(dāng)然，同學(xué)們可能一開始是想不到這么多的，但是隨著項(xiàng)目進(jìn)行，你會發(fā)現(xiàn)，到最后可能會比這還多。。。

那么有兩個問題：

這些我們都需要在這個任務(wù)中學(xué)嗎？
我們有沒有辦法合作學(xué)習(xí)？

關(guān)于第一個問題，大家留意一下上面加粗的技術(shù)點(diǎn)，就屬于特別重要、必須掌握的，其它的可以參考已有代碼或者根據(jù)自己的情況來定（或者分工，一人學(xué)一些，然后分享給其他人）

關(guān)于第二個問題，我們需要找到組織。

找到組織

我們有十幾位同學(xué)都在做相同的學(xué)習(xí)任務(wù)，我們能不能成立一個或者多個學(xué)習(xí)小組？我們已經(jīng)有：

微信群（不公開）
github組織：https://github.com/organizations/twa-2016-todolist （各位同學(xué)快發(fā)過來你們的github帳號）
論壇：Todolist學(xué)習(xí)任務(wù)討論區(qū) 有問題在論壇上討論啊，老師們會一直盯著（為了防止惡意注冊，目前實(shí)行邀請制，大家把郵箱發(fā)給我）

當(dāng)然，如果你們有自己的學(xué)習(xí)小組，也可以建立自己的github組織或者項(xiàng)目。

找個學(xué)習(xí)的小伙伴

有了組織，但是一個人學(xué)習(xí)還是太孤單，找一個小伙伴吧。兩個人平時可以一起學(xué)習(xí)、討論、寫代碼。

對于這個任務(wù)來說，找一個離自己近的，聊得來的，經(jīng)常能坐在一起交流的同學(xué)更合適一些。

準(zhǔn)備博客

在學(xué)習(xí)的過程中，大家都需要通過寫博客來記錄和分享自己所學(xué)。由于大家在學(xué)差不多的東西，所以可以互相關(guān)注，及時看到別人的成果，節(jié)省自己踩坑和卡住的時間。

有些同學(xué)在csdn或者cnblogs等地方有自己的博客，我推薦大家使用簡書，界面漂亮，寫作體驗(yàn)非常好，能讓人愛上寫作。里面還可以使用markdown語法，寫起來非常方便，另外還可以自動保存，歷史版本比較，最贊的是可以發(fā)布的朋友圈讓人打賞！說不定你寫的東西解決了某個同學(xué)的問題，他一高興打賞你十塊八塊的。

（插播：本文求打賞：）

然后每個人都有了博客，怎么才能最快的知道別人寫了什么新博客呢？推薦使用一個叫inoreader的RSS訂閱服務(wù)，它在安卓和蘋果下都有客戶端，比較好用。把同學(xué)的博客地址貼上去，就可以訂閱了。一旦有新文章，就可以第一時間看到。

這里需要注意的是，簡書并沒有提供rss服務(wù)，不過我們可以使用簡書RSS生成器，把簡書上的用戶地址貼上去，如果正確的話，就能生成相應(yīng)的RSS鏈接，貼到inoreader里就可以啦。

現(xiàn)在知道老師為什么能第一時間知道同學(xué)們寫了什么新博客嗎？

inoreader安卓客戶端

建議大家像老師一樣，把大家的博客（甚至我們的BBS）都訂閱上，需要鏈接的可以找老師，到時候把種子文件導(dǎo)入一下就行了，非常簡單。

Markdown

大家寫博客肯定需要貼一大堆代碼，還有各種標(biāo)題、列表等等，使用普通的富文本編輯器，又麻煩又難控制，最終的效果通常也不怎么好看。

這時我們就可以花半個小時學(xué)習(xí)一下markdown，就可以高效的寫出漂亮的博客了！而且這種語法在github/stackoverflow等各種地方都可以使用，受益終生啊。

需要注意的是，markdown有很多增強(qiáng)版，我們通常使用的是github的版本，參看這里：https://guides.github.com/features/mastering-markdown/

你也可以試試在線的markdown編輯器，可以實(shí)時看到效果，方便學(xué)習(xí)，比如：https://stackedit.io/

IntelliJ IDEA也提供了markdown插件，常用的編輯器如Sublime Text, atom也都有Markdown插件。

分解任務(wù)，制定計劃

前面我們明確了技術(shù)點(diǎn)，但真正動手的時候，我們還需要對它們進(jìn)行進(jìn)一步的細(xì)化，制定出可執(zhí)行、可驗(yàn)證的更小的任務(wù)，才能動手做。在這個過程中，我們往往會發(fā)現(xiàn)一些事前沒有考慮到的問題，產(chǎn)生更多的小任務(wù)。

這里需要注意兩點(diǎn)：

最終的每一個小任務(wù)都是應(yīng)該能在半天左右完成（熟練后一到兩個小時內(nèi)）。這樣可以讓我們在同一時刻需要關(guān)注的事情更少，并且能利用好每天的碎片時間，及時完成，及時分享，每天都能感覺到進(jìn)步。
每個任務(wù)必須有輸出，輸出形式可以根據(jù)任務(wù)類型來定，比如圖形、博客、代碼、視頻、分享、甚至教給別人等等

概念探索類的小任務(wù)

當(dāng)我們第一次看到一個名詞，對它一無所知，或者僅僅是聽說過而已，我們應(yīng)該怎么辦？

不要慌張，也不要隨便找了一篇文章或者一本書就從第一頁一直讀下去，而且要圍繞著這個東西，問一些問題等等：

它是什么？
它能做什么？
它怎么來的？
它有什么重要概念？

先對這些最基本的問題做一定程度的發(fā)散，搜索資料（請使用google）獲得一些信息，同時還會得到一些新的問題，然后再做發(fā)散，直到感覺那些問題或者答案跟我目前想學(xué)習(xí)的東西關(guān)系不大時，就可以及時停止，然后再針對最核心的概念與知識進(jìn)行深入學(xué)習(xí)。

這里以webpack為例，看小波老師是怎么學(xué)習(xí)的。首先小波老師提出了一堆最基礎(chǔ)的問題：

針對webpack的基礎(chǔ)問題

然后找到了它們的答案：

找到了它們的答案

同時又引出了新的問題：

引出新的問題

以及新問題的答案：

新的答案

我們可以看到，其中有的問題很早就結(jié)束了，比如“什么時候出現(xiàn)的？”，這可能是因?yàn)槠浯鸢覆⒉蝗菀姿训剑捎诓皇呛苤匾?，所以就算了?/p>

其它的問題或者答案也可以根據(jù)我們的興趣、精力，以及它與我們當(dāng)前學(xué)習(xí)目標(biāo)的緊密程度，我們來決定是否繼續(xù)追問下去。

比如，這里是小波老師的最終版本：

最后的問題

當(dāng)我們畫完上面這個圖時，我們對于webpack在宏觀上就已經(jīng)有相當(dāng)程度的了解了，足以支持我們當(dāng)成當(dāng)前的學(xué)習(xí)任務(wù)（甚至都可以做個分享出來）。然后我們就可以深入到內(nèi)部，去研究它的核心概念和方法（一般在文檔中都會重點(diǎn)提到），畫出一個“概念關(guān)系圖”。

這里以redux為例（因?yàn)閞edux是必學(xué)，并且概念很多），給出相應(yīng)的“概念關(guān)系圖”：

redux的概念關(guān)系圖

從圖中我們可以看出，里面是真實(shí)的類或者方法的名字，通過連線表示出來它們之間的相互關(guān)系，通過數(shù)字來表示它們之間的調(diào)用順序。

對于我們要研究的東西，相信只要我們能畫出這兩張圖，我們對它的理解就達(dá)到很好的程度，后面再結(jié)合Demo預(yù)研，相信很快就可以掌握。對于jersey, mybatis，甚至mysql，我想大家都可以用上這種方法。

另外，在提問、尋找答案、畫圖的過程中，建議大家和自己的小伙伴一起，這樣效率更高，效果更好。

對于這類小任務(wù)，我們的輸出通常是這些：

自學(xué)提問圖
概念關(guān)系圖
相應(yīng)的博客

功能驗(yàn)證類的小任務(wù)

當(dāng)我們經(jīng)歷了前面的畫圖探索之后，雖然我們對它的整體情況有了一定程度的了解，但是我們還沒有用真實(shí)可執(zhí)行的代碼來驗(yàn)證，這時我們再細(xì)分出一些demo預(yù)研的小任務(wù)。

這些小任務(wù)通常要比較小，從簡單到復(fù)雜，每個小任務(wù)只完成一個功能集中且相對簡單的任務(wù)（比如可以在一到兩個小時內(nèi)完整實(shí)現(xiàn)）。我們會創(chuàng)建一個新的目錄，從零開始，創(chuàng)建一個獨(dú)立、完整、僅包含要驗(yàn)證功能的最小代碼的一個項(xiàng)目，然后把它push到github上，僅自己使用或者分享給同學(xué)。

代碼中除了必要的代碼外，還需要有一個README文件，里面用簡潔的方式說明這個項(xiàng)目是做什么的，怎樣配置和運(yùn)行，有什么注意的地方，以及相關(guān)的資料鏈接等。分享給別人后，別人應(yīng)該不需要再來問你，就可以自己運(yùn)行起來。

在這個過程中，需要特別強(qiáng)調(diào)的幾點(diǎn)：

項(xiàng)目命名非常重要，請盡量使用能夠突出主要目的的關(guān)鍵字。比如我想寫一個最簡單的react項(xiàng)目，那么名字可能是react-hello-world-demo；如果想演示state的使用，那么是react-state-demo；如果想強(qiáng)調(diào)使用的是ES6中的class，那么可以是react-es6-class-hello-world-demo。當(dāng)我們小項(xiàng)目越來越多時，你會覺得這些命名實(shí)在太重要了。
每個項(xiàng)目要完成的功能一定要單一。不論是自己以后使用，還是分享給別人，如果項(xiàng)目中混合了多個功能，基本上就沒法使用，因?yàn)閯e人很難區(qū)分項(xiàng)目到底哪些代碼是為這個功能，哪些是為那個功能，它們之間有沒有聯(lián)系?？梢远嘟ㄒ恍╉?xiàng)目，但是不要混合在一起。
README一定要有，但要簡潔。我們不必假設(shè)使用這個項(xiàng)目的是一個完全不了解它的小白，而應(yīng)該是有一定經(jīng)驗(yàn)的開發(fā)人員。這樣，readme中可能給出一些關(guān)鍵的命令，以及一些需要的注意的點(diǎn)，必要的時候再加一些擴(kuò)展閱讀的鏈接即可。比如：

readme示例
依賴的版本號要明確。比如package.json中，最好使用固定的版本號，比如"react": "15.3.0"，而不要使用默認(rèn)的"react": "^15.3.0"。這是因?yàn)樵趈s的世界里，依賴庫的升級非常容易導(dǎo)致不兼容的現(xiàn)象，而當(dāng)我們在一個比較久的時間之后來運(yùn)行這些代碼，很可能因?yàn)樘嗟膸煊行掳姹径鴮?dǎo)致程序出錯。
當(dāng)我們的demo項(xiàng)目越來越多后，為了方便對它們進(jìn)行分類，我們可以在github上創(chuàng)建一些組織（orgnization），用于存放不同語言的Demo。

如果你不知道怎么做，就到看看老師的demo，找找感覺。我把我的兩個demo orgnization放在上里，你會在上面發(fā)現(xiàn)很多有用的demo：

https://github.com/js-demos (當(dāng)前超過100個demo)
https://github.com/java-demos (當(dāng)前超過20個demo)

js-demos上的項(xiàng)目

java-demos上的項(xiàng)目

（注意，剛才我在查看的過程中，發(fā)現(xiàn)不少項(xiàng)目的README上的名字或者內(nèi)容有錯誤，歡迎同學(xué)們指出。這是因?yàn)槲覄?chuàng)建了一些最基本的demo項(xiàng)目，然后在做新的demo時copy它們導(dǎo)致的）

對于這種類型的任務(wù)，我們的輸出通常是一個github上的demo（可分享給其他同學(xué)），以及，如果過程中我們遇到了坑或者有意思的東西，可以寫一篇博客分享出來。