开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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

1

来源:cnblog    阅读:388   时间:2015-01-05

学问


 

 

最近“上层建筑”在兴起国学热,所以公司几个月前决定开发一款名叫“学问”的有关于国学的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














本文转自ljianbing51CTO博客,原文链接:http://blog.51cto.com/ljianbing/1624932 ,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Node.js】1.安装步骤
1.在官网找到对应版本下载     2.点击安装   3.检查安装成功 path可以看到node.js的安装目录已经自动配置在环境变量path中了 如果node -v或者node --version不能正确展示当前的版本的话,那就需要用户自己去手动的将node.js的安装路径配置到path变量下。
535 0
node-02-模块-初识
node-02-模块-初识
0 0
Node.js安装与基本使用
Node.js安装与基本使用
0 0
恭喜你,Node后端学习经验值+1
遇到很多都是模块化的写法,之前自己写的时候确实这方面不是很注重,因为自己写自己看,当然怎么舒服怎么来了,它提醒我要**优雅一点~**,但是确实,这么写之后香的一批~
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
蚂蚁聚宝虫洞项目技术方案介绍
立即下载
Hulu基于DASH构建的高清直播系统架构及实践
立即下载
工程师职业发展之我见
立即下载