Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >宏观泛前端

宏观泛前端

作者头像
lonelydawn
发布于 2022-09-20 12:00:13
发布于 2022-09-20 12:00:13
6310
举报

Web 发展

从静态走向动态

Web 诞生

最早的网页是欧洲粒子物理研究所的科学家为了方便查看和共享文档,而基于 XML(Extensible Markup Language) 创造的,这也是为什么前端最重要的全局对象被称为 document,而不是 context/page/application 的原因。当时的网页只具备文本、图片的显示和页面间相互跳转(Hyper Link)的功能,因此被称为 HTML (Hyper Text Markup Language)。

当时的Web,功能十分简单,开发也不复杂。开发者把写好的网页放在服务器指定位置(Web服务根目录)下,将文档地址分享给使用者,使用者在浏览器中输入文档地址即可访问网页。

CGI

早期的 HTML 作为静态文件,即使不同网页的差异只在于部分区域,那么有多少种不同的可能,就需要准备多少份文档,这对开发者来说非常不友好。而且,网页也不提供前后端之间的数据交互。

CGI(Common Gateway Interface)的出现改善了这一情况。CGI 是一种服务器拓展功能,可以将从数据库文件系统获取的数据,与 HTML 静态模板拼接后生成的网页返回给客户端,从而实现了网页的动态生成。在接收到用户请求后,CGI 还可以返回相应处理后的网页。

CGI 被认为是服务端脚本语言的鼻祖。然而,它也有着非常致命的缺陷。首先,CGI 每收到一个请求,都会新开一个进程进行处理,性能很低。当请求量成千上万时,服务器可能无法支撑以致崩溃。其次,黑客很容易通过不完善的 CGI 程序入侵开发者的服务器,系统安全无法得以保证。

CGI 的出现给当时刚起步的 Web 提供了一个发展方向。在这之后,PHP、JSP、Ruby、Python 等各种服务端语言层出不穷,不仅弥补了 CGI 的缺陷,而且在性能和开发效率上也有了很大提升。 从此,Web 从静态走向动态。

从后端走向前端

Web 发展初期

在 Web 发展初期,前后端是如何协作的呢? 由于网页是在服务端使用脚本语言和 HTML 模板渲染出来的,所以前端可以书写这种模板,交给后端使用,之后联调保证模板套用无误。有时甚至不需要前端来写模板,只需要提供一些 CSS 样式表就可以了,模板由后端自行编写和调用。 在这种开发环境下,前后端耦合紧密,项目开发需要很高的协作成本。

除此之外,当一个页面的交互请求发送到服务端之后,依旧需要经历路由解析、数据处理、服务端渲染、返回网页等步骤。页面上哪怕只有一小块数据需要更新,浏览器也需要重新请求和渲染整个页面。 为了优化性能,开发者往往会使用一些特殊的策略。比如,将页面上可能发生更新的区域拆分为一个个子网页,然后在父页面上使用 iframe 来展现这些子网页。当一块区域需要更新时,只需要重新请求对应的子网页就可以了,因此也实现了父页面上的“局部页面刷新”。

这种做法虽然提高了一些性能,但是使页面看上去更像一件“打满补丁的旧衣服”,而且存在很多问题。比如,在开发方面,页面该如何拆分、页面改版时该如何理解和维护原有设计;在性能方面,这种局部刷新也未实现精准刷新,iframe 的加载还会带来额外的性能损耗。于是,从事 Web 的前辈们开始探寻其他一些解决方案,比如 jsonpAjax(Asynchronous Javascript And XML)

JSONP
Ajax

在 JS 中,开发者可以通过 XMLHttpRequest 对象,在不重新加载页面的情况下与服务端交换数据;之后使用 DOM 对象,可以很轻松地将数据渲染到页面上。

