前後端分離

在傳統的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語言。但是對於微服務程式，感覺更適合於前端應用或者一些輕量級企業級的開發。