前端渲染與後端渲染方式大致對比

先後端渲染方式對比

說明

• 項目是後端渲染, 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數據庫

• 數據庫不發生任何更改, 爲保證一期項目數據的穩定與正確性.