web开发介绍「web开发基础是什么」

互联网 2023-02-13 08:41:07

今天给大家普及一下web开发介绍「web开发基础是什么」相关知识,最近很多在问web开发介绍「web开发基础是什么」,希望能帮助到您。

说到web程序开发,必须先来说说什么是web应用程序。

Web应用程序是互联网的产物。网络诞生以前,软件程序只能部署在单机上。局域网发明后,客户端/服务器端(即c/s模式)的程序架构模式成为主流,随着Internet和WWW的流行,以往的主机/终端和C/S都无法满足当前的全球网络开放、互连、信息随处可见和信息共享的新要求,于是就出现了B/S型模式,即浏览器/服务器结构。它是C/S架构的一种改进,可以说属于三层C/S架构。主要是利用了不断成熟的WWW浏览器技术,用通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能,并节约了开发成本,是一种全新的软件系统构造技术。通俗来讲,web程序是一种运行在互联网上的程序,它借助浏览器来运行,通过Web来访问。Web应用程序最大好处是用户只需要有浏览器就可以访问,不需要再安装其他软件。

B/S模式是web程序的重中之重,理解了B/S模式就理解了web程序,所以我们要着重讲讲,下图是B/S的架构图:

相对于其他几种应用程序体系结构,B/S架构的web应用程序最大的优点是总体拥有成本低、维护方便、 分布性强、开发简单,可以不用安装任何专门的软件就能 实现在任何地方进行操作,客户端零维护,系统的扩展非常容易,只要有一台能上网的电脑就能使用。传统的C/S架构如果部署的客户端比较多,系统管理人员如果需要在众多电脑之间来回奔跑,效率和工作量是可想而知的,但B/S架构的软件只需要管理服务器就行了,所有的客户端只是浏览器,需要做的维护非常少。无论用户的规模有多大,有多少分支机构都不会增加任何维护升级的工作量,所有的操作只需要针对服务器进行;如果是异地,只需要把服务器连接专网即可,实现远程维护、升级和共享。

当然,Web应用程序首先是“应用程序”,和用标准的程序语言,如C、C、DELPHI等语言编写出来的程序没有什么本质上的不同。

下面我重点来说说web开发技术的演化

静态网页的诞生(HTML)

1989年,在欧洲粒子物理实验室的IT部门工作的Tim Berners-Lee向其领导提出了一项名为Information Management: A Proposal的提议:使来自世界各地的远程站点的研究人员能够组织和汇集信息,在个人计算机上访问大量的科研文献,并建议在文档中链接其他文档,这就是Web的原型。1991年,Tim Berners Lee在alt.hypertext新闻组贴出了一份关于World Wide Web的简单摘要,标志了Web页面在Internet上的首次登场。最早Web主要被一帮科学家们用来共享和传递信息,全世界的Web服务器也就几十台。第一个Web浏览器是Berners Lee在NeXT机器上实现,也只能跑在NeXT机器上,苹果和乔布斯的粉丝对NeXT的历史肯定耳熟能详。真正使得Web开始流行起来的是Mosaic浏览器,这便是曾经大名鼎鼎的Netscape Navigator的前身。Berners Lee在1993年建立了万维网联盟(World Wide Web Consortium,W3C),负责Web相关标准的制定。浏览器的普及和W3C的推动,使得Web上可以访问的资源逐渐丰富起来。这个时候Web的主要功能就是浏览器向服务器请求静态HTML信息。95年的时候马云在美国看到了互联网,更准确的说他其实看到的就是Web,阿里早先做的黄页也就是把企业信息通过进行HTML展示的Web应用。

在互联网早期,网站只是简单的信息呈现,网民不能与网站互动,通俗的说就是能看不能写,后来人们把这个时期叫做web1.0时代。

动态内容的出现:CGI

最初在浏览器中主要展现的是静态的文本或图像信息,GIF图片则第一次为HTML页面引入了动态元素。不过人们已经不仅仅满足于访问放在Web服务器上的静态文件,JavaScript诞生之后,可以用来更改前端DOM的样式,实现一些类似于时钟之类的小功能。那时候的JavaScript仅限于此,大部分的前端界面还很简单,显示的都是纯静态的文本和图片。这种静态页面不能读取后台数据库中的数据,1993年CGI(Common Gateway Interface)出现了,Web上的动态信息服务开始蓬勃兴起。CGI定义了Web服务器与外部应用程序之间的通信接口标准,因此Web服务器可以通过CGI执行外部程序,让外部程序根据Web请求内容生成动态的内容。Perl因为跨操作系统和易于修改的特性成为CGI的主要编写语言。当然,CGI可以用任何支持标准输入输出和环境变量的语言编写,比如Shell脚本,C/C语言,只要符合接口标准即可。比如你用C语言编写CGI程序,你把希望返回的HTML内容通过printf输出就可以发送给Web服务器,进而返回给用户。

