一起玩转微服务（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语言。但是对于微服务程序，感觉更适合于前端应用或者一些轻量级企业级的开发。