回顾前端历史,明晰前端未来

2024-01-26 01:10

本文主要是介绍回顾前端历史,明晰前端未来,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本篇文章适用于 1-3 年的 WEB 新人也同样适用于 3-5 年的前端老人。本文是回顾历史,预测未来的文章,所以会以时间线的形式一步一步过来,会有 WEB 的诞生,WEB 发展的重大转折点。让你清晰明白 WEB 诞生的历史意义?没有浏览器人们如何查阅信息?IE 作为 windows 预装的浏览器为什么不如 Google 浏览器的市场份额大等等

1991 年 HTML 诞生了
回顾前端历史,明晰前端未来
在 web 诞生之前人们之间的信息查看极不方便。你可以试想一下你用命令行去浏览现在看的网页,上图就是当时用命令行做的纯文字游戏,如果你用过说明你真的是资深互联网人了。
回顾前端历史,明晰前端未来
如果能够通过更加直观的形式供大家预览将会是非常幸福的事情。于是 Tim Berners-Lee 博士提出了World Wide Web 的设计方案:包括浏览器、服务器、网络传输协议。于 1991 年对外发布,所以 1991 年是 web 的破蛋日。

1993 年 cookie 的诞生
写这篇文章的时候我查阅了大量的资料,但是大都没有讲到 cookie。但是他的重要性一点点都不亚于 JS 的诞生。http 协议是无状态的,这就表明没法做用户追踪,没有这个东西 web 就只是一个纸质书的替代品而已。但是有了这个东西,整个 web 就开始繁荣起来了,他不再是单项的沟通平台,他具备了双向沟通的潜力。他能够更好的服务用户提供更多的专属服务,所以我觉得有必要单独拿出来谈一谈 cookie。而且作为经典面试题 cookie,localStorage,sessionStorage 的区别你也应该更多的关注他。

1996 年相继诞生的 CSS,JS
回顾前端历史,明晰前端未来
谈到 JS 就必须要了解几个疑问。

1.为什么需要 JS
初期的浏览器只是纯粹的供大家浏览信息,最多的交互就是链接。单击一下弹出一个新的窗口看相关介绍。浏览器一定程度上就跟书一样是查阅资料的。后来有了 form 表单浏览器不仅能够查阅信息还能够收到用户反馈。但是也不能够随便反馈,需要添加一下限制,比如文字长度啊,填写格式啊。这个时候对于信息的处理都是放到服务器上的,要是信息不合格界面还不能保存用户输入的内容。输入了 100 个字告诉你你写的有问题重新写一遍气不气,而且当时的网络还极其差劲,提交一次就要等好几秒钟。于是为了提高用户体验 JS 就诞生了。

  1. JS 的竞争对手有哪些,为什么最后 JS 独占鳌头?
    跟 JS 同时代的强势竞争对手主要是IE 的 JScript,CEnvi 中的 ScriptEase。在角逐浏览器脚本的时候没有统一的规范,三大主要浏览器脚本各自发力同样的功能不一样的写法就好比如今的 IOS Android 一样。混乱不堪于是 JS 的创始人布兰登 * 艾克于1997年,以 javascript1.1 为蓝本的建议提交给了欧洲计算机制造商协会也就是 ECMA 。该协会指定39号技术委员会来负责此事。这个时候就有了规范,后来想做浏览器的人都开始依照规范设计自己的出版,于是 ECMA 规范就越来越大众。文章开头提到了 IE 为什么被淘汰,就目前大众认为的原因性能差,界面混乱,功能不全。但其实根本原因是因为 IE 没有很好的支持 ECMA 规范导致程序员实现一个功能是很费劲的那实现不了在大众眼中不就是功能不全和界面混乱么。

  2. JS 为什么会成为如今浏览器的标配,而且生命力至今生生不息。
    这得益于当时 ECMA 规范的先进性。在制定第一版的时候就有3个很重要的原则:

把所有和浏览器相关的代码全部删掉,这也是javascript1.2 与 javascript1.1 不兼容的主要原因。
要求对象和平台无关。
全面支持Unicode的编码,这是为了以后能支持多语言的开发。
可以看出Js在设计之初就不是客户端语言,所以js可以在很多平台去使用,比如node.js,甚至在很多机顶盒里也在使用js。现在很多人开始叫 js 为 ECMAScript。从历史角度发展来看 js 应该包括 ECMAScript,因为一个完整的 JS 应该包括:

核心(ECMAScipt)

文档对象模型(DOM)