早期,Ajax 并未得到很多重视。直到 2005 年,Google 发布了全面使用 Ajax 打造的 Gmail。人们惊讶地发现,原来使用异步数据交互的体验是如此的好。从此,Ajax 得到广泛应用。 得益于 Ajax 的推广,前后端分离的趋势日渐明显,前端不再需要依赖后端生存,所有数据都可以通过异步交互来获取。在取得一个完整定义的数据接口后,前后端甚至可以在零协作成本的情况下并行完成开发任务。

SPA

随着硬件设备不断发展,客户端的计算能力愈加过剩,越来越多的业务逻辑开始放到前端处理,比如页面路由。 过去要跳转一个地址,需要经由服务端的路由解析处理后,返回对应的页面。而在使用 BOM 的一些无刷新跳转特性后,前端可以实现改变浏览器地址栏而不向服务端发送请求,因此也可以实现页面路由。在这种应用中,服务端只需要提供一个页面入口,所有的视图更新都将在这个页面上发生,因此又被称为 单页应用(SPA)

纵观 Web 发展史,从模板引擎到 ajax、从后端路由到前端路由,这一路走来,技术重心已逐渐转移到前端。

从前端走向全端

Node.js

2009年2月,一位名叫 Ryan Dahl 的开发者在博客上宣布准备基于 Google V8 引擎创建一个轻量级的 Web 服务,并为之提供一套组件库。 同年5月,Ryan Dahl 在 GitHub 上发布了最初版本的 Node.js。 从此,JavaScript 进入了服务端语言的行列。开发者很容易使用 Node.js 搭建一个后端服务,实现从前端到全栈的升级。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。得益于 JavaScript 事件驱动和运行环境提供的事件循环机制,Node.js 在处理高并发任务上具有独特的优势,常用作中间层来提供数据缓存、网站路由、服务端渲染等功能。

Hybrid 应用

除了在服务端语言中开辟了一席之地的 NodeJS 外,以在客户端中嵌入 WebView 的 Hybrid 应用同样拓宽了前端发展的道路。 Hybrid 应用 以客户端为骨架,以 H5 为主体,页面将在 WebView 中展示。这种应用充分利用了 B/S 架构的优势,比如,一些用于 WebView 中的页面同样可以在浏览器或其他环境使用,减少了重复开发成本;当 WebView 中的内容发生变更时,用户无需下载和安装更新包,即可访问新的内容,提升了用户体验。

小程序

这几年来,随着各种 小程序 的问世,Web 前端技术早已超脱了浏览器和 Hybrid 应用的范围。前端工程师很容易基于已有技术栈快速上手和开发小程序类微应用。以微信小程序为例,框架使用 WXML 代替 HTML,WXSS 代替 CSS,开发语言由 HTML + CSS + JS 变为 WXML + WXSS + JS。而且,与 Vue & React 相近,它们也是 MVVM 模式。

对于开发者来说,小程序实现了一栈多用,降低了技术学习成本;对于用户来说,无需下载安装的小程序实现了“随用随找,用完即走”的快捷和易用;对于中小型商家来说,小程序降低了应用的使用门槛,提高了用户使用量。然而,小程序依旧需要依托第三方应用平台,无法直接访问操作系统底层,性能相对较差。

快应用

2018年3月20日,业内传出一则消息,小米、中兴、华为、金立、联想、魅族、OPPO、vivo、一加、努比亚十大手机生成厂商联合,开始共建快应用开发平台。

快应用 与小程序一样使用前端技术栈进行开发,应用无需下载和安装即可使用,入口位于手机的应用商店。与小程序相比,快应用的 SDK 并不依赖于第三方应用平台,而是直接依赖操作系统底层,性能相对更好。

electron

在移动端进行布局的同时,前端工作者们还把目光放到了桌面客户端上。

Electron 从 2018 年开始发布,它允许开发者使用 JavaScript/HTML/CSS 构建跨平台的桌面应用程序,并同时提供了一套 SDK 和一个 IDE。开发者可以调用 SDK 与操作系统底层进行交互;在 IDE 上编写的代码,经过编译之后,可分别生成适用于 Mac/Windows/Linux 的软件包。如果你能搭建一个网站,那么你就能建一个跨平台的桌面应用程序。

