移动WebApp应用开发

本书主要讲解使用React框架和AntDesignUI进行移动WebApp应用开发技术。

WebApp定义

WebApp与Web最大的区分为：是否有可以执行的任务。如果一个网站没有任何可以执行的任务，单纯是内容的展示与流量，及是普通的Web。

当用户登录一个网站，大家很容易理解这是在访问一个Web App。但是对那些仅仅提供基础服务（如电话查询或是信息查询）的网站，区分用户是否在访问Web App就变得相当困难了。其实这些服务大多都是Web App。我常常这样问自己“这个程序是否完成了某个任务？”。即便它只完成了某个非常小的任务，那么它也是一个Web App。Google的搜索引擎就是一个Web App，它本质上和电话查询服务没有什么区别。

移动WebApp

运行在移动设备上的WebApp，我们称之为移动WebApp。移动WebApp具有更大的灵活性。且相较于需要下载安装后才可以使用的原生App，有更好的推广方式，通过二维码或微信分享即可实现。

在WebApp开发中使用React组件化开发框架，应用ES2017语法进行编码，上层UI使用蚂蚁金服开源的AntDesign进行内容展示。页面路由采用ReactRouter组件。

整体应用采用前后端分类模式，后台具有独立的API服务，使用Nodejs作为后端应用处理服务，后端采用ExpressWeb框架，使用中间件技术实现API对跨域请求的支持，同时采用access_token技术对前端状态进行保持与验证。增强了API服务的整体安全性。数据库采用MySQL，使用JavaScript中的SequelizeORM框架对数据库进行操作，提升数据操作效率。

本书中采用4个移动WebApp作为案例，讲授WebApp的开发基础。

• 会场登记管理系统
• 备忘录
• 留言板
• FriendSpace

本书内容

本书分为四个大模块：

• React基础
• AntDesignUI框架
• 多页面导航
• 产品实战-FriendSpace

在React基础中，详细讲解了React的基本概念和应用方法。尤其对于React的组件化开发概念进行重点讲授。因组件化开发是Web开发中的一种新的开发模式，极大的提高了开发效率。使用组件化开发，可以将一个完整的页面拆分为不同的组件，且这些组件可以进行复用。以类似搭积木的方式快速构建应用成为可能。

AntDesignUI框架即为组件化开发中一个基础UI组件库，该组件库中提供了数十种常用数据展示的组件和API。通过使用该组件库可以快速构建符合移动端设计风格的WebApp产品。

移动WebApp通常为单页面应用，但其因功能负责，需要多个页面多功能进行分区展示，此时便需要内置的页面导航工具，本书中采用React官方推荐的导航器ReactRouter，同时配以AntDesign提供的页面级导航器实现例如TabBar，抽屉导航等效果。

本书最后为一个社交类产品的构建过程实现，从需求分析开始逐步引导并讲解实现过程。让本书学习者最终可以通过所学的知识完成一个产品级应用的联系。本书所涉及案例均已上线。可以通过以下链接进行访问：

• 会场登记管理系统：http:60.205.141.116:60080
• 备忘录：http:60.205.141.116:60081
• 留言板：http:60.205.141.116:60082
• FriendSpace：http:60.205.141.116:60083

以上案例App和API源码均已在github上开源，访问地址为：https://github.com/TuomaXu