浏览器对象模型(BOM)

  1. JS 的风格为什么像面向对象语言又如此支持函数式编程?
    这不得不说到 JS 的创始人 Brendan Eich 和 Brendan Eich 所在的网景公司。Brendan Eich 是函数式编程的信徒,并且还比较讨厌 JAVA,但是网景公司的创始人都是 java 的教徒,当时 java 作为唯一的跨平台语言魅力十足。于是 Brendan Eich 就不得不在公司的压力之下使得 JS 有很多面向对象的特性。为什么说 Brendan Eich 比较讨厌 JAVA 呢,看下面这句话:

"Java(对Javascript)的影响,主要是把数据分成基本类型(primitive)和对象类型(object)两种,比如字符串和字符串对象,以及引入了Y2K问题。这真是不幸啊。"
回顾前端历史,明晰前端未来
1998 年 ajax 的诞生
ajax 诞生是很早的,在 1998 年的时候就被微软实现了。但是直到 2005 年 2 月人们才发现他的作用,于是大规模普及开来。现在来看 ajax 是一个稀疏平常的事情,就像白开水一样理应存在。所以正如人没有水不能活一样, web 离开了 ajax 也不能活。你可以想一下现在用的最火的框架 Vue,Angular,React 页面呈现内容的方式都是通过 ajax 获取到内容然后渲染到页面上,没有了 ajax 就没有他们了。ajax 为 web 前端工程师的诞生创造了条件。

2005 年 “web工程师” 的诞生
虽然 web 诞生这么久,但是一直到 2005 年是都是没有 web工程师的。这个概念首次来自于淘宝,2005 年是淘宝的大规模扩充其,极高的用户访问量和并发量使得对于页面的交互跟响应速度都有了极高的要求,因此需要更加懂 web 的人来服务于此。因此 web 工程师诞生了。不再是切图仔,一直到今天 web 工程师的地位终于发生了聚变成了一个团队中的核心之一。

2006 年 jQuery 的诞生
1997 年虽然有了 ECMA 提供的标准但是各大浏览器厂商之间并不是完全兼容的,有的浏览器厂商会实现很多更加有好的特性来吸引开发者入住,吸引客户使用。于是战乱纷飞,即使到了今天写的代码也需要兼容比如 CSS 的前缀 -webkit-,-o-, childrens 获取子节点的不同表现。于是一套代码 多个 if else 。而处理的事情几乎相似 if 判断的是什么浏览器,以此写出这套浏览器的代码。就目前写出一套代码都相当困难更别说好几套了,不×××都没有资料的,×××了资料你也看不懂。即使就目前支持谷歌翻译了,这东西 emmmm。

于是 jQuery 诞生了。浏览器的兼容问题被解决了,而且当时的链式结构爽到不能再爽虽然在今天看来又被找到了瑕疵。。。

所以 jQuery 的诞生让 web 开发工程师的门槛大幅度降低使得 web 涌现出了惊人的活力。

2009 年 Node 的诞生
node是采用 js 语法使用 v8 引擎进行编译的一门语言。他的诞生使得web 工程师有了写服务端的能力,但是从前端的角度来讲我认为这只是次要的。真正的核心是他给了前端工程师操纵文件系统的能力,虽然一直有很多种语言都有这种能力,但是对于前端开发者来说并不友好,学习曲线是非常高的。而且大部分这类语言的能力者基本上工资都比前端工程师高,谁还愿意放着高薪不拿拿低薪呢。web 工程师要比任何其他工程师知道自己需要什么,好比 babel,css 预编译器。各种脚手架,各种打包器。这些 java 工程师也会做,但是他做了绝对没有几个 web 工程师搞得懂。但是 node 不一样了,天生的语法优势注定了他的辉煌。单独拿 babel 来说,从前大家都是等到标准一个阶段一个阶段确定了之后各个浏览器厂商再去实现它,有很多非常好用的功能必须要等好几个月甚至一年才能用上。但是有了 babel 就不一样了。能够将新的语法打包成目前浏览器支持的语法。node 让 web 开始变成一个越来越工程的化的东西,也使得前端的门槛变得更高但是却让互联网从业者的门槛变得更低。

也就是基于这个时代一边作图一边写页面的切图仔终于搞不定了, web 工程师开始广泛流行起来。

