前端开发的发展史:框架与技术栈的演变

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • 前端开发的发展史:框架与技术栈的演变
    • 静态网页时代(1990s)
    • 动态网页与AJAX(2000s)
    • jQuery与MVC(2000s - 2010s)
    • AngularJS与前端框架的兴起(2010s)
    • React与组件化(2013 - 至今)
    • Vue.js与渐进式框架(2014 - 至今)
    • Angular与全面型框架(2016 - 至今)
    • 前端工程化与工具链(2010s - 至今)
    • 现代CSS与响应式设计(2010s - 至今)
    • PWA与前端的新趋势(2015 - 至今)
    • 结语
    • 🎉 往期精彩回顾

前端开发的发展史:框架与技术栈的演变

前端开发,这个曾经被看作是网页设计附属品的领域,如今已经发展成为一个庞大且复杂的技术领域。随着互联网技术的飞速发展,前端开发经历了从静态页面到动态应用的转变,其背后是一系列框架和技术栈的更迭与创新。

静态网页时代(1990s)

在1990年代,互联网刚刚兴起,网页主要由HTML编写,用于展示文本和图片。CSS的出现为网页带来了样式化,而JavaScript则为网页添加了基本的交互性。这一时期的前端开发相对简单,主要是对页面内容的展示和简单交互。

动态网页与AJAX(2000s)

进入21世纪,随着用户对网页交互性需求的增加,AJAX技术应运而生。AJAX允许网页在不刷新的情况下与服务器交换数据,实现了更丰富的用户体验。这一时期的前端开发开始涉及到更复杂的脚本编写和数据交互。

jQuery与MVC(2000s - 2010s)

jQuery库在2006年的发布,极大地简化了JavaScript编程,使得开发者能够更容易地操作DOM、处理事件和实现动画效果。同时,MVC(Model-View-Controller)模式的引入,为前端开发带来了结构化的编程方式,提高了代码的组织性和可维护性。

AngularJS与前端框架的兴起(2010s)

2010年,AngularJS的出现标志着前端框架时代的开始。AngularJS提供了双向数据绑定、依赖注入、模块化等特性,使得开发复杂应用变得更加高效。随后,React(2013年)和Vue.js(2014年)等其他前端框架相继出现,各自带来了独特的解决方案和生态系统。

React与组件化(2013 - 至今)

由Facebook开发的React,其核心思想是组件化。React将UI拆分为独立、可复用的组件,每个组件管理自己的状态,这使得开发大型应用变得更加简单。React的虚拟DOM技术也提高了应用的性能。

Vue.js与渐进式框架(2014 - 至今)

以其简洁和易用性迅速赢得开发者青睐的Vue.js,提供了响应式数据绑定、组件系统和虚拟DOM,同时支持服务器端渲染。Vue.js的渐进式设计允许开发者根据项目需求逐步采用其功能。

Angular与全面型框架(2016 - 至今)

Angular(2及以后的版本)是一个全面的前端框架,提供了强大的模板系统、依赖注入、模块化、测试工具等。Angular的设计理念是为大型应用提供一站式解决方案。

前端工程化与工具链(2010s - 至今)

随着前端项目的复杂性增加,前端工程化应运而生。WebpackBabelESLint等工具的出现,帮助开发者自动化构建过程,转换代码,以及维护代码质量。这些工具链的建立,使得前端开发流程更加标准化和高效。

现代CSS与响应式设计(2010s - 至今)

CSS3的发展也伴随着前端的进步。它带来了动画、渐变、阴影等新特性,而响应式设计则成为了现代Web设计的标准。媒体查询(Media Queries)使得开发者能够为不同设备提供不同的样式,确保用户体验的一致性。

PWA与前端的新趋势(2015 - 至今)

渐进式Web应用(PWA)结合了Web和移动应用的优点,提供了离线支持、推送通知等功能。PWA的出现,使得Web应用能够在性能和用户体验上与原生应用相媲美。

结语

