前端的基本概念
在软件架构和程序设计领域，前端是软件系统中直接和用户交互的部分，而后端控制着软件的输出。将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象。
前端的开发语言
HTML：即超文本标记语言，是用来描述网页的一种语言，与编程语言不通，标记语言用来记录信息而非执行逻辑处理，HTML语言的内容被各类标签所包裹。
JavaScript：JavaScript是一种直译式的脚本语言，是一种动态的解释形语言。JavaScript不需要经过编辑为机器码再运行，而是直接可以由解释器运行，它的解释器被称为JavaScript引擎，内置在各类浏览器中，JavaScript最早是在HTML网页上使用，用来给HTML网页增加动态功能，目前也已经拓展到服务端与硬件端，
CSS：CSS是指层叠样式表，定义如何显示HTML元素，一般存储在.css后缀的文件中，通过HTML标签中的className以及Id属性来进行绑定。
前端Web应用的开发流程
API接口约定
为了实现前后端功能，共有六条API接口，API接口定义如下：
clearAlarm：下发命令取消设备的报警状态。
listDeviceName：查询设备号，请求设备列表。
queryAlarmHistoryLogs：查询设备历史报警记录。
queryDeviceProp：查询设备属性（温湿度数据）。
queryDevicePropHistoryLogs：查询设备历史属性（温湿度数据）。
setDeviceProperty：设定设备属性（温度报警阈值）。
前端框架
我们重点介绍四个比较流行的前端框架方案，分别为React框架、Umi.js框架、Ant Desigh UI
组件和Dva.js数据流方案。
React技术方案
React是一个为数据提供渲染为HTML视图的开源JavaScript库。由Facebook在2013年
instgram项目上进行开源，具有以下特点：
1、 声明式设计：React采用声明范式，屏蔽底层，开发者可以轻松描述构建应用。
2、 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互，从而提升页面性能。
3、 灵活：React可以与已知的库或框架很好地配合。
4、 JSX：JSX是JavaScript语法的扩展，即为JavaScript和XML的混合体。
5、 组件：通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6、 单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码。
React技术方案-虚拟DOM
浏览器是如何呈现一个页面的？
1、 解析HTML，并生成一棵DOM tree；
2、 解析各种样式并结合DOM tree生成一棵Render tree；
3、 对Render tree的各个节点计算布局信息，比如box的位置与尺寸；
4、 根据Rendertree并利用浏览器的UI层进行绘制。
浏览器webkit引擎渲染过程
DOM
DOM是HTML，XML文档的JavaScript对象模型，提供丰富的对象操作与查询接口。浏览器通过HTML解析器将HTML文件解析称为DOM树并送到下游功能块渲染，JavaScript脚本可以通过DOM提供的接口直接对浏览器中的DOM树进行重构，从而开发下游模块的重新计算与渲染。
尽量减少对DOM的操作
对DOM的每一次修改会引发Render Tree的重新计算，占用大量的浏览器资源，容易造成页面卡顿崩溃的情况，降低了前端应用的体验。
React技术方案-虚拟DOM
JSX（JavaScript+XML）
React定义的一种类似于XML的JS扩展语法：XML+JS。JS中直接可以套标签，但标签要套JS需要放在{}中，JSX用来创建react虚拟DOM对象，在{}括号中的元素会自动当做JavaScript执行，而外部的XML可以给Virtual DOM执行。JSX语言的程序是不能被浏览器识别并直接运行的，需要转化成为浏览器可以识别的HTML+JavaScript+CSS内容，react提供Babel.js来进行处理，而开发者无需考虑和感知。
特点：JSX执行更快，它在编译为JavaScript代码后进行了优化；
它是类型安全的，在编译过程中就能发现错误；
使用JSX编写模板更加简单快速。
React的核心思想-组件
React是面向组件编程的，一切都是基于组件的。可以通过定义一个组件，然后在其他的组件中，可以像HTML标签一样引用它。
可以通过<ComponentName></ComponentName>的方式进行组合。
React的组件都要继承react提供的component类，并可以实现组件的声明周期函数，以供在页面渲染时调用，react也为组件提供丰富的API接口供调用。
React将组件看做状态机，当组件的状态发生变化时会引起组件的重新渲染。在组件中有内部状态和外部状态。均可通过this.state和this.props访问，在render()函数中绑定state或props数据后，待数据发生变化对引起render函数的重新执行，组件执行重新渲染。
主要用到的组件生命周期函数
化繁为简的umi框架
Umi是一个可插拔的企业级react应用框架。Umi以路由为基础的，支持类next.js的约定式路由（根据文件自动生成路由），比如支持路由级的按需加载，可以帮助开发者快递搭建应用而无需关心复杂的路由配置，umi是蚂蚁金服的底层前端框架，官方文档地址：
UmiJSumijs.org
Umi安装过程：
1、 安装Node.js环境：Node.js下载地址：
Node.jsnodejs.org
2、 安装yarn：命令行执行npm I yarn tyarn –g；
3、 安装umi：命令行执行yarn global add umi。
丰富高质组件库Ant Design
Ant Design是专门用来开发和服务于企业级后台产品的UI组件库，简单来说就是提供了大量的UI组件，例如输入框、动效、按钮、表格等等，每个UI组件都有稳定的API可进行调用，开发者只要在各组件API基础上进行开发，即可快速搭建自己的前端页面。官网：
Ant Design - 一套企业级 UI 设计语言和 React 组件库ant.design
Umi咋初始化时选择antd插件即可集成antd组件库，也可通过命令行执行npm install –g antd进行安装。
数据流方案：dva
React框架将各个模块组件化，存在不足在于react只支持单向的数据流，即父组件可以将数据通过子组件的props属性传入，但是父组件却很难获取到子组件的状态。
Dva是基于Redux的方案，Redux这样的数据流框架，核心思想是创建一个数据状态管理库，所有组件的状态state都以一个对象树的形式储存在一个单一的store中，store中的数据通过组件的props传入，当props关联的数据发生改变时将会触发组件的重新渲染。Dva是对Redux的进一步封装，对许多配置进行了简化。Dva官网地址：
DvaJSdvajs.com
Dva数据流转过程
