# 什么是前端？

# 前端定义

Wikipedia对前端开发的定义是：

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

简单来说“前端开发”就是采用 Web 技术栈:HTML、CSS、JS 技术解决多端图形化界面下的人机交互问题。

结合上面的定义我们来拆分一下其中的关键词 Web 技术栈、跨终端、GUI 人机交互

Web 技术栈

前端技术分为三层，最基础的是HTML负责描述页面的内容和结构；使用CSS定义样式比如位置、大小、颜色等；JavaScript负责定义页面的行为。HTML 、CSS、 JavaScript 代码是运行在浏览器中的，浏览器通过HTTP协议和服务器进行通信，将前端代码从服务器获取到进行运行最终渲染成页面，也可以把用户输入的内容通过 HTTP 协议提交到服务器。所以HTML CSS JavaScript HTTP 就构成了前端最基础的技术栈。

跨终端

从本质上来说前端应用是一个 GUI 程序，而 GUI 程序有三种典型形态:

  • Web: 以浏览器为运行环境，基于浏览器内核支持的编程语言、API 来实现，被浏览器解释执行。
  • Native: 以操作系统为运行环境，基于操作系统原生支持的编程语言、API 来实现，以二进制包的形式运行
  • Hybrid: 基于 Native 应用提供的一个支持 HTML、CSS、JS 容器开发的应用，相当于用开发 Web 的方式开发 Native 的应用

基于这些典型形态前端应用可以运行在 PC/移动浏览器、客户端甚至是 VR/AR 等终端。所以跨平台开发是前端开发需要关注的一大问题,最终目标learn once, write anywhere。

GUI 人机交互

GUI 人机交互问题实际上体验问题。简单来说就是需要解决应用好看+好用的问题。前端是一个产品或服务的最前沿，连接用户与服务,关乎产品的体验与品质。

# 前端业务模型

业务模型是前端跟现实世界的对接点，决定了前端技术领域所需要解决的问题，也是前端的核心价值。无论技术、产品形态、开发模式怎么变化，业务模型是不会变的。借助经典的input -> process -> ouput模型对前端进行分析可以得到以下业务模型:

在这个模型中：

INPUT 包含产品/项目需求 + 数据服务。产品需求通常以需求文档和 UI 设计提供。数据服务一般通过后台接口来提供。

PROCESS 利用前端技术对 INPUT 进行加工，将他们转换为可以在终端运行的应用。在这个过程中用的可以是浏览器技术也可以采用原生 Native 技术也可以是 Hybrid。

OUTPUT 为运行在浏览器或终端设备上的 Web 应用，是用户与产品的直接接触点。

所以前端是离用户最近的工程师,为应用而生，搭建起了用户、终端设备、服务之间的桥梁。

# 前端知识谱系

结合前端业务模型可以梳理出一条清晰的知识谱系概览图：

总体来说前端知识包含几大类： 运行环境、编程语言、数据通道、应用开发、工程化、性能、安全、体验

（1）运行环境

前端 Runtime 对终端设备的操作系统进行封装，提供了基于 HTML、CSS、JS 语言的编程接口，赋予前端程序控制终端设备的能力，包含两类：

浏览器内核：前端最核心的 Runtime，基于 Web 标准提供了一个跨平台的 Runtime，除了浏览器外，Electron、Node Webkit  等 基于浏览器内核提供开发平台也属于这类

Native 容器：基于 Native 或 Webview 打造的运行容器，在跨平台开发 Native 应用中非常普遍，以另一种形式对终端设备进行封装，提供一个可以用前端编程语言编写应用的运行环境，Cordova、Weex、React Native  算是典型代表。微信、支付宝等超级 App 都有一个这样的内置容器

（2）编程语言

前端要掌握的基础编程语言是：HTML、CSS、JS，这三种语言背后都有规范支持，随着浏览器技术的进化也在持续进化，功能和易用性越来越好。除此之外，前端开发还会涉及两类语言：

对 HTML、CSS、JS 进行语法增强的衍生语言，以提升其易用性，TypeScript、JSX、SASS、LESS 就是典型代表

（3）数据通道

主要是网络设施和协议。而 HTTP 是使用最广的协议，除此之外还有 WebScoket、移动端普遍采用的 RPC 、QUIC 等协议。

（4）应用开发

应用着眼于如何开发各种类别的应用，是前端最核心的技术领域。前端开发套件：框架、工具、类库等在社区的推动下一直在蓬勃发展，优秀开源项目灿若繁星。活跃的前端生态帮助开发人员专注于业务逻辑，应用开发正在变得越来越简单。

（5）工程化

工程化的本质是让一群人做好一堆事，涉及代码规范、协作流程、运维部署等一系列领域。是实现一个研发团队可以规模化、高质量的开发前端应用。规模化有两层含义：研发模式可以支持多人并行开发，人员数量翻倍产能即可翻倍；技术架构和基础设施能有效地支撑不同类别产品的快速研发。高质量有三个基本要求：易维护、高性能、体验好。前端是一个系统中变化最频繁、新业务出现速度最快的部分，工程化显得尤为重要。

（6）性能

前端性能优化可以提升用户体验。性能优化通常包含如下四大部分内容：

  • 性能指标体系：确定好该优化什么
  • 监控：持续监测核心指标，为优化提供理论依据
  • 评测：通过一套完整的工具或者监控体系，评估应用的运行性能是否符合预期
  • 优化：制定并实施优化方案，解决产品遇到的性能问题

