如今的前端技术是一个复杂的生态。
随便阅读一篇关于前端的技术文章,一定会发现大量的技术术语。什么 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 使用场景包括:调试和构建
总结
以上的解释看起来简单明了,但实际工作中仍然需要我们自身不断地实践和总结,才能抓住根本。
内容目录