一起玩轉微服務(9)——前後端分離

前後端分離

在傳統的web應用開發中,大多數的程序員會將瀏覽器作為前後端的分界線。將瀏覽器中為用戶進行頁面展示的部分稱之為前端,而將運行在服務器,為前端提供業務邏輯和數據準備的所有代碼統稱為後端。 由於前後端分離這個概念相對來說剛出現不久,很多人都是只聞其聲,不見其形,所以可能會對它產生一些誤解,誤以為前後端分離只是一種web應用開發模式,只要在web應用的開發期進行了前後端開發工作的分工就是前後端分離。 其實前後端分離並不只是開發模式,而是web應用的一種架構模式。在開發階段,前後端工程師約定好數據交互接口,實現并行開發和測試;在運行階段前後端分離模式需要對web應用進行分離部署,前後端之前使用HTTP或者其他協議進行交互請求。 前後端分離原則,簡單來講就是前端和後端的代碼分離也就是技術上做分離。推薦的模式是最好直接採用物理分離的方式部署,進一步促使進行更徹底的分離。不要繼續以前的服務端模板技術,比如JSP ,把Java JS HTML CSS 都堆到一個頁面里,稍複雜的頁面就無法維護。

好處

這種分離模式的方式有幾個好處:

•前後端技術分離,可以由各自的專家來對各自的領域進行優化,這樣前端的用戶體驗優化效果會更好。•分離模式下,前後端交互界面更加清晰,就剩下了接口和模型,後端的接口簡潔明了,更容易維護。•前端多渠道集成場景更容易實現,後端服務無需變更,採用統一的數據和模型,可以支撐前端的web UI\ 移動App等訪問。

前後端分離意味着,前後端之間使用 JSON 來交流,兩個開發團隊之間使用 API 作為契約進行交互。從此,後台選用的技術棧不影響前台。 前後端分離並非僅僅只是前後端開發的分工,而是在開發期進行代碼存放分離、前後端開發職責分離,前後端能夠獨立進行開發測試;在運行期進行應用部署分離,前後端之間通過HTTP請求進行通訊。前後端分離的開發模式與傳統模式相比,能為我們提升開發效率、增強代碼可維護性,讓我們有規劃地打造一個前後端並重的精益開發團隊,更好地應對越來越複雜多變的Web應用開發需求。 前後端分離的核心:後台提供數據,前端負責显示。

常見的前端

AngularJS

Angular JS (Angular.JS) 是一組用來開發 Web 頁面的框架、模板以及數據綁定和豐富 UI 組件。它支持整個開發進程,提供 Web 應用的架構,無需進行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流瀏覽器,與 jQuery 配合良好。

數據綁定可能是 AngularJS 最酷最實用的特性。它能夠幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的 Web 應用可能包含了 80% 的代碼用來處理,查詢和監聽 DOM。數據綁定使得代碼更少,你可以專註於你的應用。

傳統來說,當 Model 變化了。 開發人員需要手動處理 DOM 元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面,Model 變化驅動了 DOM 中元素變化,另一方面,DOM 元素的變化也會影響到 Model。這個在用戶互動中更加複雜,因為開發人員需要處理和解析這些互動,然後融合到一個 Model 中,並且更新 View。這是一個手動的複雜過程,當一個應用非常龐大的時候,將會是一件非常費勁的事情。

特性二:模板

在 AngularJS 中,一個模板就是一個 HTML 文件。但是 HTML 的內容擴展了,包含了很多幫助你映射 Model 到 View 的內容。

HTML 模板將會被瀏覽器解析到 DOM 中。DOM 然後成為 AngularJS 編譯器的輸入。AngularJS 將會遍歷 DOM 模板來生成一些指導,即,directive(指令)。所有的指令都負責針對 View 來設置數據綁定。