（7）安全

前端涉及的安全问题通常包括：

  • XSS : Web 应用安全问题之源，利用 Web 应用程序对用户数据的处理缺陷来攻击 Web 应用，这里有一份详细的防护指南   给开发者的 Web 应用程序 XSS 防护快速指南

  • CSRF : 利用 Server 端接口设计的一些漏洞，在其它站点嵌入敏感操作对应的 URL ，使得有权限的用户在不知情的情况下就触发了操作

  • Clickjacking : 通过伪造界面，诱导用户进行一些敏感操作

  • 防篡改：HTTP 协议本身的特性使得数据在从 Server 到浏览器端传递的过程中，可以被第三方劫持和篡改

（8）体验

体验虽然不直接和编码相关，但决定了前端程序的品质，是一个前端程序从能用 -> 好用 的重要过程。风格统一的视觉和交互设计，还能大大提升研发效率。体验也是是前端可直接影响产品业务之处，也是区别于其它技术工种的独特价值之所在。

# 数慧的前端

数慧数据中心大前端团队是一个虚拟技术团队，成员分散于各个研发部中，根据产品线产品与业务需求进行前端技术栈业务研发工作，下面会从技术栈 、技能要求、工作协同 等方面对数据中心大前端团队进行介绍。

# 技术栈

当前数慧数据中心大前端团队以 Vue 技术栈为主，前端部分整体架构图如下：

整体上前端应用层基于 Vue 技术栈的传统全家桶组合：

  • 路由层由 Vue-Router 统一管理
  • 数据管理采用 Vuex来维护全局 store
  • 基础组件库采用了基于 vue 的IView或者ElementUI
  • HTTP 库采用了基于promise的Axios

    TIP

    需要注意一点的是业务中会涉及到GIS模块，这部分内容需要采用自主研发的 GIS 框架来实现。

在工具链层面大部分情况下采用Vue-Cli进行系统初始框架搭建,其中涉及到到的工具包括:

  • Webpack作为模块打包器，进行模块打包。
  • Babel作为 JavaScript 编译器。
  • Eslint 进行 JavaScript 代码检测,统一编码风格。
  • PostCSS 作为 JS 插件转换样式的工具,对 CSS 进行处理。

单元测试采用Vue-Cli内置Jest进行。 可维护、美化方面在 git 钩子中通过husky配合lint-staged在 commit 阶段借助prettier对代码进行指定格式修改和美化。 采用私服gitlab进行代码管理，并借助Jenkins实现自动化部署。

# 工作协作

前端是研发流程中的一环，前端团队除了需要扎根技术还需要关注与前端相关的连接。前端在项目研发中的上游是业务需求与 UI 设计，下游是后端研发。这三个角色之间的连接对前端来说至关重要。

前端与需求设计

一般来说，需求设计人员偏向于用户思维、业务场景；而前端工程师则倾向于工程思维、功能思维。从更高的层面来看，这要求前端开发人员既能在技术边界实现业务功能的研发也需要具备产品思维，熟悉业务场景。能够与需求设计人员进行业务层面的讨论，结合具体的业务需求从技术实现角度给出建议与解决方案。所以，深入到功能需求的根源挖掘真实的业务场景是前端开发人员必须要了解的，这样更有利于沟通。

前端与 UI 设计

与 UI 设计的合作，前端的工作很像是『翻译』。但工程师本身对于设计，甚至美感是相对不擅长的领域，但我们在工作中常常遇到设计师的天马行空，对于前端开发成本较高的情况。在专业领域，比如数据可视化，不能只是单纯的从视觉交互上考虑，而是从数据本身的角度结合视觉交互去帮助理解业务，从而设计一种合适的可视化形态。因此，对于角色本身来说，并不完全都是正向连接的关系。前端也有义务帮助设计师更好的理解页面的构建方式，可视化图表的正常使用方式等。

前端与后端开发

与后端研发合作涉及到如何帮助后端更好的理解前端。前端与后端的理解差异往往来自于数据接口上。后端是服务器环境，前端是浏览器环境，往往两者处于的立场不同，不能感同深受。前端考虑的是用户体验增强，因此在数据传输大小与次数上前后端都有自己的考虑。 目前公司内绝大多数系统是 SPA(Single-page application),是前后端分离的。在这种模式下前端和后端开发对业务逻辑进行解耦，按照约定接口各司其职。前端负责数据如何展现，后端负责如何取得数据并提供给前端。前端与后台沟通的依据是接口设计文档,现在公司采用的是接口管理系统Swagger,会明确表明接口的入参、入参类型、出参、返回错误码信息。除此之外前端开发人员需要明确如何更有效率、更友好的展现给用户，所以在数据返回类型上需要有一定的主导权，同时也有责任和义务结合业务场景与后端开发人员进行有效沟通。

# 业务划分

目前前端根据业务领域主要有几个大大划分：面向业务前端、WebGIS(2D/3D)、图编辑及可视化、搭建系统等方向，以下是相关内容展示

业务界面

WebGIS 2D

WebGIS 3D

图编辑及可视化

搭建系统

编辑此页面

vue-cli3.x 脚手架 >

数据中心 研发二部