开始用单页面做WebApp纯属机缘巧合。

当时做创业公司，因为经营状况达不到预期，前端开发跑了，跑的很干脆，连个吻别都木有，后面自然是招人、面试等等按部就班的赶紧搞起来。

因为一直做原生App+WebView封装模板引擎（JSP）开发的H5应用，对前后端分离的理解也只是原生App通过Http(s)协议调用Server请求，从来没接触过Vue，Angular，React等框架，。

招聘中有个面试的小伙子给讲了vue框架的设计思想，说自己做的很好。前5分钟我安静的看着他装逼然后想赶紧结束，第6分钟时，突然醍醐灌顶之感！这家伙给我打开了一扇窗户。透过窗户我看到了外面金黄色的麦、麦田旁边CCAV的记者正在访问一个白胡子老人：您幸福嘛？老农：我不姓福，我姓焦。。。。。有点远了。

上面是背景。好吧，后面的故事是这样的：小伙子最终加薪很多录用，然后一个人顶起来iOS+Android+公众号+后台管理系统+PC网站全部的工作！当然后面实在忙不过来了，又增加人手，这是后话。

当时的方案是基于Vue的实践，App分别封装了iOS和Android的原生壳子（内部初始化加入了微信的X5内核，为了浏览器兼容性），里面所有的业务实现全是Vue框架控制。

公众号H5站跟App内站点是同一个项目部署，仅仅在用户处理部分增加微信账户绑定、openID登录，支付适配等适配内容。这样一套代码可以适配App+公众号H5，节省大量成本。

Vue、Argular和React等单页面模式优点：

1，对比传统模板引擎（JSP，Freemaker等）Web页面直接嵌入App内的方式：

• 基于Ajax请求，业务处理中一般无需页面的跳转（本身就是单页面），加载快，省流量，体验很好。

• vue框架封装好以后，初始化页面一个js、一个css、一个index页面，首页自动加载完成即可使用。后续无需根据页面再去下载静态文件——感觉像原生App吧。当然减少静态文件个数的优化方式，这也是前端的基本功。

• 减轻服务器压力，服务器专心处理业务即可，无需像模板引擎那样处理页面跳转控制、页面生成等一大堆问题。简单明了，前端需要什么数据，通过接口给返回了就是！

• 通过前后端的分离实，Server接口复用度高，一套Server接口，很大程度上能够同时为App、WebApp、公众号、H5触屏版、PC网站等等前端产品提供统一服务。这是原来的模板引擎开发不敢想象的。

• 前后端彻底的分离，让程序员高度分工，前端的专心搞好前端实现、专心研究特效美观，后端处理好业务、注意好处理能力优化就足够了，高度社会化分工是整个人类社会发展趋势，也是我们开发的发展趋势

• 节省人力。如果是多个前端产品线，基于Vue（Angular，React）等实现单页面进行前后端分离以后，根据我的实践直接节省不少岗位！程序员可能不爽，但是你的老板肯定会爱死你们你们团队！

• 模板引擎Web页面开发时，前端可以搭建自己独立的服务器，完全自由控制——跟后端的接合点有且只有接口！这样开发时就不需要依赖后端的帮助，并且代码完全是分离的（其实这里是优点也是缺点，后面会单独说缺点）

话分两头说，缺点：

• 本文一直是基于WebApp的，那么很明显，无论Vue，Angular还是React比起原生的体验都差了好大一截。不过另一方面，比起模板引擎来做WebApp还是要强很多的。

• 启动WebApp时，首页面要加载太多的静态文件（js，css），必然比较慢。优化措施：

1，缓存静态文件到App内，需要更新的时候通过特有接口强制进行更新，缓存好以后由原生App配合强制修改静态文件的请求本地缓存。

2，懒加载，别一次性全加载完，分批次加载！

3，做好文件的压缩，css，js的nginx压缩功能和前端框架本身的压缩机制要用好

• SEO，这是个灾难，百度和谷歌都深恶痛绝。好在WebApp不需要考虑这个，但是用来做网站的话，这个因素要好好考虑了。

• 权限控制由前端控制，比起传统的模板引擎来说，确实没有那么自如了。不过好在实现起来也不难。

• 部署有难度，这个是优点也是缺点。前后端各自部署自己的，开发时需要额外配置nginx来避免跨域问题。这个有机会再展开说一下，也不难。

有些细节的东西，回头我会继续写几篇来补充一下！

最后说一点，创业公司做App的话，特效不关注，体验不要求极致——主要因为你没钱，那么今天这个基于前后端分离的Webapp模式，值的你一试！

有兴趣的同学请继续关注。