共计 1606 个字符，预计需要花费 5 分钟才能阅读完成。
现在的前端技术是一个简单的生态。
轻易浏览一篇对于前端的技术文章，肯定会发现大量的技术术语。什么 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 + 编写一次代码，并同时将其部署为网站，挪动应用程序和 / 或电子应用程序
辅助技术
还有一些很重要的技术，它们没有回升到框架的层面，也不是技术的外围，然而它们是前端利用不可或缺的重要组成部分，包含：
- Node 前端引擎
- NPM 前端软件包的装置管理器
- Webpack 前端打包工具
- Babel 次要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法
谈谈 Node
Node 即 Node.js。
后面咱们提到过，浏览器是蕴含 JavaScript 程序的解释器的，所以它可能解决 JS 代码。
Node 区别于以上任何框架，它应该称之为 JavaScript 程序的解释器（相似虚拟机），所以它次要用于不不便调用浏览器的场景下解决 JS 代码。
Node 应用场景包含：调试和构建
总结
以上的解释看起来简单明了，但理论工作中依然须要咱们本身一直地实际和总结，能力抓住基本。
本文由 Websoft9 原创公布，转载请注明出处。创作不易，欢送探讨，感激反对！