林老师在群里给大家布置了一个学习任务，为过一段时间的实战项目做准备。

任务是这样的：

前台用 react + redux，后台用 jersey + mybatis + mysql 写一个 todolist，可以对 todo 进行查看，删除，新增的功能

作为一个刚刚参加完ThoughtWorks暑期训练营的同学，我应该怎么来完成这个任务呢?

首先看一下两天之后部分同学的进展：

”我准备今天才开始，准备跟某茹同学一起合作学习。还是以前那种5w1h，然后分享，一天最多两个技术吧，这样想的。想着先搞懂基， 然后结合写demo。“

”我是昨天开始学习的林老师任务。昨天主要学了mySQL，基本知识点差不多了，还没写demo练习，打算从今天开始和某秀同学结对学习java的相关东西。jersey + mybatis 我们暂定时间是一个星期，然后开始写todolist“

”老师，我前几天了解了一下docker和selenium，昨天看了jersey 后期准备和某红同学结对学习mytalis和mysql以及复习java的知识。暂定用一周来了解这些技术栈。“

看到同学们已经开始了，有了一个粗略的计划，并且没有忘记我们在训练营中学到的”合作学习“、”5w1h“、”分享“、”先写Demo“等方法，我觉得非常开心，你们很棒！只是我有些担心同学们的意愿是好的，但是在如何把它想得更细，并划分成可以有效执行的任务时，会遇到困难。

所以我在这里想聊一下，如果我接到了这个学习任务，我应该做什么以及怎么做。同学们在阅读的过程中，可以回想一下我们在训练营里所教授的东西，结合起来，希望在下一次遇到类似的任务时，也能按类似的方法给自己定出一个详细的学习计划。

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

明确需求 -> 分解问题 -> 各个击破 -> 总结分享 -> 小步快跑，不断循环

明确这个学习任务的需求

当林老师告诉我们这个学习任务时，我们需要问自己（以及林老师）这几个问题：

1. 老师为什么要给我们布置这个学习任务？
2. 通过这个任务，我们要锻炼哪些软硬技能？
3. 我们应该在什么时间前完成？
4. 我们应该学到什么程度？
5. 我们应该使用什么样的合作方式？自学，结对，还是建立一个学习小组？
6. 这些学习任务中，哪些是最重要的，必须掌握的，哪些可以延迟？
7. 这看起来是一个比较大的任务，我怎么对它进行拆分？
8. 我怎么知道我掌握了？比如每个小任务应该有什么输出？
9. 我最近有什么其它的事情要忙，怎么安排我的时间与精力？

这些问题大家都清楚了吗？至少有一些，我是不太清楚的（比如时间等），等林老师方便的时候问下他。

明确TodoList的需求

回顾一下林老师的任务：

前台用 react + redux，后台用 jersey + mybatis + mysql 写一个 todolist，可以对 todo 进行查看，删除，新增的功能

可以看到这里分为两个部分，一是”技术需求“，另一个是”功能需求“。

技术需求就是我们要学习的，可以稍后再看，我们先看一下功能需求：

写一个 todolist，可以对 todo 进行查看，删除，新增的功能

这个描述还是不太清楚的，不过我们其实还有一些背景信息的：之前我们在课堂上应该了解过这个著名的http://todomvc.com，所以我觉得这里说的就是上面的例子。如果不太确定，我们可以先看看，然后再问问林老师。

随便找了个例子（比如http://todomvc.com/examples/angularjs/），看了一下它的demo，实际操作了一下，看看我们要做成什么样子。

这里先放个图：

todomvc

我们可以在上面试试新增、删除、标记为完成、修改等功能，另外要注意底部左边的"n items left"的数字会变动，底部右边几个按钮还可以点击。

这时我可以把这个网址发给林老师，问问我们是不是要做成这个样子，底部那些按钮需不需要做。当然，我觉得林老师的回答肯定是，你能做就做，做不完就算了。。。

明确技术需求

然后我们再看看技术需求：

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

这里列出了主要的技术点，看起来不多，但是想一想，发现后面其实还有很多的隐藏信息：

• 我们的暑期训练营上刚刚培训完，当初教的各种实践和方法都要用上吧：分解任务，提问，画图，限时，Demo预研，等等
• 语言没有提（JavaScript和Java），这假设我们已经掌握了足够的基础知识。真的吗？
• 项目实践：构建工具，IDE使用，git+github，测试，结对，合作
• 这是一个学习任务，所以还有：自学能力的锻炼，规划与总结，分享

