学问


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

NodeJS让前端与后端更友好的分手的更多相关文章

  1. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  2. 架构模式: 服务前端的后端(BFF模式)

    架构模式: 服务前端的后端(BFF模式) 上下文 让我们假设您正在构建一个使用Microservice体系结构模式的在线商店,并且您正在实现产品详细信息页面.您需要开发产品详细信息用户界面的多个版本: ...

  3. 系统架构:Web应用架构的新趋势---前端和后端分离的一点想法

    最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现 ...

  4. [转载]Web前端和后端之区分,以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  5. Web前端和后端之区分,以及…

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  6. [转载]Web前端和后端之区分,以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  7. 看完让你彻底理解 WebSocket 原理,附完整的实战代码(包含前端和后端)

    1.前言 最近有同学问我有没有做过在线咨询功能.同时,公司也刚好让我接手一个 IM 项目.所以今天抽时间记录一下最近学习的内容.本文主要剖析了 WebSocket 的原理,以及附上一个完整的聊天室实战 ...

  8. java前端与后端怎么选??

    想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...

  9. 那些年,我的前端/Java后端书单

    全文为这些年,我曾阅读.深入理解过(或正在阅读学习.即将阅读)的一些优秀经典前端/Java后端书籍.全文为纯原创,且将持续更新,未经许可,不得进行转载.当然,如果您喜欢这篇文章,可以动手点点赞或者收藏 ...

随机推荐

  1. 无法安装HAXM (VT-X is not turned on)

    安装HAXM的时候,VT-X is not turned on. 进入bios查看,已经启动了vt-x.上网搜索发现解决有一部分电脑是因为安装了Hyper-V,解决的方法: 管理员运行cmd,输入如下 ...

  2. ucontext-人人都可以实现的简单协程库

    ucontext的介绍 http://blog.csdn.net/qq910894904/article/details/41911175 协程的介绍 https://en.wikipedia.org ...

  3. 第211天:git和github的区别和使用详解

    一.git 1.什么是git 它是一个源代码管理工具,在一个项目中,凡是由开发人员编写的都算是源代码,源代码有必要管理起来,让源代码可以被追溯,主要记录每次变更了什么,谁主导这次变化.人为的维护比较麻 ...

  4. POJ2699_The Maximum Number of Strong Kings

    这题目,,,真是...诶.坑了好久. 给一个有向图.U->V表示U可以打败V并得一分. 如果一个人的得分最高,或者他打败所有比自己得分高的人,那么此人就是king. 现在给出每个人的得分,求最多 ...

  5. 二分图最大匹配模板(pascal)

    uoj#78. 二分图最大匹配 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这样的条件:第 vv  ...

  6. 【bzoj4712】洪水 树链剖分+线段树维护树形动态dp

    题目描述 给出一棵树,点有点权.多次增加某个点的点权,并在某一棵子树中询问:选出若干个节点,使得每个叶子节点到根节点的路径上至少有一个节点被选择,求选出的点的点权和的最小值. 输入 输入文件第一行包含 ...

  7. java使用Cookie判断用户登录情况

    1.判断是否登录 public boolean isLogin() { Set<Cookie> cookies = this.browser.getCookies(); String JS ...

  8. Codeforces 893F(主席树+dfs序)

    在子树内和距离不超过k是一个二维限制,容易想到主席树,但主席树显然没法查最小值,因为不满足区间可减.kdtree和二维线段树可以干这事,但肯定会T飞.但事实上我们的问题有一个特殊性:对某个点x,查询其 ...

  9. 016 Java中的动态代理

    作者:nnngu GitHub:https://github.com/nnngu 博客园:http://www.cnblogs.com/nnngu 简书:https://www.jianshu.com ...

  10. STL Deque 容器

    STL Deque 容器 Deque简介 deque是“double-ended queue”的缩写,和vector一样都是STL的容器,deque是双 端的,而vector是单端的.         ...