前端渲染与后端渲染方式大体对比

前后端渲染方式对比

说明

• 项目是后端渲染, PHP直接吐出页面. 现在想移植到安卓上, 我用cordova做了一个壳子, 放下了.然后隐藏了导航栏.
• 但是这根本就称不上是应用, 就是在一个不同的地方打开了浏览器. 所以也就不能调用本地的硬件设备.
• 一期项目就这样了, 正在劝说负责人改架构, 然后就是写了篇对比的文章.希望一切顺利.

还有一点

• 我是JavaScript的绝对拥护者.不服来辩.
• 抛开具体的使用场景, 讨论语言的好坏, 本身就是耍流氓. 来吧, 我们一起耍噻.

技术对比

后端渲染

传统后端渲染的优势与劣势分析

• 优势:
  *. 开发速度快.
• 单独开发，不涉及前端端交互，第一次搭建网站的速度是非常明显的．
• SEO友好度较高: 能够一次性渲染页面,利于搜索引擎抓取
• 在做营销类推广网站的时候, 这一点非常重要.
• 页面第一次呈现速度稍快.
• 第一次只加载一个页面, 以及第一个页面所需要的文件,速度很快.但是每一次加载的速度基本相同的. 可用缓存进行优化
• 用户在网站中,停留时时间较长,点击较多时, 就会体现出劣势.

4. 页面呈现消耗流量教低.

• 第一次加载时,前端渲染会多一个框架, 和其他的一些HTML模板.大约在100KB作用,现在的移动网络网速已经可以让这些大小忽略.

5. 有更多的项目经验

• 存在周期长, 项目中遇到的问题,基本都有人遇到过.容易找到例子.如果都容易解决, 前端也不会成为一种必然的趋势.
  6. 更加安全.
  * 用户无法发现那些隐藏的DOM元素.很难进行XSS攻击.
• 劣势
  1. 可维护性差.
     • 页面一次成型, 后期稍改需求, 就要涉及到后端的大量更改.
  2. 编码效率低.
     • 前后端代码混在一起, 不利于开发.后端没有办法专注数据, 前端没有办法专注视图.
  3. 无法进行跨平台开发.
     • 一旦项目成型, 是什么样,就是什么样.完全没有办法从浏览器移植安卓等系统中.
     • 也就是不能调用相机, 语音等平台设备.

前端渲染

更为先进的前端渲染的优劣势分析.

• 优势

1. 端口分离,专注于自己的事情.

• 前端专注视图, 后端专注数据, 已是大势所趋. 后端渲染现在基本已被淘汰.
  2. 可维护性高
  * 模板成型, 不需要进行后端的字符串拼接, 繁琐, 更容易出现错误.
  * 模板进行同一化的管理, 视图层的改变, 容易更改. 不需要再去后端代码中分离.
  * 需求变更时, 后端在需要时提供数据接口即可. 前端只需更改视图层.
  3. 跨平台
  * 现有技术已经完全能够满足js这门语言, 调用系统设备.
  * 后端渲染的项目, 无法进行跨平台的处理.
  * 前端渲染的项目, 跨平台时, 后端代码完全无需更改, 前端代码复用率可达到百分之七十五以上.效率极高
  4. 响应速度极快.
  * 每一次响应, 改变的只有数据, 所有的DOM元素全部加载完成, 渲染页面非常高效.
• 劣势
  1. 不利于SEO优化.
     • 谷歌浏览器可以对单页面应用进行ajax抓取, 但是国内的搜索环境还太差. 抓取不到需要的数据.
  2. 首次开发成本提高.
     • 后端需要开发一套完整接口.
     • 前端需要开发一套完整模板逻辑.
  3. 首次打开页面, 加载多余的DOM元素.
     • DOM元素一次性加载, 在首次加载时, 时间变长.
  4. 安全性降低
     • 用户在使用攻击时, 更加容易看到隐藏的DOM元素.

现状分析

平台项目大概分析.

• 跨平台
  • 使用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数据库

• 数据库不发生任何更改, 为保证一期项目数据的稳定与正确性.