2012 年 MVVM 的时代拉开序幕
这一年谷歌发布了 angularjs 1.0 。mvvm 的时代拉开了序幕,之后紧接着诞生的 react,vue 都以其自身独有的优势开始抢占市场。也正是他们的出现 jQuery 的时代渐渐褪去。上面说过 jQuery 是帮助工程师兼容浏览器极大提高开发效率而诞生的巨头。但是随着浏览器的规范,js的发展以及内核的大一统 jQuery 的历史意义已经渐渐不存在了。所以渐渐褪去是必然的。

那么 vue,react,angular 他们存在的或者是解决的难题在哪里呢?他的主要优势是俩部分,一是前文说过完整的 js 包含三部分。

核心(ECMAScipt)

文档对象模型(DOM)

浏览器对象模型(BOM)

三个肯定没有一个容易学,于是他们将三部分变成了一个部分。我相信任何一个经历过操作 DOM 时代过来的人都深有体会。数据跟试图同步绝对是阻碍 web 工程师效率的极大难题。

二是移动互联网的到来形成了新的信息分享方式,诞生出的 ios Android 俩大阵营。他们极大地冲击了 web开发工程师。但是他们有一个极大地缺点就是同样的东西需要写俩套,俩肯定没有一个容易。于是 js 的跨平台性展现出来了,能够写一套代码运行俩边,但是性能上有很大的局限性。于是 spa 模式的诞生大大提高了性能。

2014年 html5 css3 的诞生
随着日益快速的网络,性能更高的 js 引擎,要求越来越高的 UI 和交互 HTML5 和 CSS3 诞生了。CSS3 提供的旋转、阴影、3D,HTML5 提供的 video,localstorage 等等。进一步提高了 web 工程师的门槛

总结与明晰未来
重大历史节点还有很多,像 flash,asp,php,jsp 为 web 带来的影响。但是他们对于前端开发者来说意义并不大所以就不重点说了。

总结一人群 :使用者和制作者,从一次一次的重大事件中可以看到每一次变革都是服务于这俩类人的。JS 的诞生给使用者提供了更友好的交互,HTML5,CSS3 给使用者提供了更加丰富的界面展示。jQuery,Vue,React,Angular 极大地提高了制作者的开发效率以及降低了开发难度,node 赋予了制作者更多了能力。可以想象未来的重大节点也一定是给用户带来更好的服务,给制作者提供更好的工具和更快的开发效率。

总结二历史意义 :jQuery 的历史意义是兼容浏览器,后来兼容性问题渐渐不存在也就慢慢的被替代了。flash 为 web 提供了视频体验但是随着 html5 直接支持 video,flash 就慢慢的被替代了。php,jsp... 赋予了 html 编译的能力但是 vue,angular,react 赋予了这种能力更好的前景于是也慢慢被替代了。而 web 你可以看到他诞生的意义就是为了给用户一个信息交流的平台,信息交流肯定是贯穿整个人类历史以及未来的,因此 web 的初衷永远不会消失。web 消失的唯一可能就是新的替代品,目前的 PC ,手机市场已经相当成熟由此看来 web 也不会被替代。唯一有可能的是 VR 作为新的信息流通工具他的前景是广泛的并且不同于 PC 和 手机。VR 是以 3D 的场景作为一个载体,目前的交互方式是以类似遥控器的手柄为主。目前已经有很多成熟的软件和平台了,具体实现的语言我还没了解过,但是里面是没有体现出来 web 的使用场景的。但是目前阶段他是不会淘汰 PC 和 手机的使用场景的,后期即使做到了 能够手指控制赋予文字交流的能力可能会淘汰 PC 但是手机依然是很强力的产品,web 会被分流但是肯定不会被淘汰的。

总结三发展周期 :这个可以说是一个历史规律,没有发生只能说是时间还不够长。什么规律呢:从无到有,人有我优,人优我廉,人廉我走。可以看到 web 已经经过了从无到有的过程,目前正在人有我优的阶段,而且随着 web 高度的发展从制作者的角度出发这个阶段目前还是上升的趋势,从使用者的角度出发。用户体验已经到了一定的阶段了,除非 3D 的交互到来。所以这里面开始进入了人优我廉的阶段,所以随着前端开发者的涌入低阶从业者的市场价值开始走低,高端的会呈现上升趋势。

文章就到这里了,有不对的地方欢迎指出。后期还会有更多的优质文章并且会以系列的形式推出,不会杂乱无章,不想错过就关注我吧。你们的关注点赞是我开源的动力,毕竟我也是可以私藏的。

这篇关于回顾前端历史,明晰前端未来的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/645208

相关文章

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali