Web 标准与前端开发 | 青训营前端的起源、架构及变迁前端的应用领域开发中常用的语言框架及工具前端学习路线推荐

前端的起源、架构及变迁

追溯到万维网的诞生。在1990年代初，由于互联网的快速发展，人们开始需要一种能够在浏览器中展示网页内容的技术。最初的前端技术主要是由HTML（超文本标记语言）和CSS（层叠样式表）组成，用于描述网页的结构和样式。

前端架构是指前端应用程序的组织结构和设计原则。随着前端技术的不断发展，前架构也在不断演变。最初的前端架构是基于页面的，即每个页面都有对应的HTML和CSS文件。随着Ajax技术的出现，前端架构开始向基于组件的架构转变，即将页面拆分为多个可复用的组件，通过JavaScript动态地加载和渲染。

现代前端架构通常采用MVVM（Model-View-ViewModel）或MVC（Model-View-Controller）的模式。

MVVM模式将前端应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel模用于存储数据，视图用于展示数据，视图模型则负责处理业务逻辑和数据绑定。

前端技术在过去几十年中经历了多次变迁。最初的前端技术主要是HTML和CSS，用于构建静态网页。随着JavaScript的发展，前端技术开始变得更加交互和动态。

在Web 2.0时代，Ajax技术的出现使得前端应用程序能够实现异步加载和局部刷新，提升了用户体验。随后，前端框架如jQuery的出现进一步简化了前端开发，并引入了更多的交互效果和动画效果。

近来，前端技术发展迅速，出现了许多新的技术和框架。React、Angular和Vue等前端框架的出现使得前端开发更加高效和可维护。同时，前端工程化的概念也逐渐被广泛采用，使得前端开发更加规范和可扩展。

总的来说，前端技术从最初的静态网页发展到现在的复杂应用程序，经历了多次变迁和演进。随着互联网的不断发展，前端技术也将继续进化，为用户带来更好的体验。

image (3).png

这是前端应用最常见的领域，包括网页开发和移动应用开发。前端开发人员使用HTML、CSS和JavaScript等技术来创建和设计网页和移动应用的用户界面和交互功能，使其在浏览器中运行。

image (1).png

前端技术不仅局限于客户端应用，也可以应用于服务器端开发。前端开发人员可以使用Node.js等技术来开发服务器端应用，处理数据和逻辑，并提供API接口供客户端调用。

除了在浏览器中运行，前端应用还可以在终端设备上运行，如手机、平板电脑、智能电视等。前端开发人员可以使用React Native、Flutter等跨平台开发框架来开发终端和跨端应用，使其具有原生应用的性能和体验。

image (2).png

在前端开发中，三剑客的功能可以这样理解：如果HTML是肉身、CSS就是外表、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人。

image (4).png

前端开发的框架有很多，这里着重介绍一下vue

vue是一套用于构建用户界面的渐进式JavaScript框架，其可以自底向上逐层应用，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目进行整合。而且当与现代化的工具链以及各种支持类库结合使用时，Vue也可以为复杂的单页应用提供驱动。

优点：轻量级框架，简单易学，双向数据绑定，组件化，数据结构分离，虚拟Dom，运行速度快。vue 是单页面应用，是页面局部刷新，不用每次跳转都要请求所有数据和dom，其大大加快了访问速度，提升了用户体验，

缺点：不支持IE8，其生态环境不如react和anguler

工具着重介绍一下Webpack和Babel

Webpack：Webpack是一个模块打包工具，用于将多个前端资源（如JavaScript、CSS、图片等）打包成一个或多个静态资源文件。它可以处理模块依赖、代码压缩、文件合并等任务。
Babel：Babel是一个JavaScript编译器，用于将新版本的JavaScript代码转换为向后兼容的版本，以便在旧版浏览器中运行。它支持将ES6、ES7等新特性转换为ES5代码。