NodeJS让前端与后端更友好的分手

学问

---

 

 

最近“上层建筑”在兴起国学热，因此公司几个月前决定开发一款名叫“学问”的有关于国学的app。

 

 

APP的详情页面仍是由web来显现具体内容，有些相似于新闻页，图文混排什么的web是最适合干这个的了，因此团队决定用WEB来实现详情页。

 

团队对WEB页的要求是：

• 页面在访问后离线依然能够查看。

• 首屏展示速度要快，不容许长时间白屏或loading。

项目现状

 

后端提供的都是以JSON为数据格式的API接口供Native端使用，一样提供给WEB的也是JSON格式的API接口

 

那么意味着WEB工做流程是

 

1. 打开web，加载基本资源，如CSS，JS等
2. 发起一个ajax请求再到服务端请求数据，同时展现loading
3. 获得json格式的数据后再根据逻辑选择模板渲染出”DOM字符串"
4. 将”DOM字符串”插入页面中webview渲染出DOM结构

 

这些步骤都由用户所使用的设备中逐步执行，也就是说用户的设备性能与APP的运行速度联系的更紧

换句话说就是若是用户的设备很低端，那么APP打开页面的速度会越慢。

 

若是是在PC端的浏览器中基本不成问题，由于如今浏览器性能已经很是好了。但在低端的Android机器上的webview性能可就难说了。

并且离线后还得要查看已访问过的页面，实现最好的方式就是用HTML5的离线存储技术了，但离线存储存的是整个页面的HTML及资源，不会存JSON数据

用本地数据库存把JSON数据也存下来？靠，太复杂了吧...

只能是服务端直接输出HTML结构渲染页面，而不是API输出JSON再由客户端渲染页面。

 

让服务端人员来写页面？

---

 

 

确实能够依照之前老的方式，本身写出HTML的静态页面交给服务端人员，再套上JSP或PHP服务端语言，可是..

因为服务端人员对前端HTML结构不熟悉套代码时形成各类错误常常出现。并且很难找出BUG，相信作前端的程序猿应该都体会过..

也有不少前端人员不得不开始学习JSP或PHP来应付这样的场景，全栈工程师么-_-!..

 

 

 

一种折中的解决方案

---

 

我看到过某些公司的某些页面，在首屏页面head的某个<script>中输出大量的JSON数据

大概是这样

<script>
     var _jsonData = [{a: 1}, {a: 2}, …];
</script>

 

 

我猜想大概是想省去首屏发起ajax请求，直接将JSON输出到页面中，由JS来完成DOM构建。

这样在必定程度上提升了首屏渲染速度，前端人员又不用去写服务端程序

 

我没用这种方式，由于没人管我，我就是这么任性..

 

 

 

Er...更激进的解决方案

---

 

关注NodeJS好久了一直没怎么用，并且NodeJS已经发展了不少年，如今大公司应用的愈来愈多，能够参考NodeJS应用公司列表-》

作为前端人员，NodeJS真的很容易上手，语法就是JAVASCRIPT么。

据说淘宝啊什么的前端人员已经开始用NodeJS这么作了，大公司就是先进啊。嗯，咱们盛大文学也是大公司-_-!，那么上吧骚年！

用NodeJS来作为桥梁架接服务器端API输出的JSON。如图：

 

浏览器(webview)再也不直接请求JSP的API，而是

• 浏览器请求服务器端的NodeJS
• NodeJS再发起HTTP去请求JSP
• JSP依然原样API输出JSON给NodeJS
• NodeJS收到JSON后再渲染出HTML页面
• NodeJS直接将HTML页面flush到浏览器

 

这样，浏览器获得的就是普通的HTML页面，而不用再发ajax去请求服务器了。

 

这样作的好处：

• app的WEB页能够实现离线存储技术
• 页面首屏渲染更快
• 因为NodeJS与页面在同一个域名下，因此就不用跨域了，而不用HTML5输出头信息这样的方式去实现跨域了
• 服务端与客户端逻辑都由前端人员控制都是使用JAVASCRIPT语言，前端程序猿能够更好的控制和优化，套页面什么的不容易出错
• 真正服务端程序人员不须要再关心页面的渲染逻辑，仅须要关心数据的处理

 

这样作的坏处：

• 增长了前端人员的工做
• 前端人员须要对服务端程序有必定的了解
• 服务端须要架起NodeJS服务
• 经过NodeJS架接后台服务过程当中通讯时间上必然有一部分损失

 

好在NodeJS安装比较简单，各类插件也很是丰富

 

项目中实际应用经验

---

 

用ExpressJS框架搭建NodeJS的WEB服务感受棒棒哒！

真的很简单，三下两下就搞定了，我这么菜的人都行，说明真的很简单！

注意点：

页面中动态部分，如：评论，阅读人数，赞的人员等这些动态数据仍是须要用ajax请求

这些动态数据须要动态的插入DOM中不然这些数据会被离线存储给缓存住，每次打开都是同样的数据不会再更新，

除非.appcache文件更新，这样确定不合理，嗯对，就是不合理

因此那些动态数据仍是能够根据原先的逻辑去直接请求JSP或PHP之类的服务端提供的API接口，固然跨域什么的就看项目需求与项目环境了。

 

ExpressJS中默认的模板是EJS，而浏览器中我使用的是artTemplate.js，好吧我真的喜欢artTemplate.js

一查发现artTemplate也有NodeJS版本的，就这样服务端与浏览器端均可以使用artTemplate来作为渲染模板了，能够说是无缝啊，嘿嘿

 

最后要说的

第一次在正式项目中使用NodeJS仍是挺兴奋的，感受前端的路子又多了一条。

第一次麻，都紧张，都快....

er..就怕因为对NodeJS的不了解最后形成致命的错误，而致使项目延期。

 

 

如今已经上线了目前只有Android版本，扫一扫便可

 

 

===================================================================

转载处请注明：博客园(池中物,王二狗)willian12345@126.com