Web编程脚本语言:PHP/ASP/JSP

为了使得Web更加充满活力,以PHP、JSP、ASP.NET为代表的动态页面技术相继诞生。这个时候我们已经可以在Web上提供动态功能了,比如网站访问的计数,表单的处理。CGI对每个请求都会启动一个进程来处理,因此性能上的扩展性不高。另外,想象一下用在Perl和C语言中的程序中去输出一大堆复杂的HTML字符串,是不是有点蛋疼,可读性和维护性是个大问题。为了处理更复杂的应用,一种方法是把HTML返回中固定的部分存起来(我们称之为模版),把动态的部分标记出来,Web请求处理的时候,你的程序先生成那部分动态的内容,再把模版读入进来,把动态内容填充进去,形成最终返回。举个例子,搜索一个关键词,搜索引擎的Web服务器可以先从后台索引服务器里拿到数据,然后把这些数据填充到返回结果的HTML模版中,返回给浏览器。但是这件事情自己来做显然太繁琐而且是重复劳动。于是1994年的时候,PHP诞生了,PHP可以把程序(动态内容)嵌入到HTML(模版)中去执行,不仅能更好的组织Web应用的内容,而且执行效率比CGI还更高。之后

96年出现的ASP和98年出现的JSP本质上也都可以看成是一种支持某种脚本语言编程(分别是VB和Java)的模版引擎。96年W3C发布了CSS1.0规范。CSS允许开发者用外联的样式表来取代难以维护的内嵌样式,而不需要逐个去修改HTML元素,这让HTML页面更加容易创建和维护。此时,有了这些脚本语言,搭配上后端的数据库技术,Web更是开始大杀四方了,像电子商务这样的应用系统也可以通过Web技术来构建。Web已经从一个静态资源分享媒介真正变为了一个分布式的计算平台了。反过来看,你也应该知道,不是只有当今这些流行脚本语言可以写Web应用,C语言一样可以做这件事情。前面举的搜索引擎通过C语言来获取数据和渲染Web页面的例子在追求极致访问速度的互联网公司是非常常见的,但是脚本语言在开发效率上更胜一筹。

PHP(PHP:Hypertext Preprocessor)最初是由Rasmus Lerdorf在1995年开始开发的,现在PHP的标准由PHP Group维护。PHP是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用。PHP的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点,易于一般程序员学习。PHP的主要目标是允许网络开发人员快速编写动态页面。

JSP(JavaServer Pages)是由Sun公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求,从而动态生成HTML、XML或其他格式文档的Web网页的技术标准。JSP技术是以Java语言为基础的。1999年,JSP1.2规范随着J2EE1.2发布。

ASP(Active Server Pages)1.0是Microsoft(微软公司)开发的服务器端脚本环境,可用来创建动态交互式网页并建立强大的web应用程序。 在1996年随着IIS 3.0 而发布。2002年,ASP.NET发布,用于替代ASP。

随着这些动态服务器页面技术的出现,页面不再是静止的,页面可以获取服务器数据信息并不断更新。以Google为代表的搜索引擎以及各种论坛相继出现,使得Web充满了活力。

随着动态页面技术的不断发展,后台代码变得庞大臃肿,后端逻辑也越来越复杂,逐渐难以维护。此时,后端的各种MVC框架逐渐发展起来,以JSP为例,Struct、Spring等框架层出不穷。

分布式企业计算平台:J2EE/.Net

Web开始广泛用于构建大型应用时,在分布式、安全性、事务性等方面的要求催生了J2EE(现在已更名为Java EE)平台在1999年的诞生,从那时开始为企业应用提供支撑平台的各种应用服务器也开始大行其道。Java Servlet、Java Server Pages (JSP)和Enterprise Java Bean (EJB )是Java EE中的核心规范,Servlet和JSP是运行在服务器端的Web组件,EJB运行在服务器端的业务组件,是一种分布式组件技术。

2000年随之而来的.net平台,其ASP.net构件化的Web开发方式以及Visual Stidio.net开发环境的强大支持,大大降低了开发企业应用的复杂度。ASP.Net第一次让程序员可以像拖拽组件来创建Windows Form程序那样来组件化地创建Web页面,Java平台后来出现的JSF也承袭了这一思想。两大平台在相互竞争和模仿中不断向前发展。

从Web诞生至2005年,一直处于后端重、前端轻的状态。

前端技术的发展:

XHTML

1999 W3C 发布 HTML 4.01 标准,同年微软推出用于异步数据传输的 ActiveX,随即各大浏览器厂商模仿实现了 XMLHttpRequest(AJAX 雏形)。

2000: W3C 采用了一个大胆的计划,把 XML 引入 HTML,XHTML1.0 作为 W3C 推荐标准发布

2001.5 W3C 推出了 CSS 3.0 规范草案

2002-2006 XHTML 2.0 最终放弃

2009 W3C 宣布 XHTML2.0 不再继续,宣告死亡

JavaScript

Web应用同时涉及到浏览器端和服务器端,之前的介绍除了简单提到了CSS规范之外,主要关注的是服务器端的技术发展。在客户端,1995年NetScape公司设计的JavaScript被用作浏览器上运行脚本语言为网页增加动态性。微软随后推出类似JScript,但是缺乏统一的语言规范,使得浏览器兼容性成为一个程序员的梦魇。JavaScript最终被提交到欧洲计算机制造商协会(ECMA),做为中立的ECMA开始了标准化脚本语言之路,并将其命名为ECMAScript。JavaScript可以响应浏览器端的用户事件,检测表单的正确性,动态修改HTML页面结构DOM,因此可以减少与服务器端的通信开销,并且做出很酷的页面动态效果。2005年出现的AJAX这个概念使得JavaScript再次大放异彩。

ECMAScript6

JavaScript语言是ECMAScript标准的一种实现,截止2017年2月,ECMAScript一共发布了7个版本。

1997年6月, ECMAScript 1.0标准发布。

1998年6月,ECMAScript 2.0发布。

1999年12月,ECMAScript 3.0发布。

2007年10月,Mozilla主张的ECMAScript 4.0版草案发布,对3.0版做了大幅升级,该草案遭到了以Yahoo、Microsoft、Google为首的大公司的强烈反对,JavaScript语言的创造者Brendan Eich和IE架构师Chris Wilson甚至在博客上就ES4向后兼容性问题打起了口水仗,最后由于各方分歧太大,ECMA开会决定废弃中止ECMAScript 4.0草案。经各方妥协,在保证向下兼容的情况下,将部分增强的功能放到ECMAScript 3.1标准中,将原有ECMAScript 4.0草案中激进的功能放到以后的标准中。不久,ECMAScript 3.1就改名为ECMAScript 5。

2009年12月,本着'Don’t break the web'原则,ECMAScript 5发布。新增了strict模式、属性getter和setter等。

2011年6月,ECMAScript 5.1发布。

2015年6月,ECMAScript 6.0发布。该版本增加了许多新的语法,包括支持let、const、Arrow function、Class、Module、Promise、Iterator、Generator、Set、Map、async、Symbol、Proxy、Reflect、Decorator等。TC39委员会计划以后每年都发布一个新版本的ECMAScript,所以ECMAScript 6.0改名为ECMAScript 2015。

2016年6月,在ECMAScript 2015的基础上进行了部分增强,发布了ECMAScript 2016。

在ECMAScript的各个版本中,ECMAScript 6.0无疑最受人瞩目的,它增加了许多新特性,极大拓展了JavaScript语法和能力,以至于许多浏览器都只能支持部分ES6中的新特性。随之,Babel和TypeScript逐渐流行起来,编写ES6代码,然后用Babel或TypeScript将其编译为ES5等浏览器支持的JavaScript。

ECMAScript以后每年将会发布一个新版本,这无疑将持续促使浏览器厂商不断为JavaScript注入新的功能与特性,JavaScript走上了快速发展的正轨。

javascript技术发展的过程中出现了很多优秀的类库和组件,其中,jQuery独领风骚,几乎成了所有网站的标配。Dojo、YUI、ExtJS等提供了很多组件,这使得开发复杂的企业级Web应用成为可能。

AJAX

在Web最初发展的阶段,前端页面要想获取后台信息需要刷新整个页面,这是很糟糕的用户体验。

AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术,可以基于JavaScript的XmlHttpRequest的用于创建交互性更强的Web应用。AJAX是一种已有技术的mashup,多种技术组合在一起形成了其特色和优势,早在1998年就已经开始有人使用。Google在地图和Gmail等产品中对这项技术的深入应用,以及AJAX这个吸引眼球的名字的提出,使其正式站在了聚光灯下,开始吸引无数人的目光。我们知道Web应用中用户提交表单时就向Web服务器发送一个请求,服务器接收并处理传来的表单,并返回一个新的网页。而前后两个页面中的往往大部分HTML代码是一样的,每次都返回整个页面内容是一种带宽资源的浪费。而AJAX应用仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器响应,更新页面的局部信息。这样不仅浏览器和服务器的数据交换大大减少,而且客户端也可以更加快速地响应用户操作。如果你用Gmail就应该知道,Gmail从来都不刷新页面,所有的请求都是通过AJAX获取数据进行局部更新。AJAX的出现,以及诸如EXTJS、DOJO等一些前端开发框架的出现,也使得单页应用(Single Page Application)在这个时候流行起来。

随着AJAX的流行,越来越多的网站使用AJAX动态获取数据,这使得动态网页内容变成可能,像Facebook这样的社交网络开始变得繁荣起来,前端一时间呈现出了欣欣向荣的局面。

AJAX使得浏览器客户端可以更方便地向服务器发送数据信息,这促进了Web 2.0的发展。

HTML5

1999年,W3C发布了HTML 4.0.1版本,在之后的几年,没有再发布更新的Web标准。随着Web的迅猛发展,旧的Web标准已不能满足Web应用的快速增长。

2004年6月,Mozilla基金会和Opera软件公司在万维网联盟(W3C)所主办的研讨会上提出了一份联合建议书,其中包括Web Forms 2.0的初步规范草案。建议举行一次投票,以表决W3C是否应该扩展HTML和DOM,从而满足Web应用中的新需求。研讨会最后以8票赞成,14票反对否决此建议,这引起一些人的不满,不久后,部分浏览器厂商宣布成立网页超文本技术工作小组(WHATWG),以继续推动该规范的开发工作,该组织再度提出Web Applications 1.0规范草案,后来这两种规范合并形成HTML5。2007年,获得W3C接纳,并成立了新的HTML工作团队。2008年1月22日,第一份正式草案发布。

HTML5草案发布不久,Google在2008年12月发布了Chrome浏览器,加入了第二次浏览器大战当中。Chrome使用了Safari开源的WebKit作为布局引擎,并且研发了高效的JavaScript引擎V8。

尽管HTML5在网络开发人员中非常出名了,但是它成为主流媒体的一个话题是在2010年的4月,当时苹果公司的CEO乔布斯发表一篇题为“对Flash的思考”的文章,指出随着HTML5的发展,观看视频或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了加强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。

在第二次浏览器大战中,各个浏览器厂商都以提升JavaScript运行效率和支持HTML5各种新特性为主要目标,促进了浏览器的良性竞争。

Node.js的爆发

早在1994年,Netspace就公布了其Netspace Enterprise Server中的一种服务器脚本实现,叫做LiveWire,是最早的服务器端JavaScript,甚至早于浏览器中的JavaScript。对于这门图灵完备的语言,Netspace很早就开始尝试将它用在后端。

微软在1996年发布的IE 3.0中内嵌了自己的JScript语言,其兼容JavaScript语法。1997年年初,微软在它的服务器IIS 3.0中也包含了JScript,这就是我们在ASP中能使用的脚本语言。

1997年,Netspace为了用Java实现JavaScript而创建了Rhino项目,最终Rhino演变成一个基于Java实现的JavaScript引擎,由Mozilla维护并开源。Rhino可以为Java应用程序提供脚本能力。2006年12月,J2SE 6将Rhino作为Java默认的脚本引擎。

SpiderMonkey是Mozilla用C/C语言实现的一个JavaScript引擎,从Firefox 3.5开始作为JavaScript编译引擎,并被CouchDB等项目作为服务端脚本语言使用。

可以看到,JavaScript最开始就能同时运行在前后端,但是在前后端的待遇却不尽相同。随着Java、PHP、.Net等服务器端技术的风靡,与前端浏览器中的JavaScript越来越流行相比,服务端JavaScript逐渐式微。

2008年Chrome发布,其JavaScript引擎V8的高效执行引起了Ryan Dahl的注意。2009年,Ryan利用Chrome的V8引擎打造了基于事件循环的异步I/O框架——Node.js诞生。

Node.js的出现吸引了很多前端开发人员开始用JavaScript开发服务器代码,其异步编程风格也深受开发人员的喜爱。Node.js的伟大不仅在于拓展了JavaScript在服务器端的无限可能,更重要的是它构建了一个庞大的生态系统。2010年1月,NPM作为Node.js的包管理系统首次发布。开发人员可以按照CommonJS的规范编写Node.js模块,然后将其发布到NPM上面供其他开发人员使用。目前NPM具有40万左右的模块,是世界上最大的包模块管理系统。2016年常见包管理系统模块数量,NPM高居榜首