前端开发的历史是一部技术创新和用户体验不断进步的历史。从静态页面到动态应用,从单一技术到多元化框架和工具链,前端开发已经发展成为一个成熟且充满活力的领域。随着技术的不断演进,前端开发者将继续探索新的可能性,为用户提供更加丰富和便捷的数字体验。在这个快速变化的时代,持续学习和适应新技术是每个前端开发者的必经之路。

如果对你有帮助,点赞、收藏、关注是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

  1. 打字通小游戏制作教程:用HTML5和JavaScript提升打字速度
  • 577阅读 · 22点赞 · 15收藏
  1. 扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏
  • 751阅读 · 13点赞 · 16收藏
  1. 拼图小游戏制作教程:用HTML5和JavaScript打造经典游戏
  • 481阅读 · 9点赞 · 12收藏
  1. Mock.js 基本语法与应用笔记
  • 245阅读 · 5点赞 · 8收藏
  1. 排序算法全景:从基础到高级的Java实现
  • 623阅读 · 23点赞 · 9收藏
  1. CentOS系统上安装Redis操作教程
  • 266阅读 · 4点赞 · 3收藏
  1. 打造你的HTML5打地鼠游戏:零基础入门教程
  • 1048阅读 · 20点赞 · 28收藏
  1. 打造你的贪吃蛇游戏:HTML、CSS与JavaScript的完美结合
  • 1076阅读 · 25点赞 · 11收藏
  1. 快速上手:使用Hexo搭建并自定义个人博客
  • 586阅读 · 18点赞 · 19收藏
  1. 在Vue中处理接口返回的二进制图片数据
  • 588阅读 · 20点赞 · 18收藏
  1. 打造经典游戏:HTML5与CSS3实现俄罗斯方块
  • 1112阅读 · 31点赞 · 23收藏
  1. Spring Boot中Excel数据导入导出的高效实现
  • 1064阅读 · 23点赞 · 22收藏
  1. Spring Boot中实现图片上传功能的两种策略
  • 1264阅读 · 24点赞 · 13收藏
  1. CentOS上安装MySQL 5.7和MySQL 8.0教程
  • 833阅读 · 21点赞 · 13收藏
  1. Spring Boot工程集成验证码生成与验证功能教程
  • 1407阅读 · 39点赞 · 17收藏
  1. Spring Boot 3项目集成Swagger3教程
  • 805阅读 · 15点赞 · 8收藏
  1. CentOS上安装JDK的详细教程
  • 656阅读 · 12点赞 · 13收藏
  1. 解决前端项目中Node.js版本不一致导致的依赖安装错误
  • 869阅读 · 17点赞 · 16收藏
  1. 入门指南:使用uni-app构建跨平台应用
  • 1282阅读 · 29点赞 · 9收藏
  1. Vue项目中使用Mock.js进行API模拟
  • 653阅读 · 17点赞 · 7收藏
  1. Vue组件间通信实践
  • 864阅读 · 24点赞 · 18收藏
  1. CentOS上安装与配置Nginx
  • 683阅读 · 9点赞 · 6收藏
  1. Vue跳转页面传递参数
  • 266阅读 · 5点赞 · 4收藏
  1. vue项目如何下载使用gsap动画库
  • 551阅读 · 1点赞 · 0收藏
  1. VS Code上搭建React开发环境
  • 2281阅读 · 2点赞 · 10收藏
  1. vue命令式组件封装以及使用
  • 819阅读 · 2点赞 · 3收藏
  1. springboot项目常用配置
  • 379阅读 · 1点赞 · 0收藏
  1. 如何在Vue中使用百度地图API来创建地图应用程序。
  • 344阅读 · 3点赞 · 1收藏
  1. 手把手教你CentOS下载Nginx配置使用
  • 463阅读 · 2点赞 · 3收藏
  1. vue3 setup语法糖的三种书写方法
  • 2820阅读 · 5点赞 · 14收藏
  1. vue3中vuex 的使用基本使用和二次封装
  • 447阅读 · 3点赞 · 1收藏
  1. MySQL基础全套全网最详细讲解
  • 770阅读 · 3点赞 · 6收藏
  1. 前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;
  • 702阅读 · 3点赞 · 2收藏
  1. VS code搭建C/C++运行环境简单易上手
  • 2784阅读 · 5点赞 · 8收藏
  1. Vue.2&Vue.3项目引入Element-UI教程&踩坑
  • 9267阅读 · 22点赞 · 82收藏
  1. Vue项目引入Echarts可视化图表库教程&踩坑
  • 2202阅读 · 3点赞 · 5收藏
  1. VirtualBox虚拟机搭建CentOS系统教程
  • 4492阅读 · 4点赞 · 32收藏
  1. VS Code上搭建Vue开发环境
  • 10657阅读 · 13点赞 · 64收藏
  1. Color-UI 简介及使用教程
  • 5916阅读 · 2点赞 · 13收藏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/448940.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发跨平台 App 推荐 React Native 还是 Flutter?

Hello大家好我是咕噜铁蛋!今天我要和大家一起探讨一个备受关注的话题:“开发跨平台 App 推荐 React Native 还是 Flutter?”在移动应用开发领域,选择合适的跨平台开发框架对于开发者来说至关重要。而React Native和Flutter作为两种…

eclipse maven 项目导入报错

错误:Internal compiler error: java.lang.NullPointerException at org.eclipse.jdt.internal.compiler.apt.dispatch.AnnotationDiscoveryVisitor 环境:eclipse Kepler Service Release 2 ,JDK1.7 解决办法:编码不对,修改

微信视频号视频下载全攻略:轻松保存至手机的步骤!

微信视频号已经成为了我们获取信息、分享生活的重要平台。其中丰富的短视频内容,让我们流连忘返。然而,有时我们想要将这些精彩瞬间保存到手机,以便日后观看或分享,那么如何操作呢?本文将详细解析微信视频号保存视频到…

ceph跨集群迁移ceph pool rgw

1、跨集群迁移ceph pool rgw 我这里是迁移rgw的pool l老环境 [rootceph-1 data]# yum install s3cmd -y [rootceph-1 ~]# ceph config dump WHO MASK LEVEL OPTION VALUE RO mon advanced au…

2-LINUX--Linux 系统文件类型与文件权限

一.文件类型 Linux 下所有的东西都可以看做文件,Linux 将文件分为以下几种类型: 1. 普通文件 ‘-’ 2. 目录文件 ‘d’ 3. 管道文件 ‘p’ 4. 链接文件 ‘l’ 5. 设备文件(块设备 ’b’ 、字符设备 ‘c’) 6. 套接字…

蓝桥杯真题讲解:异或和之和 (拆位、贡献法)

蓝桥杯真题讲解&#xff1a;异或和之和 &#xff08;拆位、贡献法&#xff09; 一、视频讲解二、正解代码 一、视频讲解 蓝桥杯真题讲解&#xff1a;异或和之和 &#xff08;拆位、贡献法&#xff09; 二、正解代码 //拆位考虑 #include<bits/stdc.h> #define endl &…

AI时代,AI智能交互数字人赋能公共服务降本增效

人工智能时代&#xff0c;AI交互数字人技术不断在冲击公共服务领域。越来越多公共服务领域开始在自身业务中运用AI智能交互数字人&#xff0c;通过布局AI交互数字人应用于代言人、推荐官、客服、主播等诸多领域。 近年来&#xff0c;数字人技术正在成为引领数字化时代营销的重…

【Python】科研代码学习:八 FineTune PretrainedModel (用 trainer,用 script);LLM文本生成

【Python】科研代码学习&#xff1a;八 FineTune PretrainedModel [用 trainer&#xff0c;用 script] LLM文本生成 自己整理的 HF 库的核心关系图用 trainer 来微调一个预训练模型用 script 来做训练任务使用 LLM 做生成任务可能犯的错误&#xff0c;以及解决措施 自己整理的 …

【STM32】串口助手接受数据是乱码如何解决

第一步 首先判断自己使用的串口助手和工程配置的波特率是否相同&#xff0c;一般都是115200 第二步 如果不是上一条的问题&#xff0c;继续排查&#xff0c;检查时钟问题 打开工程&#xff0c;找到此文件(stm32f10x.h)的这个位置&#xff0c;如工程中未添加&#xff0c;可以从…

B2B2C电商系统源代码部署,让你轻松开启网店生意

