修改链接错误

9-ejs.md → 10-client-render.md

@@ -1,4 +1,4 @@
-# 延迟html渲染时机
+# 延迟html渲染时机(客户端渲染数据)
 
 ./routes/posts.js里调用res.render函数处理用户的请求时，提供数据和ejs模板并最终交给了ejs引擎去构建html页面，然后再把页面返回给发出请求的用户。
 

10-render-timer.md → 11-render-timer.md

@@ -1,4 +1,4 @@
 # 客户端渲染与服务器渲染的对比
 
-
+todo:
 

2-what-is-webapp.md

@@ -1,58 +1,46 @@
-## 基于Express创建WebAPP
+# 什么是WebApp？
 
-#### 安装express
+WebAPP到底是什么？WebAPP是近年来比较流行的词。
 
-```
-$ npm install -g express-generator@4
-```
+相信大家对网站都很熟悉，我们每天都在浏览网页。网站技术从最早的静态网页发展到可交互的动态网页。在以前只能通过PC浏览器浏览网页，现在还还可以使用手机浏览器，甚至有的手机APP内置了浏览器内核，通过手机App也可以访问网页。
 
--g 是global的意思。表示npm安装express-generator@4时会安装到全局位置。当你打开终端后，可以在任意一个目录下执行express。
+说到手机，大家每天用的微信称为NativeApp。NativeApp是一种基于手机操作系统iOS、Android来开发的应用程序。NatvieApp一般在下载后，在没有网络的情况下也可以在手机上独立运行、计算，比如计算器、音视频播放器，日历、单机版游戏等。NatvieApp有独立的安装包。相对于网站，网页并没有安装包，通过浏览器并输入网址，这个过程是从浏览器发了一个请求给服务器并从服务器获得网址对应的页面，网页绝对依赖于网络。
 
-express-generator@4中的4是版本代号，表示安装版本为4的express。express是从版本1一致演进到版本4。选择版本4是最新版本。
+网页就是HTML页面，传统的HTML页面只能在PC浏览器上运行，在手机上运行显示上会出现格式问题。但是，现在CSS技术的发展足矣保证HTML页面无论是在PC浏览器还是手机浏览器上都能正常显示，加上手机浏览器的手势操作，在手机上操作网页变得非常的简单。
 
-#### 创建一个新的WebApp
+网页在手机上像NativeApp一样显示和操作，从用户的角度网页和NatvieApp的页面似乎没太多差异，更像一个APP。但是光从网页显示形态和手势操作两点并不能增强网页的能力。如今，浏览器技术的发展非常快，通过浏览器提供的能力，网页还能获得设备操作系统很多权限，比如：文件系统权限、摄像头访问权限、音频访问权限、传感器设备权限等等。有了这些操作权限，网页才能像NativeApp一样发挥更多的作用。所以，我们把这种Web技术的应用称为WebApp。
 
-* 进入你任何一个平时工作或学习用的文件夹
+下面比较一下WebApp和NativeApp之间的特点。
 
-```
-$ cd your_work_directory
-```
+1. NatvieApp和WebApp都能在手机上完美显示，NativeApp使用操作系统提供的UI框架构建页面，WebAPP使用HTML和CSS技术构建页面。
 
-* 创建first-app文件夹
+2. NativeAPP的运行依赖设备操作系统，WebAPP依赖浏览器运行。
 
-```
-$ mkdir first-app
-```
+3. NativeAPP有独立的安装包，WebAPP的页面需要从服务端获取并在浏览器运行。
 
-目录first-app就是你的工程文件夹。
+4. NativeAPP在无网络的情况下也可以单机运行，WebAPP没有网络页面都打不开。
 
-* 进入first-app目录
+5. NativeAPP不一定需要server的支持，WebAPP一定需要一个server提供页面和数据。
 
-```
-$ cd first-app
-```
+从开发WebAPP的角度，WebApp包涵两部分，client端和server端。client端提供用户可见的部分 — HTML页面，server端提供用户不可见的部分 — 数据。在技术圈长听到前后端分离的概念，其实指的就是client端和server端的分离，但不管怎么分离，client端一定需要一个server来提供页面，还要有一个server端为client端提供数据。所以，client端和server端分离只是把提供数据的server分离出来而已。
 
-* 在当前目录执行express来创建一个基于Express的WebApp
+> client端需要一个server来提供页面这种行为还可以利用其它一些技术，比如，利用nginx直接返回html文件，apache也可以做到，部署到cdn上也可以做到。这三种技术都比自己运行server返回页面要更快。但弊端就是不够灵活，需要人工手动更新。一般各个公司的主页为了加载更快都采用cdn技术。
 
-```
-$ express --view=ejs
-```
+前后端分离并不是唯一的技术选择，在一些中小型项目前后端还是可以一体的，怎么进行技术选型完全看项目而定。
 
-执行express后，要注意观察输出的信息，特别是install dependencies和run the app的信息。后面会用到。
+当你想独自开发一款WebApp，不管采用哪种技术，所有事情都是你自己干。那开发一个WebApp都要干些什么事呢？
 
-#### 安装first-app的依赖包
+下面通过一些行为来分析开发WebApp都需要做什么？
 
-```
-$ npm install
-```
+1. 处理路由能力。一个网站都会提供多个地址的访问能力，比如[https://xinshengdaxue.com](https://xinshengdaxue.com)可以访问新生大学的主页，[https://web.xinshengdaxue.com/home/lessons](https://web.xinshengdaxue.com/home/lessons)可以访问所有课程页面。一个地址代表一个访问路径，一般称为路由，WebApp必须具备分析不同路由的能力。
 
-#### 运行first-app
+2. 构建页面能力。WebAPP提供页面是最基本的能力，构建HTML就是开发中最重要的工作，也是最繁重的工作。正因为繁重，在技术才才会采用前后端分离的开放模式，提供HTML页面的client端由前端工程师完成，提供数据的server端由服务端工程师完成。
 
-```
-$ DEBUG=first-app:* npm start
-```
+3. 操作浏览器能力。浏览器提供了很多功能，常见的有cookie和storge。cookie和storege都是浏览器的存储技术，利用这些技术可以在浏览器端缓存一些必要的信息。这些技术都可以通过查阅HTML5 API文档获得。
 
-#### 预览结果
+4. 提供页面和数据能力。如果前后端一体化开发时，WebApp的server端必须提供页面和数据，以供client端可以构建丰富的页面，以及存储用户操作带来的变化数据。
 
-浏览器打开 localhost:3000
+5. 持久化数据能力。server端存储数据是基本的能力，一般采用第三方数据库来完成。常用的数据库有mysql，sqlite，mongodb等。开发中小型项目，选择一个最熟悉的数据库即可。
+
+如果想学习开发WebApp，以上5点将是学习的主要方向，至于采取什么形式来构建WebAPP就无所谓了，选择一门感兴趣的技术即可。
 

21-good-api.md

@@ -0,0 +1,3 @@
+# 更好的错误处理
+
+todo:

22-good-error.md

@@ -0,0 +1 @@
+todo:

3-create-webapp.md

@@ -1,101 +1,58 @@
-## 项目结构
-总览
-```
-- ../my_project/first-app/          # 工程目录
-    - bin/                          # 存放命令行相关代码
-        www                         # express的入口文件
-    - public/                       # 存放静态资源
-        javascripts
-        images
-        + stylesheets
-    - routes/                       # 存放路由逻辑
-        index.js
-        users.js
-    - views/                        # 存放页面模板
-        index.ejs
-        layout.ejs
-        error.ejs
-    package.json                    # 配置文件
-    app.js                          # 主程序文件
+## 基于Express创建WebAPP
 
-```
-#### /bin
+#### 安装express
 
 ```
-./bin
-./bin/www
+$ npm install -g express-generator@4
 ```
 
-目录`./bin`下只有一个文件`www`,文件`www`是整个first-app的入口文件（也可称为first-app的启动文件），运行first-app时要指定运行该文件，然后由该文件的内部代码去调用./app.js。
-
-#### /public
-
-```
-./public
-./public/javascripts
-./public/images
-./public/stylesheets
-./public/stylesheets/style.css
-```
+-g 是global的意思。表示npm安装express-generator@4时会安装到全局位置。当你打开终端后，可以在任意一个目录下执行express。
 
-目录/public是WebAPP存放静态资源的地方。这些静态资源包含css文件、浏览器运行的js文件、图片文件等。静态资源不需要设置任何路由就能直接通过链接访问。
+express-generator@4中的4是版本代号，表示安装版本为4的express。express是从版本1一致演进到版本4。选择版本4是最新版本。
 
-比如通过\`[http://localhost:3000/stylesheets/style.css\`](http://localhost:3000/stylesheets/style.css`) 可以在浏览器直接读取style.css，这样做的目的是方便浏览器再解析html页面时更方便得获得静态资源。
+#### 创建一个新的WebApp
 
-#### /routes
+* 进入你任何一个平时工作或学习用的文件夹
 
 ```
-./routes
-./routes/index.js
-./routes/users.js
+$ cd your_work_directory
 ```
 
-目录`./routes`是处理所有路由逻辑的地方。
-
-后面详细讲解了什么是路由。
-
-#### /views
+* 创建first-app文件夹
 
 ```
-./views
-./views/index.ejs
-./views/layout.ejs
-./views/error.ejs
+$ mkdir first-app
 ```
 
-目录`./views`是放置页面模板的地方。WebAPP要给用户返回html页面时，都是用`./views`中页面模板来生成html文件。
+目录first-app就是你的工程文件夹。
 
-#### 配置文件
+* 进入first-app目录
 
 ```
-./package.json
+$ cd first-app
 ```
 
-文件`./package.json`是整个WebApp的管理依赖包的地方。
-
-> 依赖包：当WebApp需要调用别人已经开发好的模块时，就需要将模块名和版本号写到到package.json里。这个模块就是WebAapp的依赖包，或称为依赖模块。
-
-除了管理依赖包，package.json还有WebAapp的名字和版本号信息。
-
-另外，还有一些脚本信息。比如，上一节提到的运行项目的指令。
+* 在当前目录执行express来创建一个基于Express的WebApp
 
 ```
-DEBUG=first-app:* npm start
+$ express --view=ejs
 ```
 
-npm start中的start就是在package.json中定义的一个脚本。
-
-执行`npm start`，事实上是在执行`node ./bin/www`。
+执行express后，要注意观察输出的信息，特别是install dependencies和run the app的信息。后面会用到。
 
-每一个项目都是不同开发同学开发的，项目的入口文件可能都不同，如果大家都遵循一种原则，在package.json中配置好start的执行脚本，那么别人就知道直接执行npm start就可以运行项目了。
+#### 安装first-app的依赖包
 
-如果有必要，还可以在"script"结构里扩展更多的脚本。
+```
+$ npm install
+```
 
-#### 主程序文件
+#### 运行first-app
 
 ```
-./app.js
+$ DEBUG=first-app:* npm start
 ```
 
-前面提过`/bin/www`文件是整个WebApp的启动文件，在`/bin/www`文件中最核心的代码是调用`./app.js`，而整个WebApp最核心的代码就是`./app.js`。
+#### 预览结果
+
+浏览器打开 localhost:3000
 

4-project-construction.md

@@ -1,92 +1,101 @@
-# 认识路由
-
-在浏览器中输入`localhost:3000/`和`localhost:3000/users`，分别会看到不同的页面。first-app对两个不同的地址请求做出了不同的反应。
-
-当first-app收到浏览器的请求后，会对`/`和`/users`做出不同的反应，换句话说是会针对不同的路由执行不同的代码。判断是`/`后就执行routes/index.js，判断是`/users`后就执行routes/users.js。
+## 项目结构
+总览
+```
+- ../my_project/first-app/          # 工程目录
+    - bin/                          # 存放命令行相关代码
+        www                         # express的入口文件
+    - public/                       # 存放静态资源
+        javascripts
+        images
+        + stylesheets
+    - routes/                       # 存放路由逻辑
+        index.js
+        users.js
+    - views/                        # 存放页面模板
+        index.ejs
+        layout.ejs
+        error.ejs
+    package.json                    # 配置文件
+    app.js                          # 主程序文件
 
-假如输入localhost:3000/posts，first-app并没有处理`/posts`，会返回错误页面的处理。
+```
+#### /bin
 
-![](/assets/route-map.png)
+```
+./bin
+./bin/www
+```
 
-## 加载路由的逻辑处理模块
+目录`./bin`下只有一个文件`www`,文件`www`是整个first-app的入口文件（也可称为first-app的启动文件），运行first-app时要指定运行该文件，然后由该文件的内部代码去调用./app.js。
 
