网站前端技术之通俗理解

如今的前端技术是一个复杂的生态。

随便阅读一篇关于前端的技术文章，一定会发现大量的技术术语。什么 vue, webpack, react, Antdesign 等，各种新名词让初学者感到非常困惑，在较短的时间根本快速的理解整个前端体系，从而陷入一种低效、焦虑的学习状态。

什么是前端？

在网站技术中，前端就是用户界面，主要通过页面向用户展示内容或数据，同时用户可以自主选择需要的内容并向网站填写数据后给出反馈。

前端是相对后端而言的。前+后这种分工模式，在生活中或人类的组织分工中非常常见，举例：

电视机+机顶盒士兵+作战指挥部无人便利店+运作系统

简而言之，网站的前端主要通过从后台获取数据，向用户展示数据或采集数据传送到后台

前端技术体系

以网站为例，前端的载体就是浏览器 Chrome, FireFox 等，所以前端技术自始至终都是围绕浏览器的几个基础技术进行发展：

HTML CSS JavaScript/ECMAScript

现在流行的前端技术都是对以上基础技术进行“高级编程”，围绕界面设计、界面互动和界面体验，提供不同的软件包。

比如：Vue, React, Bootstrap 等框架都是这方面的杰出代表。

不管哪一种框架最终都是依赖以上技术。

UI 框架

UI 框架偏重于 UI 显示的效果，其包含设计理念，所以基于同一种 UI 框架的网站其视觉效果看起来非常类似。

主流的 UI 框架为：

Material Design Ant Design Bootsrap iView Element

JS 框架（交互编程）

不同于 UI 框架，交互编程偏重于用户互动后的数据展示（采集）。也就是说，当你的前端页面需要根据用户的选择展示不同类型的数据的时候，就需要进行交互式编程。

早期，开发者主要采用原生的 JavaScript 来实现这种交互，随着技术的演进，就诞生了专门用于交互编程的 JS 软件包框架，解决一些通用的问题，开发者能够基于这种 JS 软件包更方便的开发前端交互。

主流的 JS 框架为：

jQuery Vue.js React Angula.js Ember.js Meteor Mithril Backbone.js Handlebars.js

混合框架

实际开发网站中，单单使用某一种框架并不能满足业务。

比如 Vue.js 虽然能够很好的处理数据交互，但它自身却无法构造优美的界面。由于开源世界总有一些默默无闻的顶尖级程序员创造伟大的作品，所以基于主流的 UI 和 JS 框架，产生了繁荣的生态，框架相互组合，并引入了更多的工具，又组合成新的框架。

以 Vue.js 为例，产生了更多混合框架：

bootstrap-vue 即 Vue.js + Boostrap Ant Design of Vue 即 Vue.js + Ant Design Vuetify.js 即 Vue.js + Material Design Nuxt.js 即 Vue.js 的 SSR 模式增强 NativeScript-Vue 即 Vue.js 移动端开发增加 Quasar 即 Vue.js + 编写一次代码，并同时将其部署为网站，移动应用程序和/或电子应用程序