当我们在谈论前端的时候我们在谈些什么

简介: 当我们在谈论前端的时候我们在谈些什么

image.png

image.png

这是2021年github发布的统计图,可以看出JavaScript已经霸榜好多年。这也说明前端已经从一个不起眼的页面小子变成了起眼的页面小子(不是名副其实的前端攻城狮。当我们想要谈论前端时,那不得好好谈谈它的发展史~


起源



最早的web是向人们提供信息和信息服务。

1990 年,蒂姆·博纳斯·李发明了第一个万维网浏览器,标志着前端技术的开始。该浏览器起初为了满足世界各地大学和研究所的科学家之间对自动信息共享的需求而设计和开发的。所以这也是HTML顶层的声明是DOCUMENT的原因。同年他开发出了世界上第一个网页。

image.png


前后不分



静态网页


初期的网页都是静态的,主要是像用户展示一些信息,就像是把报纸放在了电脑上提供给很多人浏览一样。用户和网页之间根本没有交互的可能,比如你想点击某个地方让网页做出反应不可能的,所以三剑客之一的JavaScript诞生了。


1995年,网景公司的布兰登·艾奇迫于公司的压力,他仅仅用了10天就将JavaScript设计了出来。所以导致后面很长一段时间Javascript写出来的程序逻辑不严谨,变量类型不明确等,它天生的设计缺陷也为后面开发者的使用构建大型项目埋下了隐患。 这也是后面TypeScript火爆的原因。


但至少JavaScript的出现使得开发者可以让用户和网页之间有一定的交互,同时网页也出现了一些动画效果。但是这其实还算不上真正的动态网页。


动态网页


JSP 、PHP、ASP等技术的出现代表者前端进入了动态网页的时期。但是你会发现这些都是服务端语言。没错,当时的前后端是混在一起的,后端将数据嵌套进前端页面中,比如以下JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<body>
  <%out.print("hello juejin");%>
</body>
</html>

浏览器每次发出http请求后端就会返回一个处理好的html提供给浏览器,然后浏览器对其进行渲染


Ajax诞生



Ajax的出现可谓是前端发展的里程碑,它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。这样使得前前端可以从后端独立出来了,市场上也终于有了前端这一岗位。同时web也进入了2.0时代


混沌时代



随着前端的发展,大量浏览器涌入市场,其中当时最具代表性的有IE浏览器、网景浏览器、谷歌浏览器、火狐浏览器等。不同的浏览器各自制定自己的一套规范,这导致当时的网页开发者苦不堪言。好在当时有W3C(css和html规范文档)和ECMA(js规范文档)制定了开发的规范。

这期间IE浏览器和网景浏览器还发生过一场尤其激烈的大战,最后微软凭借着自己的操作系统打败了网景浏览器,以至于现在已经没有了网景浏览器的影子。

但是微软凭借一家独大却没有遵循这些规范,所以到现在解决兼容性问题依然是我们这些前端工作者的难题,尤其是这万恶的IE浏览器。


jQuery的盛行



image.png


jQuery是一个伟大的库,它的出现不仅解决了当时浏览器api的兼容问题,还使得dom操作变得更加方便。还引入了易于使用的插件扩展机制。它优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手,因此很快风靡全球。


当时网上出现很多对于JQuery源码的分析,就像现在的开发者们研究vue和react等源码一样。甚至它也是面试前端的常见问题之一。


随着移动互联网的到来还推出了适合移动端的Zepto.js ,多了更多的移动端的事件的支持,如tap事件、swipe事件


当时也衍生出了很多基于jq而生的框架和插件,比如著名的MVC框架Backbone.js还有我们以前熟悉的UI框架Bootstrap,LayUI等。


技术的发展趋势就是追求更高的复用性,更简便的业务代码写法。直接对dom进行操作显然不符合这个趋势,因为它的方式不是最佳的,社会对开发效率和代码复用性的追求最终导致了jQuery的淘汰。现如今,也没有人再问jQuery的源码,也没有人去关注以前火热的Bootstrap,早在2018年Bootstrap 4发布的时候就有人质疑它是否还符合现在的时代。

回想起当时使用JQuery仿佛是昨天一样,而今天它就被淘汰了。眼看它起高楼,眼看它群宴宾客,又眼看它忽然倒塌。这就是前端技术的发展速度。

但是受到JQuery的影响现在还是有一部分人在用JQuery的

image.png


NodeJS发布



image.png

2009年5月,一个划时代的产品NodeJS发布了,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境 。它将JavaScript带入到后端服务器开发。

因为当时世界上已经有无数的JavaScript开发人员,所以Node一下子就火了起来。它让前端开发者可以无需多少学习成本就可以直接进行服务端的开发,所以当时出现了一个新的名字全栈工程师。同时前端流传这样一句话:Any application that can be written in JavaScript, will eventually be written in JavaScrip(Dog head to save life)。它的出现前端界就像改革开放一样,走进了一个令人目不暇接的新时代~


三大框架



2009年AngularJS发布,2011年React出现,2014年Vue.js诞生。

AngularJS是现代前端框架的始祖,它是由谷歌开发的Web框架。它的出现简化了开发人员对dom的操作。我们不需要再像之前使用js、jq那样,要对直接对dom进行操作,而是只需要关注数据的变化,对dom的操作由框架内部帮我们完成。同时它可以将一个模块进行封装,然后实现高度复用。


React开始是Facebook开发的一个内部框架,然后发现这个框架还挺好用,于是就在2013年5月开源了。React可以说它算不算是一个完整的前端框架,它基础的 UI 库,因为它并不试图解决所有问题,很多解决方案都是社区提供,像Router,Redux等。所以使用React开发是很灵活的,但又是很繁琐的(相比于Vue


Vue.js是由一个叫尤雨溪的中国人开发的,所以它在中国的流行度很高。它是基本算是一个MVVM框架。它应该算是新人最容易入手的框架之一,同时它社区的中文文档也是最完善的,这样造就了在国内使用它的前端开发者最多。它的特点是封装了很多指令如v-for,v-if等,所以使用起来很方便。每一个.vue文件都是一个组件(SFC),所以我们每次新建一个组件时都要新建一个.vue组件。但同时这种SFC在TypeScript官方是不支持的,但是TypeScript是支持React中的JSX的。这样为TS+Vue开发者带来了一定的困扰。


小程序时代



image.png

2017年1月9日,微信推出了小程序,它是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想。它的成功使得各大厂商开始研发自己的小程序,后面相继出现了支付宝小程序,百度小程序,字节跳动小程序等。而中国互联网也即将进入一个新时代——超级APP内置应用Web化的时代。


多端框架



随着市场需求越来越高,单纯的App或Web开发已经不足以满足市场需要。所以跨端框架应运而生。如京东的Taro,DCloud的uniapp,react的ReactNative等,甚至鸿蒙OS也率先支持了JavaScript。开发者只要编写一套代码即可四处运行。所以导致传统的移动开发在一路下,以前端技术为核心的开发方式,在移动端越来越成为主流方式。


前端的发展不仅局限于手机端的产出,甚至已经渗透到桌面端的领域,例如Electron,NW.js等。像飞书,阿里云盘,还有大名鼎鼎的VSCode等等都是用Electron开发出来的。


未来



随着前端技术的发展,已经衍生出很多的就业方向。如今各种眼花缭乱的新型名词如微前端,低代码,web3.0,Web3D,元宇宙等出现在我们眼前。这使得前端开发者不得不加快学习的脚步才能不被这个行业所淘汰。但是无论前端技术如何发展它们最牢固的基石还是JS,Css,Html。所以无论你选择了哪个方向,走了多远,都要时不时的回头看看你最初的老伙伴。


相关文章
|
2月前
|
移动开发 前端开发 JavaScript
前端需要掌握的技术有哪些方面?
前端需要掌握的技术有哪些方面?
105 1
|
3月前
|
开发框架 程序员
「随笔」编程中的技术难题与挑战
编程中的挑战如bug、性能优化和跨平台兼容性,常考验程序员的智慧和经验。空指针异常需仔细检查代码,内存泄漏需使用分析工具并理解内存管理,而跨平台兼容性涉及不同设备接口和协议。程序员通过创新方法,如内存管理和跨平台框架,解决问题,展现创造力和技能。这些难题既是障碍,也是成长的契机。
29 0
|
5月前
|
人工智能 前端开发 JavaScript
前端:魅力与技术并存的艺术
前端:魅力与技术并存的艺术
35 3
|
5月前
|
人工智能 前端开发 JavaScript
前端已死?不,前端正在进化
前端已死?不,前端正在进化
101 0
|
5月前
|
前端开发 JavaScript 开发工具
前端知识笔记(三十)———前端需要掌握的技术有哪些方面
前端知识笔记(三十)———前端需要掌握的技术有哪些方面
87 1
|
5月前
|
前端开发 JavaScript 开发工具
前端知识(八)———前端需要掌握的技术有哪些方面
前端知识(八)———前端需要掌握的技术有哪些方面
110 0
|
前端开发 JavaScript 编译器
谈谈前端『新』技术
谈谈前端『新』技术
120 0
|
人工智能 前端开发 小程序
最近很多人都在说 “前端已死”,讲讲我的看法
最近很多人都在说 “前端已死”,讲讲我的看法
130 0
|
C语言
如何更好地刷题?谈谈我的一点看法
如何更好地刷题?谈谈我的一点看法
105 0
|
缓存 前端开发 JavaScript
前端成功转型后端开发的机会在哪里;如何评价框架TailwindCSS;前端的未来是远程工作吗|极客观点
前端成功转型后端开发的机会在哪里;如何评价框架TailwindCSS;前端的未来是远程工作吗|极客观点
296 0
下一篇
无影云桌面