-在first-app/app.js文件中有如下代码。
+#### /public
 
 ```
-var index = require('./routes/index');
-var users = require('./routes/users');
+./public
+./public/javascripts
+./public/images
+./public/stylesheets
+./public/stylesheets/style.css
 ```
 
-通过require\(\)分别加载了./routes/index和./routes/users两个文件模块。这两个文件模块是处理路由的逻辑文件。
+目录/public是WebAPP存放静态资源的地方。这些静态资源包含css文件、浏览器运行的js文件、图片文件等。静态资源不需要设置任何路由就能直接通过链接访问。
 
-## 设置路由和逻辑处理模块
+比如通过\`[http://localhost:3000/stylesheets/style.css\`](http://localhost:3000/stylesheets/style.css`) 可以在浏览器直接读取style.css，这样做的目的是方便浏览器再解析html页面时更方便得获得静态资源。
 
-在first-app/app.js文件中设置了路由和逻辑处理模块的关系。
+#### /routes
 
 ```
-var index = require('./routes/index');
-var users = require('./routes/users');
+./routes
+./routes/index.js
+./routes/users.js
+```
 
-...
+目录`./routes`是处理所有路由逻辑的地方。
 
-app.use('/', index);
-app.use('/users', users);
+后面详细讲解了什么是路由。
 
-...
+#### /views
+
+```
+./views
+./views/index.ejs
+./views/layout.ejs
+./views/error.ejs
 ```
 
-当用户输入地址localhost:3000/（路由为/） 就执行 index模块，如果输入地址 localhost:3000/users （路由为/users）就执行 users模块。除了`/`和`/users`之外就没有处理其他路由的模块。
+目录`./views`是放置页面模板的地方。WebAPP要给用户返回html页面时，都是用`./views`中页面模板来生成html文件。
 
-在first-app/app.js中针对其他路由都会执行统一的代码并返回一个错误页面。
+#### 配置文件
 
 ```
-// catch 404 and forward to error handler
-
-app.use(function(req, res, next) {
-  var err = new Error('Not Found');
-  err.status = 404;
-  next(err);
-});
+./package.json
 ```
 
-输入 localhost:3000/posts，因为`/posts`并没有被处理，所以返回错误页面。
+文件`./package.json`是整个WebApp的管理依赖包的地方。
+
+> 依赖包：当WebApp需要调用别人已经开发好的模块时，就需要将模块名和版本号写到到package.json里。这个模块就是WebAapp的依赖包，或称为依赖模块。
 
-## 路由和逻辑处理
+除了管理依赖包，package.json还有WebAapp的名字和版本号信息。
 
-路由`/`对应的逻辑模块是routes/index.js。一般情况下`/`路由对应的页面成为首页（或主页）。
+另外，还有一些脚本信息。比如，上一节提到的运行项目的指令。
 
 ```
-/* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
-});
+DEBUG=first-app:* npm start
 ```
 
-把字符串"Express"修改为字符串"my first WebApp"，
+npm start中的start就是在package.json中定义的一个脚本。
 
-在终端输入快捷组合键`ctrl + c`可以停止运行first-app服务。然后，再执行运行指令运行服务。
-
-```
-输入ctrl + c
+执行`npm start`，事实上是在执行`node ./bin/www`。
 
-$ DEBUG=first-app:* npm start
-```
+每一个项目都是不同开发同学开发的，项目的入口文件可能都不同，如果大家都遵循一种原则，在package.json中配置好start的执行脚本，那么别人就知道直接执行npm start就可以运行项目了。
 
-刷新浏览器页面，路由`/`对应的页面在显示上发生了相应的变化。
+如果有必要，还可以在"script"结构里扩展更多的脚本。
 
-路由`/users`对应的逻辑模块是`/routes/users.js`。
+#### 主程序文件
 
 ```
-/* GET users listing. */
-
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
-});
+./app.js
 ```
 
-将“respond with a resource”修改为“zhangsan, lisi, wangermazi”，重新运行first-app再刷新页面看结果。
-
-## 事例
-
-参考事例 [first-app-sample-1](https://github.com/xugy0926/learn-webapp-sample/tree/master/first-app-sample-1)
+前面提过`/bin/www`文件是整个WebApp的启动文件，在`/bin/www`文件中最核心的代码是调用`./app.js`，而整个WebApp最核心的代码就是`./app.js`。