在当今数字化时代&#xff0c;开设一家网店已经变得异常简单。借助B2B2C电商系统源代码部署&#xff0c;你可以轻松搭建自己的在线商城&#xff0c;开始网店生意。这种系统为企业提供了一个强大的平台&#xff0c;让他们可以直接与制造商和消费者进行交易&#xff0c;从而实现品…

【生成式AI導論 2024】第4講:訓練不了人工智慧?你可以訓練你自己 (中) — 拆解問題與使用工具

文章目录 我的总结 拆解任务让语言模型检查自己的错误为什么同一个问题每次答案都不同&#xff1f;组合拳使用工具使用工具-搜索引擎-RAG使用工具-文字生图AIGPT4 其他插件 from: https://www.youtube.com/watch?vlwe3_x50_uw 我的总结 复杂任务拆解为多个步骤让模型检查自己…

redis缓存满了的话会发生什么?

线上问题 未及时加监控&#xff0c;导致线上redis被逐出&#xff0c;业务有损 示例&#xff1a; 一个key临时存储在redis等缓存中&#xff0c;如果该key在一段时间内有很大作用 比如一次业务请求&#xff0c;上游服务写入一个value&#xff0c;时长1小时&#xff0c;下游服务…

【Android】数据安全(一) —— Sqlite加密

目录 SQLCipherSQLiteCrypt其它 SQLCipher SQLCipher 是 SQLite 数据库的的开源扩展&#xff0c;使用了 256 位 AES 加密&#xff0c;支持跨平台、零配置、数据100%加密、加密开销低至 5 -15%、占用空间小、性能出色等优点&#xff0c;因此非常适合保护嵌入式应用程序数据库&a…

238.除自身以外数组的乘积

题目&#xff1a;给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且…

八、软考-系统架构设计师笔记-系统质量属性和架构评估

1、软件系统质量属性 软件架构的定义 软件架构是指在一定的设计原则基础上&#xff0c;从不同角度对组成系统的各部分进行搭配和安排&#xff0c;形成系统的多个结构而组成架构&#xff0c;它包括该系统的各个构件&#xff0c;构件的外部可见属性及构件之间的相互关系。 软件架…

微信小程序购物/超市/餐饮/酒店商城开发搭建过程和需求

1. 商城开发的基本框架 a. 用户界面&#xff08;Frontend&#xff09; 页面设计&#xff1a;包括首页、商品列表、商品详情、购物车、下单界面、用户中心等。交云设计&#xff1a;如何让用户操作更加流畅&#xff0c;包括搜索、筛选、排序等功能的实现。响应式设计&#xff1…

洛谷 P8816 [CSP-J 2022] 上升点列(T4)

目录 题目传送门 算法解析 最终代码 提交结果 尾声 题目传送门 [CSP-J 2022] 上升点列 - 洛谷https://www.luogu.com.cn/problem/P8816 算法解析 k 0 且 xi, yi 值域不大时&#xff0c;这题是非常简单的 DP&#xff0c;类似「数字三角形」。 记 dp(x,y) 为「以 (x,y) …

笔记79:ROS入门之前的准备

一、ROS是什么 ROS其实是一个伪操作系统&#xff0c;是基于Liunx操作系统的一个用于机器人各个节点之间通信的系统&#xff1b;ROS制定了一系列规则使得每个节点之间遵循相同的通信规则&#xff0c;使得每个人都可以有一个守则区遵守开发自己的节点&#xff0c;也能和别人开发…

Exception异常处理

1. 两种异常处理机制 1.1 使用 throw 关键字手动抛出异常 使用throw关键字抛出异常&#xff0c;代码会的显得简单明了 如下图所示 1.2 使用 try-catch 捕获异常 使用try-catch进行捕获异常&#xff0c;往往会使代码变得更加笼统&#xff0c;层层包裹 如下图所示 2. 自定义…

从零学算法287

287.给定一个包含 n 1 个整数的数组 nums &#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;可知至少存在一个重复的整数。 假设 nums 只有 一个重复的整数 &#xff0c;返回 这个重复的数 。 你设计的解决方案必须 不修改 数组 nums 且只…