Node.js也催生了node-webkit等项目,用JavaScript开发跨平台的桌面软件也成为可能。Node.js给开发人员带来了无穷的想象,JavaScript大有一统天下的趋势。

前后端分离 (前端框架 后端MVC WebAPI)

后端框架主要分为j:ava和.NET两大平台

两大平台(java,.net)诞生之后,组件化编程技术盛极一时,Web技术的发展开始了一段框架横飞的年代,各种辅助Web开发的技术框架层出不穷。虽然脚本语言大大提高了应用开发效率,但是试想一个复杂的大型Web应用,访问各种功能的URL地址纷繁复杂,涉及到的Web页面多种多样,同时还管理着大量的后台数据,因此我们需要在架构层面上解决维护性和扩展性等问题。这个时候,MVC的概念被引入到Web开发中来了。2004年出现的Struts就是当时非常流行的Java Web开发的MVC框架。Model用于封装与业务逻辑相关的数据和数据处理方法,视图View是数据的HTML展现,控制器Controller负责响应请求,协调Model和View。Model,View和Controller的分开,是一种典型的关注点分离的思想,不仅使得代码复用性和组织性更好,使得Web应用的配置性和灵活性更好。

现今最流行的框架:

.NetCore MVC WebAPI IOC AOP ORM(ef,Sqlsugar等)

java架:SSM(spring springmvc mybatis)

前端MMVM框架

随着开发人员对前端技术的重视和html5等技术的流行,前端不再是人们眼中的小玩意,以前在C/S中实现的桌面软件的功能逐步迁移到了前端,前端的代码逻辑逐渐变得复杂起来。

以前只用于后台的MV*等架构在前端逐渐使用起来,以下列举了部分常用的前端技术组合:

GitHub NPM/BOWER ES6/ES7/Babel/TypeScript HTML5 CSS3/SASS/LESS/PostCSS React/Vue/Angular Webpack/Browserify/Gulp/Grunt Node.js/Express/KOA Hybrid

随着这些MV*框架的出现,网页逐渐由Web Site演变成了Web App,最终导致了复杂的单页应用( Single Page Application)的出现。

移动Web和Hybrid App

在这个移动互联网时代不得不提移动web开发技术,随着iOS和Android等智能手机的广泛使用,移动浏览器也逐步加强了对HTML5特性的支持力度。

移动浏览器对HTML5支持程度(2009-2017)

移动浏览器的发展,导致了流量入口逐渐从PC分流到移动平台,这是Web发展的新机遇。移动Web面临着更大的碎片化和兼容性问题,jQuery Mobile、,Sencha Touch、Framework7、Ionic,bootstrap等移动Web框架、响应式框架也随之出现。

相比于Native App,移动Web开发成本低、跨平台、发布周期短的优势愈发明显,但是Native App的性能和UI体验要远胜于移动Web。移动Web与Native App孰优孰劣的争论愈演愈烈,在无数开发者的实践中,人们发现两者不是替代关系,而是应该将两者结合起来,取长补短,Hybrid技术逐渐得到认同。Hybrid技术指的是利用Web开发技术,调用Native相关API,实现移动与Web二者的有机结合,既能体现Web开发周期短的优势,又能为用户提供Native体验。

结语

Web技术依然在快速发展,Web本身的基础规范也在不断完善,HTML5、es6和CSS3引入了更多激动人心的特性。回顾Web的发展历史,从某个角度看,就是抽象层次不断提高的一个过程,更高的抽象层次屏蔽更低层的复杂性,从而提高开发效率。每当技术发展到一定程度,出现某些局限性的时候,就会有更优秀的技术出现来突破这些局限性。其实这是计算机技术发展的一个普遍规律,比如高级语言的出现屏蔽了汇编语言的复杂性,帮助我们更快速的编程;数据库技术的出现使得我们无需关心物理存储和访问细节,写简单的SQL语句就能搞定,更进一步,ORM框架使得我们通过一条语句调用一个类的一个方法就能方便就行数据操作。我们应该让自己的技术视野具备一定的高度和广度,看到一门技术的发展规律和发展历程,这是一种技术修养的体现,其实跟人文修养是一样的。同时也应该具有一定的深度,因为我们往往站在比较高的抽象层次,比如今天你写几行代码就能把数据库创建好,增删改查的功能也自动生成好了,但是成为高手需要你对底层的原理机制有更透彻的理解,真正遇到问题的时候才能抽丝剥茧迎刃而解。