我們要理解 AuguarJS 並不把模板當做 String 來操作。輸入 AngularJS 的是 DOM 而非 string。數據綁定是 DOM 變化,不是字符串的連接或者 innerHTML 變化。使用 DOM 作為輸入,而不是字符串,是 AngularJS 區別於其它的框架的最大原因。使用 DOM 允許你擴展指令詞彙並且可以創建你自己的指令,甚至開發可重用的組件。

特性三:MVC

針對客戶端應用開發 AngularJS 吸收了傳統的 MVC 基本原則。MVC 或者 Model-View-Controll 設計模式針對不同的人可能意味不同的東西。AngularJS 並不執行傳統意義上的 MVC,更接近於 MVVM(Model-View-ViewModel)。

特性四:依賴注入(Dependency Injection,即 DI)

AngularJS 擁有內建的依賴注入子系統,可以幫助開發人員更容易的開發,理解和測試應用。

DI 允許你請求你的依賴,而不是自己找尋它們。比如,我們需要一個東西,DI 負責找創建並且提供給我們。

特性五:Directives(指令)

指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情?那麼 AngularJS 可以做到。
指令可以用來創建自定義的標籤。它們可以用來裝飾元素或者操作 DOM 屬性。

2. React

React 是一個用於構建用戶界面的 JAVASCRIPT 庫。
React 主要用於構建UI,很多人認為 React 是 MVC 中的 V(視圖)。
React 起源於 Facebook 的內部項目,用來架設 Instagram 的網站,並於 2013 年 5 月開源。
React 擁有較高的性能,代碼邏輯非常簡單,越來越多的人已開始關注和使用它。
使用 React 可以將一些簡短、獨立的代碼片段組合成複雜的 UI 界面,這些代碼片段被稱作“組件”。

React特點

  1. 聲明式設計 −React採用聲明範式,可以輕鬆描述應用。

  2. 高效 −React通過對DOM的模擬,最大限度地減少與DOM的交互。

  3. 靈活 −React可以與已知的庫或框架很好地配合。

  4. JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ,但我們建議使用它。

  5. 組件 − 通過 React 構建組件,使得代碼更加容易得到復用,能夠很好的應用在大項目的開發中。

  6. 單向響應的數據流 − React 實現了單向響應的數據流,從而減少了重複代碼,這也是它為什麼比傳統數據綁定更簡單。

Vue.js

Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層, 採用自底向上增量開發的設計。

Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

 

 

Kotlin

Kotlin 是一種在 Java 虛擬機上運行的靜態類型編程語言,被稱之為 Android 世界的Swift,由 JetBrains 設計開發並開源。

Kotlin 可以編譯成Java字節碼,也可以編譯成 JavaScript,方便在沒有 JVM 的設備上運行。

在Google I/O 2017中,Google 宣布 Kotlin 成為 Android 官方開發語言。

 

5. Flutter

 

Flutter 由 Google 的工程師團隊打造,用於創建高性能、跨平台的移動應用。Flutter 針對當下以及未來的移動設備進行優化,專註於 Android and iOS 低延遲的輸入和高幀率。

Flutter 可以給開發者提供簡單、高效的方式來構建和部署跨平台、高性能移動應用;給用戶提供漂亮、快速、jitter-free 的 app 體驗。

Flutter 的主要組件:

  • 一個高度優化, mobile-first 2D 渲染引擎 (保護對 text 優秀的支持 )

  • 一個 functional-reactive 框架 (可選的,你也可以引入你自己的框架)

  • 一組 Material Design 部件 (可選的,你也可以引入你自己的部件)庫 ,工具,和一個用於 Atom 的插件。

6. .Net

.NET是 Microsoft XML Web services 平台。XML Web services 允許應用程序通過 Internet 進行通訊和共享數據,而不管所採用的是哪種操作系統、設備或編程語言。Microsoft .NET 平台提供創建 XML Web services 並將這些服務集成在一起之所需。對個人用戶的好處是無縫的、吸引人的體驗。

這個不用說了,很大一部分人一直在用,而且作為master語言。但是對於微服務程序,感覺更適合於前端應用或者一些輕量級企業級的開發。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司"嚨底家"!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

您可能也會喜歡…