Java中的模板語言：FreeMarker和Thymeleaf。

前端三大框架：Angular、React和Vue。

模板語言是服務端從資料庫取出資料，直接繫結資料到頁面，生成最終的頁面返回最前端（瀏覽器）直接檢視。模板語言因為是服務端渲染更有利於SEO。一般模板語言最後都需要後端工程師最後整合。

三大框架的使用就是前後端分離的象徵。服務端只關心業務邏輯，返回正確的資料。前端只關心資料的繫結和頁面的顯示及跳轉是否正確。分工更為明確，前後端工程師各司其職。

現在越來越傾向於前後端分離的開發模式。後端專注高併發高可用，前端專注使用者體驗。

主流的Java模板引擎

Thymeleaf

Thymeleaf是用於Web和獨立環境的現代伺服器端Java模板引擎。Thymeleaf的主要目標是將優雅的自然模板帶到您的開發工作流程中—HTML能夠在瀏覽器中正確顯示，並且可以作為靜態原型，從而在開發團隊中實現更強大的協作。能夠處理HTML，XML，JavaScript，CSS甚至純文字。Thymeleaf的主要目標是提供一個優雅和高度可維護的建立模板的方式。Thymeleaf也是從一開始就設計(特別是HTML5)允許建立完全驗證的模板。Spring Boot 官方推薦使用 thymeleaf 而不是 JSP。

Freemarker

FreeMarker是一款模板引擎： 即一種基於模板和要改變的資料， 並用來生成輸出文字（HTML網頁、電子郵件、配置檔案、原始碼等）的通用工具。 它不是面向終端使用者的，而是一個Java類庫。輕量級模版引擎，不需要Servlet環境就可以很輕鬆的嵌入到應用程式中，能生成各種文字，如html，xml，java，等，入門簡單，它是用java編寫的，很多語法和java相似。

前端三大框架

Vue

Vue.js是一套構建使用者介面的漸進式框架。Vue 只關注檢視層， 採用自底向上增量開發的設計。目標是透過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

React

React 是一個用於構建使用者介面的 JAVASCRIPT 庫。React主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）。

Angular

AngularJS 是一個 JavaScript框架。它是一個以 JavaScript 編寫的庫。它可透過 <script> 標籤新增到HTML 頁面。透過 指令 擴充套件了 HTML，且透過 表示式 繫結資料到 HTML。AngularJS 是以一個 JavaScript 檔案形式釋出的，可透過 script 標籤新增到網頁中。

Java模板語言與前端框架區別

Java模板語言依賴於後端，後端把資料繫結到頁面的相應標籤上，還要用相應的類來解析頁面，也就是檢視解析器，這樣呈現出的頁面才是繫結資料後的樣子。

三大前端框架透過Js來操作，更多是HTML5頁面與Js之間的互動，只專注於前端。

語法不同，也完全不是一個概念，頁面出現Freemark、Thymeleaf語法，估計前端的人都看不懂也不知道資料哪裡來的。前端的框架大都是基於JavaScript 的，Java 後端框架大都基於Java語言。

本質上沒有什麼區別，都是模板+模型=>渲染結果。

區別主要是：渲染前移

渲染前移

下圖是SpringMVC前端控制器的執行流程。

前端控制器接收到請求委託為對應Controller處理Controller處理完成，返回model前端控制器將model和模板渲染出結果（html,json等）最後返回給客戶端

freemark,thymleaf就是在第４步渲染出結果後返回。

而對於Angular、React和Vue，第四步退化成了資料轉換，model轉JSON，渲染則是在第５步之後，客戶端接收到了資料之後。

以Vue為例：

主要看mounted右側的那個虛線環：接收到資料後，觸發beforeUpdate,reRender,updated進行頁面的渲染。

前移優劣勢

優勢：

職責分離，後端只負責資料和邏輯，前端負責渲染和互動，分工明確

後端不必為了web，獨立處理，對web,app,小程式一視同仁，減少了後端工作量

相對於後端渲染，前端渲染更易於測試，可獨立mock測試

前端身價漲了～

劣勢：

前端發展快，但是沒有統一標準

模組化不成熟

很多借鑑的後端的技術，對前端人員來說，學習的內容一下增加了很多，學習難度大

好的前端難招了～