前端是应用程序的表示层。它通常被描述为用户看到的所有东西,但更一般地说,它是负责有效地向用户显示数据的任何代码。因此,前端包括构建直观且令人愉悦的界面,以及有效地存储、呈现和更新从后端或 API 接收到的数据。
前端框架是构建前端的脚手架。它通常包括一些构建文件的方法(例如,通过组件或 CSS 预处理器)、发出 AJAX 请求、设置组件样式以及将数据与 DOM 元素相关联。
你可以只用三个文件构建一个简单的前端:HTML、CSS 和 JavaScript。但是,随着你的应用程序扩展,你的文件将随之增长,充满难以理解且无法维护的代码。
前端框架之所以存在,是因为对于许多应用程序来说,前端以可预测的方式增长和紧张。虽然每个流行的框架都提供了自己的设计理念,但它们都试图解决我们之前遇到的相同的普遍问题。
不同的框架解决了不同的问题和相同的问题。如 Bootstrap 和 SemanticUI,专注于创建可读、可维护的 HTML 和 CSS,强调一致的视觉设计。其他的,如 Vue、React 和 Angular,在构建整个应用程序的数据流方面取得了胜利,让你可以专注于操作数据而不是 DOM。
使用框架的优势
让我们回顾一下采用前端框架将帮助我们快速增长的应用程序的主要方式:
可维护性:将你的应用程序分解为可重用的独立组件,可以更轻松地进行不影响应用程序其余部分的快速更改。
关注点分离:现代框架设计鼓励可维护的模块化架构,并允许你的前端开发人员专注于他们最擅长的事情:获取数据并以直观有效的方式将其显示给用户。
速度:旨在解决常见问题的样板代码使你可以更轻松地启动和运行你的应用程序;基于组件的设计使其开发速度更快。
协作:由于框架通常遵循类似的设计模式,因此对你的代码库不熟悉的开发人员可以更轻松地开发和维护你的应用程序。
社区:流行的框架周围有一个社区,有专门的Web前端培训教程、论坛、聚会和一般支持的开发人员,你可以寻求帮助。
综上所述
前端框架是开发复杂用户界面的强大工具。他们鼓励你构建一个可维护的、模块化的、独立的架构,使构建你的应用程序和与其他开发人员协作变得容易。流行的框架得到支持社区、大量文档和教程的支持,并提供经过实战测试的代码,可以解决前端在扩展时面临的常见挑战。框架允许你利用最现代的 JavaScript 功能并提供可以轻松原型应用程序的工具。最后,它们使你能够使用共享语言来讨论你的架构和挑战。
前端框架和库有多种形式和大小——你可以使用成熟的 UI 框架来构建整个前端,实施 CSS 库来加强你的视觉设计,或者使用模板引擎来创建可重用的组件。
然而,对于较小的项目和原型来说,前端框架可能是多余的,而且陡峭的学习曲线,再加上快速发展的 JavaScript 生态系统,可能会使其难以在年轻的项目中实施。归根结底,如果你对了解经过良好测试的设计原则感到兴奋,希望你的前端能够扩展,或者在性能不是主要问题时需要快速原型化,那么你应该实施一个流行的框架。