这样一想，似乎东西还不少啊。怎么办？我到底需要学哪些东西啊？

明确技术点

我们可以先把前面的技术需求再明确一些，只有再精细一些，我们才知道到底需要学习哪些东西。

这里，我把它们分为了”前端，后端，数据库，工具，其它“五个方面。

前端

• 语言：ES6 / HTML / CSS
• 包管理工具：npm
• 构建工具：gulp
• 资源打包工具：webpack，及相应的插件Babel
• 测试框架：Mocha(推荐)或者Jasmine, nock, supertest
• 前端框架：react, react-router, redux
• AJAX库：superagent
• CSS框架：bootstrap，或者react-bootstrap
• 可能用到的库：lodash, async

后端

• 语言：Java 8
• 构建工具： Gradle(推荐)或者Maven
• Rest库：jersey
• 应用框架：spring, spring boot
• 操作数据库：mybatis
• 测试框架：JUnit, AssertJ, NestedRunner
• JSON库：fastjson
• 数据库迁移工具：flyway

数据库

• mysql
• 图形管理工具：自行寻找

工具

• IDE：Webstorm, IntelliJ IDEA社区版
• 版本控制工具：git, github, hub
• CI: travis-ci
• 博客：简书, markdown
• 博客客户端：inoreader(http://jianshu.milkythinking.com/)
• 效率：IDE快捷键，Linux命令行
• http api客户端：如postman，httppie, curl

其它

• http协议，比如各种http code
• Restful架构

天啊，怎么会这么多，我是不是想多了？当然，同学们可能一开始是想不到这么多的，但是随着项目进行，你会发现，到最后可能会比这还多。。。

那么有两个问题：

1. 这些我们都需要在这个任务中学吗？
2. 我们有没有办法合作学习？

关于第一个问题，大家留意一下上面加粗的技术点，就属于特别重要、必须掌握的，其它的可以参考已有代码或者根据自己的情况来定（或者分工，一人学一些，然后分享给其他人）

关于第二个问题，我们需要找到组织。

找到组织

我们有十几位同学都在做相同的学习任务，我们能不能成立一个或者多个学习小组？我们已经有：

• 微信群（不公开）
• github组织：https://github.com/organizations/twa-2016-todolist （各位同学快发过来你们的github帐号）
• 论坛：Todolist学习任务讨论区 有问题在论坛上讨论啊，老师们会一直盯着（为了防止恶意注册，目前实行邀请制，大家把邮箱发给我）

当然，如果你们有自己的学习小组，也可以建立自己的github组织或者项目。

找个学习的小伙伴

有了组织，但是一个人学习还是太孤单，找一个小伙伴吧。两个人平时可以一起学习、讨论、写代码。

对于这个任务来说，找一个离自己近的，聊得来的，经常能坐在一起交流的同学更合适一些。

准备博客

在学习的过程中，大家都需要通过写博客来记录和分享自己所学。由于大家在学差不多的东西，所以可以互相关注，及时看到别人的成果，节省自己踩坑和卡住的时间。

有些同学在csdn或者cnblogs等地方有自己的博客，我推荐大家使用简书，界面漂亮，写作体验非常好，能让人爱上写作。里面还可以使用markdown语法，写起来非常方便，另外还可以自动保存，历史版本比较，最赞的是可以发布的朋友圈让人打赏！说不定你写的东西解决了某个同学的问题，他一高兴打赏你十块八块的。

（插播：本文求打赏：）

然后每个人都有了博客，怎么才能最快的知道别人写了什么新博客呢？推荐使用一个叫inoreader的RSS订阅服务，它在安卓和苹果下都有客户端，比较好用。把同学的博客地址贴上去，就可以订阅了。一旦有新文章，就可以第一时间看到。

这里需要注意的是，简书并没有提供rss服务，不过我们可以使用简书RSS生成器，把简书上的用户地址贴上去，如果正确的话，就能生成相应的RSS链接，贴到inoreader里就可以啦。

现在知道老师为什么能第一时间知道同学们写了什么新博客吗？

inoreader安卓客户端

建议大家像老师一样，把大家的博客（甚至我们的BBS）都订阅上，需要链接的可以找老师，到时候把种子文件导入一下就行了，非常简单。

Markdown

大家写博客肯定需要贴一大堆代码，还有各种标题、列表等等，使用普通的富文本编辑器，又麻烦又难控制，最终的效果通常也不怎么好看。

这时我们就可以花半个小时学习一下markdown，就可以高效的写出漂亮的博客了！而且这种语法在github/stackoverflow等各种地方都可以使用，受益终生啊。

需要注意的是，markdown有很多增强版，我们通常使用的是github的版本，参看这里：https://guides.github.com/features/mastering-markdown/

你也可以试试在线的markdown编辑器，可以实时看到效果，方便学习，比如：https://stackedit.io/

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

分解任务，制定计划

前面我们明确了技术点，但真正动手的时候，我们还需要对它们进行进一步的细化，制定出可执行、可验证的更小的任务，才能动手做。在这个过程中，我们往往会发现一些事前没有考虑到的问题，产生更多的小任务。

这里需要注意两点：

1. 最终的每一个小任务都是应该能在半天左右完成（熟练后一到两个小时内）。这样可以让我们在同一时刻需要关注的事情更少，并且能利用好每天的碎片时间，及时完成，及时分享，每天都能感觉到进步。

2. 每个任务必须有输出，输出形式可以根据任务类型来定，比如图形、博客、代码、视频、分享、甚至教给别人等等

概念探索类的小任务

当我们第一次看到一个名词，对它一无所知，或者仅仅是听说过而已，我们应该怎么办？

不要慌张，也不要随便找了一篇文章或者一本书就从第一页一直读下去，而且要围绕着这个东西，问一些问题等等：

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

先对这些最基本的问题做一定程度的发散，搜索资料（请使用google）获得一些信息，同时还会得到一些新的问题，然后再做发散，直到感觉那些问题或者答案跟我目前想学习的东西关系不大时，就可以及时停止，然后再针对最核心的概念与知识进行深入学习。

这里以webpack为例，看小波老师是怎么学习的。首先小波老师提出了一堆最基础的问题：

针对webpack的基础问题

然后找到了它们的答案：

找到了它们的答案

同时又引出了新的问题：

引出新的问题

以及新问题的答案：

新的答案

我们可以看到，其中有的问题很早就结束了，比如“什么时候出现的？”，这可能是因为其答案并不容易搜到，但由于不是很重要，所以就算了。

其它的问题或者答案也可以根据我们的兴趣、精力，以及它与我们当前学习目标的紧密程度，我们来决定是否继续追问下去。

比如，这里是小波老师的最终版本：

最后的问题

当我们画完上面这个图时，我们对于webpack在宏观上就已经有相当程度的了解了，足以支持我们当成当前的学习任务（甚至都可以做个分享出来）。然后我们就可以深入到内部，去研究它的核心概念和方法（一般在文档中都会重点提到），画出一个“概念关系图”。

这里以redux为例（因为redux是必学，并且概念很多），给出相应的“概念关系图”：

redux的概念关系图

从图中我们可以看出，里面是真实的类或者方法的名字，通过连线表示出来它们之间的相互关系，通过数字来表示它们之间的调用顺序。

对于我们要研究的东西，相信只要我们能画出这两张图，我们对它的理解就达到很好的程度，后面再结合Demo预研，相信很快就可以掌握。对于jersey, mybatis，甚至mysql，我想大家都可以用上这种方法。

另外，在提问、寻找答案、画图的过程中，建议大家和自己的小伙伴一起，这样效率更高，效果更好。

对于这类小任务，我们的输出通常是这些：

• 自学提问图
• 概念关系图
• 相应的博客

功能验证类的小任务

当我们经历了前面的画图探索之后，虽然我们对它的整体情况有了一定程度的了解，但是我们还没有用真实可执行的代码来验证，这时我们再细分出一些demo预研的小任务。

这些小任务通常要比较小，从简单到复杂，每个小任务只完成一个功能集中且相对简单的任务（比如可以在一到两个小时内完整实现）。我们会创建一个新的目录，从零开始，创建一个独立、完整、仅包含要验证功能的最小代码的一个项目，然后把它push到github上，仅自己使用或者分享给同学。

代码中除了必要的代码外，还需要有一个README文件，里面用简洁的方式说明这个项目是做什么的，怎样配置和运行，有什么注意的地方，以及相关的资料链接等。分享给别人后，别人应该不需要再来问你，就可以自己运行起来。

在这个过程中，需要特别强调的几点：

1. 项目命名非常重要，请尽量使用能够突出主要目的的关键字。比如我想写一个最简单的react项目，那么名字可能是react-hello-world-demo；如果想演示state的使用，那么是react-state-demo；如果想强调使用的是ES6中的class，那么可以是react-es6-class-hello-world-demo。当我们小项目越来越多时，你会觉得这些命名实在太重要了。

2. 每个项目要完成的功能一定要单一。不论是自己以后使用，还是分享给别人，如果项目中混合了多个功能，基本上就没法使用，因为别人很难区分项目到底哪些代码是为这个功能，哪些是为那个功能，它们之间有没有联系。可以多建一些项目，但是不要混合在一起。

3. README一定要有，但要简洁。我们不必假设使用这个项目的是一个完全不了解它的小白，而应该是有一定经验的开发人员。这样，readme中可能给出一些关键的命令，以及一些需要的注意的点，必要的时候再加一些扩展阅读的链接即可。比如：

   
   
   readme示例

4. 依赖的版本号要明确。比如package.json中，最好使用固定的版本号，比如"react": "15.3.0"，而不要使用默认的"react": "^15.3.0"。这是因为在js的世界里，依赖库的升级非常容易导致不兼容的现象，而当我们在一个比较久的时间之后来运行这些代码，很可能因为太多的库有新版本而导致程序出错。

5. 当我们的demo项目越来越多后，为了方便对它们进行分类，我们可以在github上创建一些组织（orgnization），用于存放不同语言的Demo。

如果你不知道怎么做，就到看看老师的demo，找找感觉。我把我的两个demo orgnization放在上里，你会在上面发现很多有用的demo：

• https://github.com/js-demos (当前超过100个demo)
• https://github.com/java-demos (当前超过20个demo)

js-demos上的项目

java-demos上的项目

（注意，刚才我在查看的过程中，发现不少项目的README上的名字或者内容有错误，欢迎同学们指出。这是因为我创建了一些最基本的demo项目，然后在做新的demo时copy它们导致的）

对于这种类型的任务，我们的输出通常是一个github上的demo（可分享给其他同学），以及，如果过程中我们遇到了坑或者有意思的东西，可以写一篇博客分享出来。

细分小任务

前方高能。

对于前面提到的技术点，让我们对它们细分吧！

前端

1. 常用ES6语法（比如class, map/reduce/filter等）
2. 使用webpack+babel来支持es6完整语法（如import/export）
3. 使用React在页面上输出"Hello world"
4. 使用React在页面上创建嵌套的两个组件
5. 使用react-router来切换两个内容块
6. 使用CSS或者Bootstrap来进行布局
7. 使用React state的简单例子
8. 纯Redux（不使用react）的简单的”点击按钮数字加1“
9. Redux + react简单的”点击按钮数字加1“
10. 使用superagent向后台发AJAX请求
11. 使用mocha运行最简单的测试
12. 在测试中使用nock模拟http服务器
13. express例子（方便写服务器端来配合前端）
14. 使用gulp来运行webpack打包
15. 使用gulp运行测试

后端

1. 在IDEA中成功运行一个Java程序，输出"Hello World"，使用1.6的语法
2. 在IDEA中写一个最简单的JUnit测试，使用JUnit提供的assertEquals
3. 在IDEA中写一个最简单的JUnit测试，使用assertj
4. 使用gradle/maven来运行一个最简单的hello world程序
5. 使用gradle/maven来运行一个最简单的测试
6. 使用gradle/maven来运行一个有多个第三方依赖库的程序
7. 使用jersey建立一个最简单的api，返回hello world即可
8. 使用spring运行一个hello world，要使用到它的依赖注入功能
9. 使用spring boot创建一个最简单的例子
10. 使用mybatis来连接mysql数据，执行最简单的增删改查功能
11. 使用fastjson进行对象与字符串之间的转换

数据库

1. 在Linux下安装和启动mysql数据库
2. 在Linux命令行下进行常见的数据操作
3. 通过命令行对数据库进行备份
4. 安装mysql桌面管理工具
5. 在mysql桌面管理工具中操作数据库
6. 结合实例使用常用的SQL语句

工具

1. 使用Webstorm进行Javascript项目开发的常用技巧
2. 使用IntelliJ IDEA进行Java项目开发的常用技巧
3. 如何把一个简单Javascript项目部署到Travis-CI上
4. 如何把一个简单Java项目部署到Travis-CI上
5. 如何把一个使用了mysql数据库的Java项目部署到Travis-CI上
6. 简书有什么功能，如何切换成markdown，如何生成rss
7. Markdown的常用标签总结和示例
8. inoreader介绍与使用
9. postman的常用操作
10. httppie的常用操作

其它

1. 如何理解http协议
2. 常用的http code介绍
3. 对Restful的理解

上面的这些任务是我拍脑袋想出来的，可能并不全，以后会根据大家实际遇到的情况进行添加和修改。当然你也可以根据自己的情况，创建不同的小任务，这里仅供参考。

对于这里的每个小任务，大家可以根据自己的情况，来决定输出是什么。只需要记住最重要的一点：你的输出一定是可以分享给其他人的东西。

如何完成一个需要写代码的小任务

对于上面需要写代码的小任务，我们应该怎么做？

没错，你已经测到了，就是我们在训练营中已经练习了一遍又一遍的“基于管道图的任务分解大法”，或者用英文“基于pipeline的tasking大法”。

已经不记得的同学，请阅读下面几篇文章，这都是仝校长的智慧结晶：

• 像机器一样思考（一）—— 宏观的基础
• 像机器一样思考（二）—— 数据的细节
• 像机器一样思考（三）—— 穷尽就是力量
• 像机器一样思考（四）—— 一图抵千言
• 像机器一样思考（五）—— 第一个应用
• 像机器一样思考（六） —— 跨应用思考

以及我们核心的做事方式：

• 编程的精进之法

同时，大家不要忘了：

• 小步快跑
• 估时编程，反思问题
• Test First

那我什么时候才能开始做Todolist？

前面列出来了这么多的小任务，我应该把它们全都（或者大部分都）掌握以后才开始做Todolist吗？

当然不是，如果这样的话，不知道要等多久了。。。

正确的做法是，我们需要开两条线并行前进：

1. Todolist线：完成林老师要求的Todolist功能
2. 小任务线：分解小任务进行demo预研

我们应该从Todolist线开始，如果我们没有遇到问题，那就继续实现功能；当我们遇到了不会的东西时，离开Todolist线，把刚才遇到的问题抽象成一个或多个简单的小问题，转到小任务线，把它们实现出来；然后再回到Todolist线，用刚才学到的知识继续实现。

如果同学们组成了学习小组，我们就可以互相分享小demo，这样就可以省掉了很多自己研究的时间，同时也有了人可以讨论。

有问题及时提

知识至少分为两种：

• 信息型的：没法推理出来，需要搜索或者别人告诉
• 研究型的：可以根据已有信息推理出来，需要自己花时间去想去尝试

对于初学者来说，最浪费我们时间的往往都是信息型的知识。比如需要某个功能但是不知道什么库可以做到，怎么引用它，IDE怎么配置，有什么注意事项，哪里有什么坑，等等，往往一卡就是几个小时。这时候我们需要做的不是自己闷着头，不搞定不睡觉，而是及时提问，说不定几分钟就搞定了呢？

我们有哪些提问和信息获取渠道呢？

• google
• stackoverflow
• 你身边的同学
• 我们专门建立的bbs
• 微信群
• 同学的博客和项目demo
• more ...

比如我可以提前告诉大家一个坑：我创建了一个哪怕非常简单的gradle项目，下载依赖居然卡几个小时，把我坑了很久。后来解决了，发现只要在build.gradle里加上一个jar包仓库的配置即可。当你遇到了同样的问题，问我的话，一分钟就能解决，不问的话，，，哈哈

另外我们在bbs专门创建了To-Do List 学习任务讨论版，有问题第一时间上去问啊，老师们都盯着呢。（已经把这个bbs加入到我的inoreader阅读器里了）

学到了东西及时分享

再强调一下，当你学到了东西，不论是完成了小任务，还是解决了一个问题，一定要花时间把它分享出来。比如写博客，给同学讲，在网上直播写代码，或者在实验室定期组织分享活动，都可以。

也许这会花掉你的一些时间，但是要知道，这在锻炼你的软技能：你的思考能力、信息整理能力、写作能力、表达能力、同理心、公众演讲能力，你的收获可能会比你写的那些代码更大！

及时关注其他同学的输出

像老师一样，在手机上安装一个RSS阅读器（推荐inoreader），把同学们的博客，github，以及bbs全都加进去，这样当你没事的时候，就可以打开看一眼，也许只花10秒种就可以让你省掉几个小时。

最后，祝大家能通过这一个简单的Todolist学习任务，真正学到项目所需要的各种技能。