前后端渲染方式对比
说明
- 项目是后端渲染, PHP直接吐出页面. 现在想移植到安卓上, 我用cordova做了一个壳子, 放下了.然后隐藏了导航栏.
- 但是这根本就称不上是应用, 就是在一个不同的地方打开了浏览器. 所以也就不能调用本地的硬件设备.
- 一期项目就这样了, 正在劝说负责人改架构, 然后就是写了篇对比的文章.希望一切顺利.
还有一点
- 我是JavaScript的绝对拥护者.不服来辩.
- 抛开具体的使用场景, 讨论语言的好坏, 本身就是耍流氓. 来吧, 我们一起耍噻.
技术对比
后端渲染
传统后端渲染的优势与劣势分析
- 优势:
*. 开发速度快. - 单独开发，不涉及前端端交互，第一次搭建网站的速度是非常明显的．
- SEO友好度较高: 能够一次性渲染页面,利于搜索引擎抓取
- 在做营销类推广网站的时候, 这一点非常重要.
- 页面第一次呈现速度稍快.
- 第一次只加载一个页面, 以及第一个页面所需要的文件,速度很快.但是每一次加载的速度基本相同的. 可用缓存进行优化
- 用户在网站中,停留时时间较长,点击较多时, 就会体现出劣势.
- 页面呈现消耗流量教低.
- 第一次加载时,前端渲染会多一个框架, 和其他的一些HTML模板.大约在100KB作用,现在的移动网络网速已经可以让这些大小忽略.
- 有更多的项目经验
- 存在周期长, 项目中遇到的问题,基本都有人遇到过.容易找到例子.如果都容易解决, 前端也不会成为一种必然的趋势.
6. 更加安全.
* 用户无法发现那些隐藏的DOM元素.很难进行XSS攻击. - 劣势
- 可维护性差.
- 页面一次成型, 后期稍改需求, 就要涉及到后端的大量更改.
- 编码效率低.
- 前后端代码混在一起, 不利于开发.后端没有办法专注数据, 前端没有办法专注视图.
- 无法进行跨平台开发.
- 一旦项目成型, 是什么样,就是什么样.完全没有办法从浏览器移植安卓等系统中.
- 也就是不能调用相机, 语音等平台设备.
- 可维护性差.
前端渲染
更为先进的前端渲染的优劣势分析.
- 优势
- 端口分离,专注于自己的事情.
- 前端专注视图, 后端专注数据, 已是大势所趋. 后端渲染现在基本已被淘汰.
2. 可维护性高
* 模板成型, 不需要进行后端的字符串拼接, 繁琐, 更容易出现错误.
* 模板进行同一化的管理, 视图层的改变, 容易更改. 不需要再去后端代码中分离.
* 需求变更时, 后端在需要时提供数据接口即可. 前端只需更改视图层.
3. 跨平台
* 现有技术已经完全能够满足js这门语言, 调用系统设备.
* 后端渲染的项目, 无法进行跨平台的处理.
* 前端渲染的项目, 跨平台时, 后端代码完全无需更改, 前端代码复用率可达到百分之七十五以上.效率极高
4. 响应速度极快.
* 每一次响应, 改变的只有数据, 所有的DOM元素全部加载完成, 渲染页面非常高效. - 劣势
- 不利于SEO优化.
- 谷歌浏览器可以对单页面应用进行ajax抓取, 但是国内的搜索环境还太差. 抓取不到需要的数据.
- 首次开发成本提高.
- 后端需要开发一套完整接口.
- 前端需要开发一套完整模板逻辑.
- 首次打开页面, 加载多余的DOM元素.
- DOM元素一次性加载, 在首次加载时, 时间变长.
- 安全性降低
- 用户在使用攻击时, 更加容易看到隐藏的DOM元素.
- 不利于SEO优化.
现状分析
平台项目大概分析.
- 跨平台
- 使用Cordova技术, 可以在app内调起系统内置浏览器.并隐藏导航栏, 完成现在网站的假象移植.
- 无法使用平台本身的诸多功能, 例如相机, 语音, 定位等功能.
- 后端渲染造成的网站臃肿, 速度慢. 不能完成app应用应有的体验
- 开发速度
- 成型的网站改造, 无需重新搭建平台, 完整的视图层, 成熟的操作数据的方法, 开发速度快.
- 更改架构后, 重新搭建所有的模块, 前期工程速度会有大幅度降低.
- 开发效率
- 后端开发人员既需要操作数据, 又需要维护视图层, 开发维护效率低.
- 前端人员无法独自完成对于代码的维护, 共用一套代码, 开发维护效率低
- 更改项目渲染方式
- 前后端分离
- 前端开发视图, 后端操作数据.
- 需要较长时间周期
- 前端代码需要重新完成, 并完成大量的业务逻辑代码.
- 后端需要整改操作数据的方式, 不再是收到请求, 输出页面,变为收到请求, 操作数据, 返回数据.
- 工程量较大.
- 所有代码重构
- 一次重构过后, 带来的是可跨平台, 维护性, 易用性较高的项目工程
- 前后端分离
前端
整体框架
前端框架采用Vue.js, JavaScript渐进式框架.
- 更小的min包, 只有17kb, 完全不会影响项目大小.
- 更快的渲染方式, 采用最为先进的虚拟DOM, 以最小的代价更改视图层.
- 学习成本低, 类似于angular的MV**方式, 成熟的模板引擎, 不适用当下的React中的JSX语法.
- 成熟的框架, 大量的项目案例, 最够应付任何大小的应用规模.
- 对比React更容易上手, 对比Angular更加的合理与稳定.
跨平台处理
跨平台框架Cordova, 使用HTML,CSS,JavaScript完成多个客户端的开发.
- 只需要一套完整的代码, 就可以完成多个平台的高效复用开发.
- 能够使用js调用多中平台的设备, 例如相机, 音频, 定位等.
- 成熟的开源项目, npm社区中大量的插件存在, 足够应付各种各样的平台需求.
- 对比DCloud, 更加成熟稳定, 不调用任何其他人的方法, 所有的事情掌握在自己这.
- 对比APICloud, 刚刚被DCloud起诉. 产品相似.是否盗版, 不予评价.
- 当需要进行平台移植时, 都断代码无需更改, 前端代码通过cordova 完成百分之七十作用的复用.
后端
语言对比
关于php与node的对比争论. 凡是不考虑情景就讨论语言, 都是刷流氓.
- 网上有太多的争论, 但毋庸置疑的是, PHP是最动态网站最好的语言, 后端渲染的动态网站已经没有在主导市场了.
- 每一种语言对程序员来说, 有时是工具, 有时是信仰. 也许有一天, 我也会这样对JavaScript的地位力挽狂澜吧.
整体框架
采用node中最为成熟的express框架
- 最为简单的路由方式, 接受请求, 异步操作数据, 完成后响应数据.
- 只需要一个node运行环境, 无需任何配置, 所有控制都是通过简单的代码进行的.
- 世界上最大的开源库npm, 新颖, 稳定的插件,都是对项目最大的保证.
数据库
数据库使用MySQL数据库
- 数据库不发生任何更改, 为保证一期项目数据的稳定与正确性.