时至今日,得益于前端技术一栈多用的廉价成本,许多中小型公司也有能力将产品布局到多端了,一个成熟的产线架构已然走向全端。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
做前端的你有没有觉得很吃力?
https://www.zhihu.com/question/425782106/answer/1543007211
用户4456933
2021/06/01
9290
一文读懂前端技术演进:盘点Web前端20年的技术变迁史
本文原文由作者“司徒正美”发布于公众号“前端你别闹”,即时通讯网收录时有改动,感谢原作者的分享。
JackJiang
2019/08/23
5.9K0
一文读懂前端技术演进:盘点Web前端20年的技术变迁史
大前端的未来是否可期?了解下历史先!
在很久很久以前的公元1993年,位于美国的伊利诺州诞生了一位名为NCSAMosaic的孩子。它便是传说中的微软IE、网景以及后续众多网页浏览器的鼻祖。可惜在当时只有少数的幸运儿才可以使用它。
用户1272076
2020/05/22
7300
大前端的未来是否可期?了解下历史先!
H5 秒开方案大全
http://www.alloyteam.com/2019/10/h5-performance-optimize/
刘小夕
2020/08/28
1.6K0
前端科普系列(1):前端简史
回答这个问题之前,我想起了一道非常经典的前端面试题:“从输入URL到页面呈现在你面前到底发生了什么?”这个题目可以回答的很简单,但仔细思考,也可以回答的很深,这个过程涉及的东西很多。先看一张图:
2020labs小助手
2020/03/02
1K0
Web前端 研发模式演变过程
可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基本上是服务端给什么浏览器就展现什么,展现的控制在 Web Server 层。
Javanx
2019/09/04
8880
Web前端 研发模式演变过程
Web技术的发展 网络发展简介(三)
通信协议是通信的理论基石,计算机、操作系统以及各种网络设备对通信的支持是计算机网络通信的物质基础
noteless
2019/02/25
1.4K0
Web技术的发展  网络发展简介(三)
月入35k大佬总结:web前端必须学习的内容(附全套前端教程)
优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析,企业要求主要有两部分,一个是核心要求,一个是辅助要求,核心要求包括:语言技术:JS基础和核心/HTML5/CSS3、框架技术:JQuery、AJAX、Bootstrap、AngularJS、通讯协议技术:HTTP协议、服务端开发技术、交互技术:UI交互设计、客户端技术:微信开发技术、html5、JS、SDK开发、Android、iOS、Web App开发技术。辅助要求有1-3年Web工作经验(近80%的企业)、学历及相关专业、文档规范写作能力、团队合作能力、责任心。
用户5827212
2019/08/26
2.5K0
一个前端工程师的基本修养
有人说互联网是前端工程师的舞台,先不论这个说法是否有些夸大其词,但前端工程师绝对撑起了互联网应用开发的“半壁江山”。随着传统网站、手机应用、桌面应用、微信小程序等次第出现,需要前端工程师设计和完成的客户端功能逻辑在不断复杂化。那么,应该怎么定位前端工程师这个岗位,怎么描绘这个岗位的基本要求呢?下面让我们从前端的发展历史中寻找答案吧。 1. 前端工程师的发展历史 1990年,Tim Berners Lee发明了世界上第一个网页浏览器 WorldWideWeb。1995年,Brendan Eich 只用了1
企鹅号小编
2018/01/18
9110
一个前端工程师的基本修养
苏宁易购:前后端分离架构的落地思考
内容来源:2017 年 12 月 3 日,苏宁易购技术总监禹立彬在“互联网架构峰会”进行《前后端分离架构的落地思考》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。 阅读字数:2851 | 8分钟阅读 摘要 本次分享将为大家介绍前后端分离的存在意义以及典型业务场景,接下来会细致的介绍前后端分离的技术利弊,最后根据苏宁的经验来谈一谈渐进式前后端分离。 嘉宾演讲视频及PPT回顾:http://suo.im/4WlSl9 为什么要前后端分离 前后端分离本质上
IT大咖说
2018/06/04
1.5K3
现代前端技术解析:前端跨站技术
随着前端技术栈在服务端和移动端上的尝试和日益成熟,前端工程师的追求绝不只是页面上的技术,如何实现跨服务端,如何扩展到移动端开发将变成主要讨论议题。
奋飛
2019/08/15
1.2K0
软件架构之前后端分离与前端模块化发展史
在现行的软件架构中,前端和后端是分离的,即前端只专注于页面渲染,而后台专注于业务逻辑,前端和后端是两个不同的工种,而前后端交互最常见的方式就是通过接口。
xiangzhihong
2022/11/30
1.5K0
前后端分离架构概述「建议收藏」
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。
全栈程序员站长
2022/07/22
3.6K0
前后端分离架构概述「建议收藏」
前端和后端分工的三种模式
AlgorithmDog
2017/12/29
2K0
前端和后端分工的三种模式
8.web的发展 互联网发展 起源 历史 cgi web项目发展 企业应用web项目 框架 发展 互联网技术发展 互联网技术包括 web技术发展 web开发技术
计算机网络把分布于各地的单独的计算机连接起来,可以进行数据的共享与交互.这是web的根基
noteless
2018/09/11
1.4K0
8.web的发展 互联网发展 起源 历史      cgi web项目发展  企业应用web项目 框架 发展 互联网技术发展 互联网技术包括 web技术发展 web开发技术
前后端分离后的前端时代,使用前端技术能做哪些事?
什么是前后端分离,要区分前端和后端,需要有个明确的界限。一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了。
一墨编程学习
2018/10/27
2.4K0
干货 | 如何一步步打造基于React的移动端SPA框架
作者简介 喻珍祥,携程港澳研发高级经理,2004年接触互联网开发,见证前端开发从美工到全栈开发的全过程。2014年加入携程,主要负责永安旅游APP移动前端架构和研发。 现今前端新技术井喷一样层出不穷,且各有特点和使用场景,交互变得前所未有的复杂,那么,在众多框架中,如何选择又如何落地呢? 前端框架作为工具,是各种模式,结构的集合,一个原则就是:“如非必要,不换”。但是,打算换一定要有换的道理,首要的原则就是当前的框架已不适应业务的发展,而框架就是要解决业务扩展性的问题。技术选型应从实际出发,透过各种框架的
携程技术
2018/03/16
1.9K0
干货 | 如何一步步打造基于React的移动端SPA框架
【Web技术】244-Serverless掀起新的前端技术变革
最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文来自阿里云前端工程师蒋航在 QCon 北京 2019 的分享,他从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。
pingan8787
2019/07/25
9880
【Web技术】244-Serverless掀起新的前端技术变革
IMVC(同构 MVC)的前端实践
导语 随着 Backbone 等老牌框架的逐渐衰退,前端 MVC 发展缓慢,有逐渐被 MVVM/Flux 所取代的趋势。 然而,纵观近几年的发展,可以发现一点,React/Vue 和 Redux/Vuex 是分别在 MVC 中的 View 层和 Model 层做了进一步发展。如果 MVC 中的 Controller 层也推进一步,将得到一种升级版的 MVC,我们称之为 IMVC(同构 MVC)。 IMVC 可以实现一份代码在服务端和浏览器端皆可运行,具备单页应用和多页应用的所有优势,并且可以这两种模式里通过
CSDN技术头条
2018/02/12
1.4K0
IMVC(同构 MVC)的前端实践
Web标准与前端开发 - 笔记
在 1989 年,在 CERN 工作的 Tim Berners-Lee 写了一个关于信息管理的建议《Informational Management: A Proposal》,提及基于超文本来构建文档网络的想法,这份文档被公认为 Web 的起源。
TagBug
2023/03/17
7570
推荐阅读
相关推荐
做前端的你有没有觉得很吃力?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档