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

先后端渲染方式对比

说明

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

还有一点

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

技术对比

后端渲染

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

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

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

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

1. 有更多的项目经验

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

前端渲染

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

• 优点

1. 端口分离,专一于本身的事情.

• 前端专一视图, 后端专一数据, 已经是大势所趋. 后端渲染如今基本已被淘汰.
  1. 可维护性高
     • 模板成型, 不须要进行后端的字符串拼接, 繁琐, 更容易出现错误.
     • 模板进行同一化的管理, 视图层的改变, 容易更改. 不须要再去后端代码中分离.
     • 需求变动时, 后端在须要时提供数据接口便可. 前端只需更改视图层.
  2. 跨平台
     • 现有技术已经彻底可以知足js这门语言, 调用系统设备.
     • 后端渲染的项目, 没法进行跨平台的处理.
     • 前端渲染的项目, 跨平台时, 后端代码彻底无需更改, 前端代码复用率可达到百分之七十五以上.效率极高
  3. 响应速度极快.
     • 每一次响应, 改变的只有数据, 全部的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数据库

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